微信小程序实现计时器开始和结束功能

2022-10-31  本文已影响0人  hao_developer

wxml

<view>{{h}}:{{m}}:{{s}}</view>

js

data:{
     h:'00',
     m:'00',
     s:'00',
  //存储计时器
   setInter:'',
   num:1,
},   
// 计时器
queryTime(){
  const that=this;
  var hou=that.data.h;
  var min=that.data.m;
  var sec=that.data.s;
  that.data.setInter  = setInterval(function(){
      sec++;
      if(sec>=60){
       sec=0;
       min++;
       if(min>=60){
         min=0;
         hou++;
         that.setData({
           h:(hou<10?'0'+min:min)
         });
       }else{
         that.setData({
           m:(min<10?'0'+min:min)
         });
       }
      }else{
        that.setData({
          s:(sec<10?'0'+sec:sec)
        });
      }
     var numVal = that.data.num + 1;
     that.setData({ num: numVal });
     console.log('setInterval==' + that.data.num);
    },1000)
},
taskStart(){
  this.queryTime()
},
taskEnd(){
  //清除计时器  即清除setInter
  clearInterval(this.data.setInter)
},
onUnload: function () {
  //清除计时器  即清除setInter
  clearInterval(this.data.setInter);
},
上一篇 下一篇

猜你喜欢

热点阅读