美文网首页
微信小程序实现计时器开始和结束功能

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

作者: hao_developer | 来源:发表于2022-10-31 13:42 被阅读0次

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);
},

相关文章

网友评论

      本文标题:微信小程序实现计时器开始和结束功能

      本文链接:https://www.haomeiwen.com/subject/cqxltdtx.html