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

叁歲伎倆 2022-12-25 03:53 114阅读 0赞

1，微信小程序计时功能，点击开始计时

![20201130142915109.png][]

2，wxml

data:{
         h:'00',
         m:'00',
         s:'00',
      //存储计时器
       setInter:'',
       num:1,
    },   
    
    /**
        * 生命周期函数--监听页面加载
        */
       onLoad: function (options) {
      
       // this.queryTime()
         
    
       },
    // 计时器
    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(that.data.setInter)
       
      },
      onUnload: function () {
        var that =this;
        //清除计时器  即清除setInter
        clearInterval(that.data.setInter)
     
    },

[20201130142915109.png]: /images/20221120/7c184828c50a456fa717930949327d57.png