vue實現跑馬燈效果為阿中哥哥應援
1、效果圖
2、實現代碼
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>跑馬燈</title> <!-- 引入vue.js--> <script src="./lib/vue.js"></script> </head> <body> <div id="app"> <button @click="show">應援</button> <button @click="stop">暫停</button> <h3 v-text="message"></h3> </div> <script> var vm = new Vue({ el:"#app", data:{ message:"阿中阿中勇敢飛，中華兒女永相隨~~~", timer:null //在data上定義定時器timer，默認為null }, methods:{ show(){ if(this.timer != null) return; this.timer = setInterval(() => { //獲取到頭的第一個字符 let start = this.message.substring(0,1); //獲取到后面的所有字符 let end = this.message.substring(1); //重新拼接得到新的字符串，並賦值給this.message this.message = end + start; },300) }, stop(){ //清除定時器 clearInterval(this.timer) //清除定時器之后，需要重新將定時器置為null this.timer = null } } }) </script> </body> </html>