这篇文章主要介绍“小程序如何实现计时器功能”，在日常操作中，相信很多人在小程序如何实现计时器功能问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”小程序如何实现计时器功能”的疑惑有所帮助！接下来，请跟着小编一起来学习吧！
效果图如下
布局（.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
})
}
});注意的点： 在点击启动定时器按钮时，多次连着点击，会累加定时器，会造成定时器加速的效果，为了避免这种情况，应该在每次点击开始前先清除一下定时器。
到此，关于“小程序如何实现计时器功能”的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注亿速云网站，小编会继续努力为大家带来更多实用的文章！
亿速云「云服务器」，即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘，价格低至29元/月。点击查看>>
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
