小程序中的计时器

最新推荐文章于 2024-04-30 16:18:42 发布

原创最新推荐文章于 2024-04-30 16:18:42 发布 · 7k 阅读

17 ·

CC 4.0 BY-SA版权

小程序同时被 2 个专栏收录

35 篇文章

订阅专栏

原生JS

12 篇文章

订阅专栏

本文介绍了在小程序中如何避免计时器累加导致的定时器加速问题。通过在启动定时器前先清除已存在的定时器，可以确保每次点击都是从零开始，保证了计时器的正常运行。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

效果图如下

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