小程序实现计时器功能
作者:今天星期八
这篇文章主要为大家详细介绍了小程序实现计时器功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
本文实例为大家分享了小程序实现计时器功能的具体代码,供大家参考,具体内容如下
效果图如下
布局(.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 }) } });
注意的点: 在点击启动定时器按钮时,多次连着点击,会累加定时器,会造成定时器加速的效果,为了避免这种情况,应该在每次点击开始前先清除一下定时器。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。