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

 更新时间:2022年07月07日 12:31:23   作者:asteriaV  
这篇文章主要为大家详细介绍了微信小程序实现计时器开始和结束功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

本文实例为大家分享了微信小程序实现计时器开始和结束的具体代码,供大家参考,具体内容如下

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

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

相关文章

最新评论