用vue写一个跑马灯
单击飘文字动
单击定住文字暂停
代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="../js/vue.js"></script>
</head>
<body>
<div id="app">
<h3 v-text="msg"></h3>
<button @click="show">飘</button>
<button @click="stop">定住</button>
</div>
<script type="text/javascript">
new Vue({
el: "#app",
data: {
msg: "主要是开心！加油~~~！",
timer: null //在data上定义定时器timer，默认为null
},
methods: {
show() {
if (this.timer != null) return;
this.timer = setInterval(() => {
//获取到头的第一个字符
start = this.msg.substring(0, 1);
//获取到后面的所有字符
end = this.msg.substring(1);
//重新拼接得到新的字符串，并赋值给this.msg
this.msg = end + start;
}, 300)
},
stop() {
//清除定时器
clearInterval(this.timer)
//清除定时器之后，需要重新将定时器置为null
this.timer = null
}
}
})
</script>
</body>
</html>