小程序实现计时器功能
短信预约 -IT技能 免费直播动态提醒
本文实例为大家分享了小程序实现计时器功能的具体代码，供大家参考，具体内容如下
效果图如下
布局（.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
})
}
});注意的点： 在点击启动定时器按钮时，多次连着点击，会累加定时器，会造成定时器加速的效果，为了避免这种情况，应该在每次点击开始前先清除一下定时器。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程网。
免责声明：
① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的，并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据，供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。
② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
