一、定时器的写法:(本例运用的是setInterval)
(1)对定时器使用的基本理解
定时器名 = setInterval(“要执行的函数名”,定时时间毫秒); //定时器
clearInterval(“定时器名”); //取消定时器
(2)本例中应用的模式
var id=setInterval(()=>{
a=this.processbar();
console.log("a is"+a+typeof a);
if(a===100){
clearInterval(id);
console.log("执行了clearInterval函数");
}
},100);
二、vue制作的前提环境
1、进度条的基本效果内容html与css部分见:https://blog.csdn.net/ColourfulTiger/article/details/82910505
2、vue部分的雏形环境见:https://blog.csdn.net/ColourfulTiger/article/details/82912036
三、本例内容定时器应用的方式
不说废话,上代码:
<div class="progress-bar">
<div class='box'>
<div class='clip' id="context" :style="[Width]"></div>
</div>
<span><span id="number">{{num}}</span><i>%</i></span>
</div>
定时器使用部分 :结合vue的生命周期中的mounted使用。
mounted(){
console.log("mounted");
var a=0;
var id=setInterval(()=>{
a=this.processbar();
console.log("a is"+a+typeof a);
if(a===100){
clearInterval(id);
console.log("执行了clearInterval函数");
}
},100);
},
基本配置方面:
data () {
return {
msg: 'layout',
num: 0, //方法一
test:false,
Width:{
"width":"0px",
}
}
},
methods:{
processbar(){
this.num++;
this.Width={
"width": this.num +'px',
}
if(this.num > 100){
this.num = 100;
}
console.log("this.num is" +typeof this.num);
return this.num;
}
}
效果图:
可以看到定时器起作用了,同时当数据为100时,取消定时器的函数也起到效果了。