小程序计时器功能
今天星期八 人气:0效果图如下
布局(.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 }) } });
注意的点: 在点击启动定时器按钮时,多次连着点击,会累加定时器,会造成定时器加速的效果,为了避免这种情况,应该在每次点击开始前先清除一下定时器。
加载全部内容