案例 -- 跑馬燈效果 · 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> ~~~