小程序实现计时器小功能

 更新时间:2022年09月09日 17:21:47   作者:今天星期八  
这篇文章主要为大家详细介绍了小程序实现计时器小功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

本文实例为大家分享了小程序实现计时器小功能的具体代码,供大家参考,具体内容如下

效果图如下

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

注意的点: 在点击启动定时器按钮时,多次连着点击,会累加定时器,会造成定时器加速的效果,为了避免这种情况,应该在每次点击开始前先清除一下定时器。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

相关文章

  • 原生JavaScript轮播图实现方法

    原生JavaScript轮播图实现方法

    这篇文章主要为大家详细介绍了原生JavaScript轮播图实现方法,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-08-08
  • Webpack优化配置缩小文件搜索范围

    Webpack优化配置缩小文件搜索范围

    这篇文章主要介绍了Webpack优化-缩小文件搜索范围的相关知识,文中较详细的给大家介绍了可以优化的途径,需要的朋友可以参考下
    2017-12-12
  • 如何创建 JavaScript 自定义事件

    如何创建 JavaScript 自定义事件

    这篇文章主要介绍了如何创建 JavaScript 自定义事件,我们将通过文章学习到有关创建自定义事件,侦听自定义事件以及创建双击自定义事件所要了解的内容,需要的朋友可以参考一下
    2022-05-05
  • JavaScript计算字符串中每个字符出现次数的小例子

    JavaScript计算字符串中每个字符出现次数的小例子

    这篇文章介绍了在JS中计算字符串中每个字符出现的次数,有需要的朋友可以参考一下
    2013-07-07
  • 用JavaScript实现简单网页时钟

    用JavaScript实现简单网页时钟

    这篇文章主要为大家详细介绍了用JavaScript实现简单网页时钟,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-08-08
  • 微信小程序版本机制和storage如何平滑兼容详解

    微信小程序版本机制和storage如何平滑兼容详解

    这篇文章主要给大家介绍了关于微信小程序版本机制和storage如何平滑兼容的相关资料,文中通过实例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2022-12-12
  • JS+CSS实现类似QQ好友及黑名单效果的树型菜单

    JS+CSS实现类似QQ好友及黑名单效果的树型菜单

    这篇文章主要介绍了JS+CSS实现类似QQ好友及黑名单效果的树型菜单,涉及JavaScript结合鼠标事件针对页面元素CSS样式的动态操作技巧,非常简单实用,需要的朋友可以参考下
    2015-09-09
  • JavaScript实现无限级递归树的示例代码

    JavaScript实现无限级递归树的示例代码

    这篇文章主要介绍了JavaScript实现无限级递归树的示例代码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-03-03
  • JavaScript中处理数组,对象和正则的实用函数

    JavaScript中处理数组,对象和正则的实用函数

    本文主要分享一下最近项目中遇到的一些javascript的业务逻辑函数,这些函数可以提成一个公用的工具函数以便于在以后的项目中进行使用,希望对大家有所帮助
    2023-11-11
  • JavaScript监测ActiveX控件是否已经安装过的代码

    JavaScript监测ActiveX控件是否已经安装过的代码

    这是通用的方法,只需要把唯一的Activex的clsid和任意一个属性或方法名传进来就可以判断了。(找了两个小时才找到 -_-!)
    2008-09-09

最新评论