当前位置：首页> 正文
微信小程序实现计时器开始和结束功能
本文实例为大家分享了微信小程序实现计时器开始和结束的具体代码，供大家参考，具体内容如下
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)
},
展开全文阅读