您的位置:首页 > 编程学习 > > 正文

vue中的定时函数(vue计时器的实现方法)

更多 时间:2021-10-20 08:24:07 类别:编程学习 浏览量:748

vue中的定时函数

vue计时器的实现方法

本文实例为大家分享了vue实现计时器的具体代码,供大家参考,具体内容如下

vue中的定时函数(vue计时器的实现方法)

这里做的是点击按钮开始与结束倒计时的功能

  • <li class="time" v-if="rptType">{{str}}</li>
    <li class="receipt" :class="rptType?'jdz':'jiedan'" @click="receipt">开始</li>
    
  • 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 计时器
    您可能感兴趣