vue 跑马灯
思路:将字符串的第一个字符取出,再将剩下的所有字符取出,重新拼接字符串,将第一个字符放在最后,设置计时器。
代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="./vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<h3>跑马灯效果</h3>
<div id="app">
<p>{{text}}</p>
<button @click="start()">飘</button>
<button @click="stop()">停止</button>
</div>
<script type="text/javascript">
new Vue({
el:"#app",
data:{
text:'取次花丛懒回顾,半缘修道半缘君。',
temp:null,
},
methods:{
start(){
if(this.temp===null){
this.temp = setInterval(()=>{
let t1 = this.text.substr(0,1);
let t2 = this.text.substring(1);
this.text= t2 + t1;
},100)
}
},
stop(){
clearInterval(this.temp);
this.temp=null;
}
}
})
</script>
</body>
</html>