Vue 跑马灯效果
程序员文章站
2022-03-03 09:31:05
...
Vue 跑马灯效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>跑马灯</title>
<script src="vue.js"></script>
<style>
body,
html {
margin: 0;
width: 100%;
height: 100%;
min-width: 1280px;
min-height: 600px;
background-color: #f2f2f2;
}
</style>
</head>
<body>
<div id="app">
<div>
<button @click="lang">浪起来</button>
<button @click="stop">低调</button>
</div>
<div>{{message}}</div>
</div>
</body>
<script>
new Vue({
el: '#app',
data: {
message: '猥琐发育，别浪~~！',
intervalId:null //在data上定义计时器id
},
methods:{
lang(){
if(this.intervalId!=null)
return;
this.intervalId= setInterval(() =>{
var start = this.message.substring(0,1)//第一个字符
var end = this.message.substring(1)//剩下的字符
this.message=end + start //重新拼接=尾部+头部
},600)
},
stop(){
clearInterval(this.intervalId)
//每当清除定时器之后，需要重新把定时器设为null
this.intervalId=null
}
},
})
// 1.给浪起来按钮绑定一个点击事件
// 2.在按钮的事件处理方法中，写相关代码：拿到message字符串，
// 然后调用字符串的substring方法来截图字符串，把第一个字符截取出来，放到最后即可
//3.为了实现点击按钮，自动截取功能，需要把2中步骤代码放到定时器中
</script>
</html>