小程序计时器

简介: 小程序计时器

之前写了一个小程序倒计时的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不想写了,可以用组件库,

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

相关文章
|
11月前
|
Linux 调度
按键消抖的两种方法--中断延迟工作与定时器
按键消抖的两种方法--中断延迟工作与定时器
423 0
|
1月前
|
测试技术 API 开发者
软件计时器
软件计时器
21 1
|
1月前
|
安全
如何定时关闭程序
该内容是一篇关于如何使用工具进行定时关闭程序的指南。文中提供了两个下载工具的链接,分别来自百度网盘和蓝奏云,附有提取码。操作步骤提到可以参考之前的文章《快捷自由定时重启、注销、关机》,并指出在最后选择“关闭程序”并输入程序名称。此外,还解释了如何找到程序名称的方法,包括通过浏览硬盘和使用任务管理器,强调需添加“.exe”后缀。文中配有多张图片以辅助说明。
|
8月前
用555定时器接成的多谐振荡电路的介绍
用555定时器构建的多谐振荡电路 一、引言 多谐振荡电路是一种能够产生多个频率的振荡信号的电路结构。它在音乐合成器、电子琴等设备中有着广泛的应用。本文将介绍一种使用555定时器构建的多谐振荡电路。 二、555定时器简介 555定时器是一种经典的集成电路,由三个功能单元组成:比较器、RS触发器和放大器。它可以用作脉冲发生器、频率分频器、定时器等。在多谐振荡电路中,我们将利用555定时器的单稳态多谐振荡特性来实现多个频率的振荡。 三、电路设计 1. 电路原理 多谐振荡电路的基本原理是利用555定时器的单稳态多谐振荡特性。单稳态多谐振荡是指当555定时器处于单稳态时,输出信号的频率会随着电容和
239 0
|
1月前
|
C#
[C#] 定时器的使用
[C#] 定时器的使用
22 0
Qt一句话做一个单次倒计时定时器
Qt一句话做一个单次倒计时定时器
|
11月前
扣奖(定时器)
扣奖(定时器)
37 0
|
消息中间件 JavaScript 前端开发
JavaScript中的一次性定时器和周期性定时器
JavaScript中的一次性定时器和周期性定时器
385 0
|
前端开发 JavaScript
34、定时器
setTimeout函数用来指定某个函数或某段代码,在多少毫秒之后执行。
129 0