WeChat Mini Program Timer Start and End Function

1. Timing function of WeChat applet, click to start timing

2，wxml

<view class='tip'>计时器{
   
   {h}}:{
   
   {m}}:{
   
   {s}}</view>

 <button class='but bg-blue on'   bindtap="taskStart">任务开始</button>
 <button class='but bg-blue on' bindtap="taskEnd">任务结束</button>

 js

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