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

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

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

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

查看更多关于微信小程序实现计时器开始和结束功能的详细内容...