Vue跑马灯效果
程序员文章站
2022-05-15 22:54:03
...
Vue跑马灯效果
下面展示 代码。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="vue.js"></script>
</head>
<body>
<div id="app">
<button @click="show">hai</button>
<button @click="stop">stop</button>
<span>{{ msg }}</span>
</div>
<script>
var vm = new Vue({
el: "#app",
data: {
msg: "wo dong qi lai le",
timer:null
},
methods: {
show: function () {
if(this.timer!=null)return;
//设置定时器
this.timer=setInterval(()=>{//箭头函数
//获取头部第一个字符
start=this.msg.substring(1);
//获取后面所有的字符
end=this.msg.substring(0,1);
//重新拼接得到新字符串
this.msg=start+end;
},300)
},
stop: function () {
//清除定时器
clearInterval(this.timer)
//清除后，重新置为null
this.timer=null
}
}
})
</script>
</body>
</html>
原理很简单，就是通过取字符串的第一个字符，以及后面的剩余的字符串，反复拼接，通过设置定时器，实现的跑马灯的效果。