<body>
<div id="app">
<button @click="start" :disabled="disabled">开滚</button>
<button @click="stop" :disabled="!disabled">别滚</button>
<div>{{msg}}</div>
</div>
</body>
<script>
let vm = new Vue({
el: '#app',
data: {
disabled: false,
msg: ' 你就滚刀，你就对就完了呗，<=====]==o',
timer: null
},
methods: {
start() {
this.disabled = !this.disabled;
clearInterval(this.timer)
this.timer = setInterval(() => {
var first = this.msg.substring(0, 1);
var last = this.msg.substring(1)
this.msg = this.msg = last + first;
}, 100)
},
stop() {
this.disabled = !this.disabled;
clearInterval(this.timer)
}
}
})
</script>跑马灯的原理主要就是在一个定时器里不断截取当前字符串的第一个字符，拼接到剩余字符后面，来实现跑马灯的效果，用disabled来防止按钮的二次点击。
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
