小程序实现计时器功能
本文实例为大家分享了小程序实现计时器功能的具体代码，供大家参考，具体内容如下
效果图如下
布局（.wxml）
<view class="countTime">{{timecount}}</view>
<button class="aaa" bindtap="start">开始</button>
<button class="aaa" bindtap="stop">暂停</button>
<button class="aaa" bindtap="Reset">停止</button>
样式（.css）
/* 小程序计时器 */
.countTime{
height:200px;
font-size:30px;
line-height:200px;
text-align: center;
}
.aaa{
width:150px;
background:rgb(7, 193, 96);
color:#fff;
margin-bottom:8px;
}
效果（.js）
var init;
Page({
data: {
//小程序计时器
hour:0,
minute:0,
second:0,
millisecond:0,
timecount:'00:00:00',
cost:0,
flag:1,
endtime:"",
},
start:function(){
clearInterval(init);
var that=this;
that.setData({
hour:0,
minute:0,
second:0,
millisecond:0
})
init=setInterval(function(){
that.timer()
},50);
},
stop:function(){
clearInterval(init);
},
Reset:function(){
var that=this;
clearInterval(init);
that.setData({
hour:0,
minute:0,
second:0,
millisecond:0,
timecount:'00:00:00'
})
},
timer:function(){
var that = this;
console.log(that.data.millisecond)
that.setData({
millisecond:that.data.millisecond+5
})
if(that.data.millisecond>=100){
that.setData({
millisecond:0,
second:that.data.second + 1
})
}
if(that.data.second >= 60){
that.setData({
second:0,
minute:that.data.minute+1
})
}
if(that.data.minute>=60){
that.setData({
minute:0,
hour:that.data.hour+1
})
}
that.setData({
timecount:that.data.hour+":"+that.data.minute+":"+that.data.second+":"+that.data.millisecond
})
}
});
注意的点： 在点击启动定时器按钮时，多次连着点击，会累加定时器，会造成定时器加速的效果，为了避免这种情况，应该在每次点击开始前先清除一下定时器。
