小程序实现计时器功能

本文实例为大家分享了小程序实现计时器功能的具体代码，供大家参考，具体内容如下

效果图如下

布局（.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
    })
  }
});

注意的点： 在点击启动定时器按钮时，多次连着点击，会累加定时器，会造成定时器加速的效果，为了避免这种情况，应该在每次点击开始前先清除一下定时器。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持易盾网络。