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>