小程序计时器

简介: 小程序计时器

之前写了一个小程序倒计时的demo,在网上查看了一下,计时器很少有demo,现在来写一个。

wxml

<view class="container"> {{timecount}}</view>
<button   bindtap='start'>开始</button>
<button   bindtap='stop'>暂停</button>
<button   bindtap='Reset'>停止</button>

JS

var intt;
Page({
  data: {
    hour: 0,
    minute: 0,
    second: 0,
    millisecond: 0,
    timecount: '00:00:00',
    cost: 0,
    flag: 1,
    endtime: "",
  },
  onLoad: function () {
  },
  //开始
  start: function () {
    var that = this;
    //停止(暂停)
    clearInterval(intt);
    //时间重置
    that.setData({
      hour: 0,
      minute: 0,
      second: 0,
      millisecond: 0,
    })
    intt = setInterval(function () { that.timer() }, 50);
  },
  //暂停
  stop: function () {
    clearInterval(intt);
  },
  //停止
  Reset: function () {
    var that = this
    clearInterval(intt);
    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
    })
  },
});

css:

.container{
  height:200rpx;
  line-height:200rpx;
  font-size:50rpx;
}
button{
  width:150rpx;
  background: rgb(7, 193, 96);
  color: #fff;
  margin-bottom: 8px;
}

要是样式css不想写了,可以用组件库,

如果组件库不会使用,可以查看教程

相关文章
|
C++
1.【C++模拟打卡计时系统】
1.【C++模拟打卡计时系统】
76 0
|
Linux 调度
按键消抖的两种方法--中断延迟工作与定时器
按键消抖的两种方法--中断延迟工作与定时器
760 0
|
5月前
|
前端开发 JavaScript
前端基础(十三)_定时器(间歇定时器、延迟定时器)
本文介绍了JavaScript中定时器的使用,包括`setTimeout`和`setInterval`两种类型。`setTimeout`是实现延迟执行,即等待一定时间后执行一次指定的函数;而`setInterval`是实现间歇执行,即每隔一定时间就执行一次指定的函数。文章还介绍了如何使用`clearTimeout`和`clearInterval`来取消定时器的执行,并通过示例代码展示了定时器的创建和取消。
206 4
前端基础(十三)_定时器(间歇定时器、延迟定时器)
|
7月前
|
存储 前端开发 JavaScript
前端如何优雅的使用定时器?
前端如何优雅的使用定时器?
72 1
|
9月前
|
测试技术 API 开发者
软件计时器
软件计时器
162 1
|
9月前
|
监控 调度
硬件计时器
硬件计时器
104 0
|
数据格式
嵌入式 QT 定时器与计时器
嵌入式 QT 定时器与计时器
|
运维 JavaScript 前端开发
brython | timer 计时器
brython | timer 计时器
96 1
|
JavaScript 前端开发
一个按钮控制定时器的开始与暂停
一个按钮控制定时器的开始与暂停
一个按钮控制定时器的开始与暂停
【51定时器】独立按键-短按与长按
【51定时器】独立按键-短按与长按
221 0