实现逻辑：
① 根据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">欢迎访问TwcatL的博客!!!</div> <div class="btn-wrap"> <button class="btn-start"> <span οnclick="start()">动起来</span> </button> <button class="btn-stop"> <span οnclick="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() 方法的参数。
代码实现：
<!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页面，只需要关心数据即可。
