vue计时器_vue的计时器-CSDN博客

本文链接：https://blog.csdn.net/HXH_csdn/article/details/103902834

本文介绍了一个基于Vue.js的倒计时功能实现，通过点击按钮启动或停止倒计时，展示了如何在Vue中使用setInterval进行定时更新，并提供了重置功能。代码示例详细解释了数据属性和方法的使用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在这里插入图片描述
这里做的是点击按钮开始与结束倒计时的功能

<div class="time" v-if="rptType">{{str}}</div>
<div class="receipt" :class="rptType?'jdz':'jiedan'" @click="receipt">开始</div>

data(){
	return{
		rptType: false,//状态
     	h:0,//定义时，分，秒，毫秒并初始化为0；
        m:0,
        ms:0,
        s:0,
        time:0,
        str:'',
	}
},
mounted:function(){
	this.$nextTick(function () {//整个视图都渲染完毕
	})
},
methods:{
	getTask: function(e){
		this.taskType = e;
	},
	//开始
	receipt: function() {
		this.rptType = !this.rptType;
		if(this.rptType){
			this.time=setInterval(this.timer,50);
		}else{
			this.reset()
		}
	},
	timer: function(){   //定义计时函数
	    this.ms=this.ms+50;         //毫秒
	    if(this.ms>=1000){
	      this.ms=0;
	      this.s=this.s+1;         //秒
	    }
	    if(this.s>=60){
	      this.s=0;
	      this.m=this.m+1;        //分钟
	    }
	    if(this.m>=60){
	      this.m=0;
	      this.h=this.h+1;        //小时
	    }
	    this.str =this.toDub(this.h)+":"+this.toDub(this.m)+":"+this.toDub(this.s)+""/*+this.toDubms(this.ms)+"毫秒"*/;
	    // document.getElementById('mytime').innerHTML=h+"时"+m+"分"+s+"秒"+ms+"毫秒";
	},
	toDub: function(n){  //补0操作
	    if(n<10){
	      return "0"+n;
	    }
	    else {
	      return ""+n;
	    }
	},
	reset: function(){  //重置
	    clearInterval(this.time);
	    this.h=0;
	    this.m=0;
	    this.ms=0;
	    this.s=0;
	    this.str="00:00:00";
	},
}