<body>
<div id="test">
<input type="button" value="滚动" @click='roll'>
<input type="button" value="暂停" @click='stop'><br>
<span>{{ msg }}</span>
</div>
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
<script>
const vm=new Vue({
el:'#test',
data:{
msg:'德玛西亚万岁,德玛西亚永世长存!!!~~~~',
IntervalId:null
},methods:{
/*功能原理:
将第一个字符和剩余字符调换位置
*/
roll(){
/*setInterval()里如果不是箭头函数
是function的话this.msg会报错
你可以先声明
var _this = this;
然后将下面的所有this变成_this,
原因是function里this的指向变了,不再是vm了 */
this.IntervalId=setInterval(()=>{
//获取第一个字符
let strStar=this.msg.substring(0,1)
//获取剩余字符
let strEnd=this.msg.substring(1)
//重新拼接
this.msg = strEnd + strStar
},100)
},
/*
清除计时器
*/
stop(){
clearInterval(this.IntervalId)
this.IntervalId=null
}
}
})
</script>
</body>
07-29
07-29
07-29
07-29