写在前面： 我是「扬帆向海」，这个昵称来源于我的名字以及女朋友的名字。我热爱技术、热爱开源、热爱编程。
技术是开源的、知识是共享的。这博客是对自己学习的一点点总结及记录，如果您对Java、算法感兴趣，可以关注我的动态，我们一起学习。
用知识改变命运，让我们的家人过上更好的生活。
文章目录
一、使用js实现二、使用vue实现一、使用js实现
实现逻辑：
① 根据id值获取标签
② 获取标签的文本内容
③ 截取文本内容的第一个字
④ 截取文本内容第一个字后面的所有内容
⑤ 把第③步截取的第一个字拼接到第④步截取的文本内容后面
⑥ 将第⑤步拼接后的字符串写入到第①步的标签中
代码实现：
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>纯js实现跑马灯效果</title><style>.btn-start {text-align: center;color: white;background-color: green;font-size: 15px;margin-top: 10px;}.btn-stop {text-align: center;color: white;background-color: red;font-size: 15px}.btn-wrap {margin: 10px auto;width: 32%;}#str {background-color: rgb(116, 114, 231);color: white;font-size: 35px;width: 32%;margin: auto;}</style><script type="text/javascript" src="js/jquery.js"></script></head><body><div id="str">欢迎访问扬帆向海的博客!!!</div><div class="btn-wrap"><button class="btn-start"><span onclick="start()">动起来</span></button><button class="btn-stop"><span onclick="stop()">停下来</span></button></div><script type="text/javascript">var intervalId = null;var timerId = null;$(function () {initTimer();})function start() {// 判断定时器id是否为空if (intervalId != null) {return}intervalId = setInterval(function () {var label = document.getElementById('str'); var text = label.innerText;var begin = text.substring(0, 1);var end = text.substring(1);var text_new = end + begin;label.innerText = text_new;}, 200);}function stop() {// 清除定时器clearInterval(intervalId);// 把定时器id置为空intervalId = null;}function initTimer() {// 设置在指定2秒后执行timerId = setTimeout(function () {start();}, 2000);}</script></body></html>
测试效果：
注意：
①setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式。setTimeout()方法接收两个参数，第一个参数是将要推迟执行的函数名或者一段代码，第二个参数是推迟执行的毫秒数。
在上面的跑马灯效果中，当打开页面的时候，等待两秒钟，它会自动调用start方法，实现动起来的效果。
②setInterval() 方法可按照指定的周期（以毫秒计）来调用函数或计算表达式。
setInterval() 方法会不停地调用函数，直到clearInterval() 被调用或窗口被关闭。由setInterval() 返回的 ID 值可用作clearInterval() 方法的参数。
二、使用vue实现
代码实现：
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><script src="js/vue.js"></script><script src="js/jquery.js"></script><style>.btn-start {text-align: center;color:white;background-color: green;font-size: 15px;margin-top: 10px;}.btn-stop {text-align: center;color: white;background-color: red;font-size: 15px}.btn-wrap {margin: 10px auto;width: 32%;}.str{background-color: rgb(116, 114, 231);color: white;font-size: 35px;width: 32%;margin: auto;}</style> </head><body><div id="app"><div class="str">{{msg}}</div><div class="btn-wrap"><input type="button" class="btn-start" value="动起来" @click="start" /><input type="button" class="btn-stop" value="停下来" @click="stop" /></div></div><script>var vm = new Vue({el: "#app",data: {msg: "欢迎访问扬帆向海的博客!!!",intervalId: null, timerId: null},mounted() {this.initTimer()},methods: {start() {if (this.intervalId != null) {return;}this.intervalId = setInterval(() => {var begin = this.msg.substring(0, 1)var end = this.msg.substring(1)this.msg = end + begin}, 200);},stop() {clearInterval(this.intervalId)this.intervalId = null},initTimer() {this.timerId = setTimeout(() => {this.start()},2000)}},destoryed() {this.timerId = null}});</script></body></html>
注意：
① 在vue中，如果想要获取data上的数据，或者想要调用 methods 中的方法，必须通过this.属性名或this.方法名来进行调用，其中this就是当前的实例对象。
② 在vue中，会监听data中所有数据的改变，只要数据一发生改变，就会自动把最新的数据同步到页面中去。这样可以减少程序员的工程量，不再考虑如何重新渲染dom页面，只需要关心数据即可。
由于水平有限，本博客难免有不足，恳请各位大佬不吝赐教！
