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

最新推荐文章于 2024-07-05 08:25:53 发布

原创最新推荐文章于 2024-07-05 08:25:53 发布 · 1k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#微信小程序 #小程序 #javascript

wx 专栏收录该内容

1 篇文章

订阅专栏

该代码示例展示了在微信小程序中使用WXML和JS实现一个计时器功能，包括开始、结束任务的按钮。计时器在页面加载时启动，每秒更新时间显示，并在任务结束时清除计时器。在页面卸载时也会自动清除计时器，防止内存泄漏。

1.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>

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