微信小程序计时器开始和结束
asteriaV 人气:01、微信小程序计时功能,点击开始计时
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) },
加载全部内容