案例 -- 跑马灯效果 · Vue&&TypeSprict--基础总结

>[success] # 跑马灯效果 ~~~ 1.实现的效果，点击跑马灯按钮后，文字可以滚动 2.点击停止后文字停止滚动 ~~~ >[danger] ##### 技术思考点 ~~~ 1.当启动按钮被点击后，再次点击不应触发定时器 2.点击停止时，清除定时器 3.定时器已经被清除在点击停止，触发无效的 4.当定时器被清除后，要重新给定时器对象赋值为null。 ~~~ >[danger] ##### 页面形成效果 ![](https://box.kancloud.cn/a27b7cbbbf9cd352d7dfdd59659afa9a_339x100.png) >[danger] ##### 代码 ~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title>  <script src="https://cdn.jsdelivr.net/npm/vue@2.5.22/dist/vue.js"></script> </head> <body> <div id="app" style="margin: 0 auto;width: 960px" > <button @click="start">启动跑马灯效果</button> <button @click="end">停止跑马灯效果</button> <h4>{{msg}}</h4> </div> <script> var vm = new Vue({ el: '#app', data: { timeId:null, msg:'我是跑马灯,文字滚动效果', }, methods:{ start(){ if(this.timeId == null){ this.timeId = setInterval(()=>{ let startMsg = this.msg.slice(0,1); let endMsg = this.msg.slice(1,this.msg.length+1); this.msg = endMsg+startMsg; },400); } }, end(){ if(this.timeId){ clearInterval(this.timeId); this.timeId = null; } } } }); </script> </body> </html> ~~~