小程序如何實現計時器功能

這篇文章主要介紹“小程序如何實現計時器功能”，在日常操作中，相信很多人在小程序如何實現計時器功能問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”小程序如何實現計時器功能”的疑惑有所幫助！接下來，請跟著小編一起來學習吧！

效果圖如下

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

注意的點： 在點擊啟動定時器按鈕時，多次連著點擊，會累加定時器，會造成定時器加速的效果，為了避免這種情況，應該在每次點擊開始前先清除一下定時器。

到此，關于“小程序如何實現計時器功能”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續學習更多相關知識，請繼續關注億速云網站，小編會繼續努力為大家帶來更多實用的文章！