微信小程序如何实现计时器从开始到结束的完整功能？

本文共计493个文字，预计阅读时间需要2分钟。

原文示例：本文实例为大家分享了微信小程序实现计时器开始和结束的整体代码，供大家参考。具体内容如下：+1、微信小程序计时器功能，点击开始计时+2、wxml中view class='tip' 计时器{{h}}:{{m}}:{{s}}

改写后：本文以微信小程序计时器实现为例，展示了计时器开始和结束的关键代码，供学习参考。内容概要：+1、实现微信小程序计时器功能，点击启动计时+2、WXML中设置计时器显示样式，如：view class='tip' 显示计时器{{h}}:{{m}}:{{s}}/view

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

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持自由互联。