这篇文章将为大家详细讲解有关vue怎么实现计时器,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。
具体内容如下
这里做的是点击按钮开始与结束倒计时的功能
<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"; }, }
关于“vue怎么实现计时器”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,使各位可以学到更多知识,如果觉得文章不错,请把它分享出去让更多的人看到。
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。