哔哩哔哩视频:vue的走马灯示例
思路:
读取列表前一位,赋值为start。再取出第一位之后的全部!新的列表拼接成=end+start即可!
// substring(start,stop)
// start 必需。一个非负的整数,规定要提取的子串的第一个字符在 stringObject 中的位置。
// stop 可选。一个非负的整数,比要提取的子串的最后一个字符在 stringObject 中的位置多 1。
// 如果省略该参数,那么返回的子串会一直到字符串的结尾。
然后设置一个计时器。再设置一个清空计时器的函数。但是无论是设置计时器,还是清空计时器。都要有判断条件的!
结果:
1,初始:
2,点击开始:
3,点击结束:
代码:
<!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="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<input type="button" value="走起" @click="gogo">
<input type="button" value="停止" @click="stop">
<h4>{{msg}}</h4>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
msg: '欢迎光临!',
intervalid:null
},
methods:{
gogo() {
if(this.intervalid == null){
var _this = this
this.intervalid = setInterval(function(){
console.log(_this.msg)
var start = _this.msg.substring(0,1)
var end = _this.msg.substring(1)
// substring(start,stop)
// start 必需。一个非负的整数,规定要提取的子串的第一个字符在 stringObject 中的位置。
// stop 可选。一个非负的整数,比要提取的子串的最后一个字符在 stringObject 中的位置多 1。
// 如果省略该参数,那么返回的子串会一直到字符串的结尾。
_this.msg = end+start
},400)
}
},
stop(){
clearInterval(this.intervalid)
this.intervalid = null
}
}
})
</script>
</body>
</html>