专栏首页编程微刊小程序计时器

小程序计时器

之前写了一个小程序倒计时的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不想写了,可以用组件库, 如果组件库不会使用,可以查看教程 五分钟上手-微信小程序组件库 iView Weapp https://www.jianshu.com/p/09b4515152ff

效果:

原文作者:祈澈姑娘 技术博客:https://www.jianshu.com/u/05f416aefbe1 90后前端妹子,爱编程,爱运营,文艺与代码齐飞,魅力与智慧共存的程序媛一枚。 欢迎关注【编程微刊】公众号,回复【领取资源】,500G编程学习资源干货免费送。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 微信小程序云开发数据导入(json格式)

    上篇写道:小程序云开发的开通流程及添加集合数据:https://www.jianshu.com/p/17097e5c9ae4

    王小婷
  • uniapp带参数跳转,新页面接收参数

    1:index.vue的页面,在按钮上绑定点击事件,将所要传递的参数放在点击事件的方法里面。

    王小婷
  • 微信小程序弹框提示绑定手环实例

    今天想聊一聊小程序里面存在的一些逻辑问题,拿手上的这个小程序来说,(这个小程序是开发出来玩的,每个人手上有一个手环,带着手环时候的心率,运动步数,血压数据都会展...

    王小婷
  • 你的心事我全知晓——心情日记小程序丨实战

    1、通过wx.createInnerAudioContext()获取实例 ,安卓机上音乐能正常播放,IOS上不行,具体原因感兴趣的可以去深究一下;

    腾讯云开发TCB
  • 011SSH免密码登陆

    单向无密码访问远程服务器操作比较简单,比如服务器A需要无密码访问服务器B(A–>B),那么只需要在服务器A生成密钥对,将生成的公钥上传到服务器B的相关用户目录下...

    上善若水.夏
  • 来!因子投资基金如何赚钱?

    因子策略的开端,要从Fama-French 在资本资产定价模型上提出三因子模型说起,其在原有的市场因子Beta上,加上市值因子SMB和账面市值比因子HML,指出...

    量化投资与机器学习微信公众号
  • MAC下 Centos7 下 免账号免密码便捷登录服务器的正确姿势 实践笔记

    cookily
  • R语言基础教程——第3章:数据结构——因子

    变量可归结为名义型、有序型或连续型变量。名义型变量是没有顺序之分的类别变量。类别(名义型)变量和有序类别(有序型)变量在R中称为因子(factor)。因子在R中...

    DoubleHelix
  • Learning ROS for Robotics Programming Second Edition学习笔记(二) indigo tools

    中文译著已经出版,详情请参考:http://blog.csdn.net/ZhangRelay/article/category/6506865

    zhangrelay
  • 渗透实战之QQ空间钓鱼网站

    然后发现地址栏域名和垃圾邮箱里面的给的链接的域名不一样, 是跳转过去的,遂访问初始的域名。

    HACK学习

扫码关注云+社区

领取腾讯云代金券