vue计时器的实现方法
作者
vue计时器的实现方法
本文实例为大家分享了vue实现计时器的具体代码,供大家参考,具体内容如下
这里做的是点击按钮开始与结束倒计时的功能
{{str}}
开始
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表格组件教程学习(vue proxytable只能在开发环境跨域吗)
vueproxytable只能在开发环境跨域吗?跨域问题来源于JavaScript的同源策略,即只有协议主机名端口号(如...
-
Vue组件的自定义事件和全局事件总线怎么使用
Vue组件的自定义事件和全局事件总线怎么使用这篇“Vue组件的自定...
-
vue中消息订阅与发布如何使用
vue中消息订阅与发布如何使用这篇文章主要介绍“vue中消息订阅与...
-
Vue显示图片的方式有哪些
Vue显示图片的方式有哪些这篇文章主要介绍“Vue显示图片的方式有...
-
vue引入静态jquery报错如何解决
vue引入静态jquery报错如何解决这篇文章主要介绍“vue引入...
-
vue-cropper怎么实现裁剪图片
-
怎么用Vue+NodeJS实现大文件上传
怎么用Vue+NodeJS实现大文件上传本文小编为大家详细介绍“怎...
-
Vue如何实现简易跑马灯效果
Vue如何实现简易跑马灯效果本文小编为大家详细介绍“Vue如何实现...
-
Vue怎么指定不编译的文件夹和favicon.ico
Vue怎么指定不编译的文件夹和favicon.ico这篇文章主要介...
-
Vue中的插槽怎么使用