<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!--导包-->
<script src="lib/vue-2.4.0.js"></script>
</head>
<body>
<div id="app">
<input type="button" value="开始" @click="kaishi"> <!-- @click 使用v-on绑定click事件触发方法 -->
<input type="button" value="开始B" @click="kaishib">
<input type="button" value="停止" @click="tinzhi">
<h2>{{stringa}}</h2>
</div>
</body>
<script>
var app = new Vue({
el: '#app',
data: {
stringa: '1234567890',
id: null //在data上定义定时器的ID
},
methods: {
//在VM实例中，如果想要获取data上的数据，或者调用methods中的方法，必须通过this.数据属性名或者this.方法名来访问，这里的this就代表我们new出来的VM实例对象
kaishi: function () {
var _this = this;//这里this和_this都代表了同一个对象
if (this.id != null) return;//判断id是否等于null，等于null的话表示定时器是停止的，继续执行下面代码；如果不等于null的话表示定时器还在继续，则不能再继续调用定时器
this.id = setInterval(function () {//定时器；把定时器的值赋给id
var a1 = _this.stringa.substring(0, 1);//获取字符串的第一个字符
var a2 = _this.stringa.substring(1);//获取字符串第一个字符之后的字符
_this.stringa = a2 + a1;//重新拼接字符串并且赋值给stringa
}, 100)//100代表：多少ms执行一次定时器
},
kaishib: function () {
if (this.id != null) return;
this.id = setInterval(() => {//=>详情：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Functions/Arrow_functions#不绑定this
var a1 = this.stringa.substring(0, 1);
var a2 = this.stringa.substring(1);
this.stringa = a2 + a1;
}, 100)
}
, tinzhi() {
clearInterval(this.id);//停止定时器
this.id = null; //每次清除定时器后，把id也重新赋为null，否则30行if将无法通过则停止之后无法再次启动定时器
}
}
})
//1、给"开始"按钮绑定单击事件（使用v-on)。
//2、在按钮的事件处理函数中，写相关的业务逻辑代码：拿到字符串，然后调用字符串的substring来进行字符串截取操作，把第一个字符截取出来放到最后一个位置即可。
//3、为了实现点击按钮后，重复调用截取、拼接操作，需要把第2步中的代码放到定时器中重复循环。
</script>
</html>
219
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
