小程序实现计时器功能

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

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

效果图如下

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

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

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

相关文章

  • uniapp与webview之间的相互传值的实现

    uniapp与webview之间的相互传值的实现

    这篇文章主要介绍了uniapp与webview之间的相互传值的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-06-06
  • JS获取鼠标坐标的实例方法

    JS获取鼠标坐标的实例方法

    这篇文章介绍了JS获取鼠标坐标的实例方法,有需要的朋友可以参考一下
    2013-07-07
  • webpack5 联邦模块介绍详解

    webpack5 联邦模块介绍详解

    这篇文章主要介绍了webpack 5 联邦模块介绍,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-07-07
  • js实现水平和竖直滑动条

    js实现水平和竖直滑动条

    这篇文章主要为大家详细介绍了js实现水平和竖直滑动条,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-08-08
  • JavaScript中捕获/阻止捕获、冒泡/阻止冒泡方法

    JavaScript中捕获/阻止捕获、冒泡/阻止冒泡方法

    本篇文章主要介绍了JavaScript中捕获/阻止捕获、冒泡/阻止冒泡方法,具有一定的参考价值,有兴趣的可以了解一下。
    2016-12-12
  • JS 无法通过W3C验证的处理方法

    JS 无法通过W3C验证的处理方法

    今天在页面上使用JS时发现无法通过W3C验证,检查了一会发现此方法可以屏蔽大多数JS无法通过验证的问题,简单实用
    2010-03-03
  • JavaScript中的编码和解码函数

    JavaScript中的编码和解码函数

    本文主要介绍了JavaScript中的编码和解码函数。具有很好的参考价值,下面跟着小编一起来看下吧
    2017-02-02
  • 微信小程序Page中data数据操作和函数调用方法

    微信小程序Page中data数据操作和函数调用方法

    这篇文章主要介绍了微信小程序Page中data数据操作和函数调用,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-05-05
  • javascript下function声明一些小结

    javascript下function声明一些小结

    function声明一些东西,我们都知道function和var一样是预处理的在js里面,但是到底什么是函数声明呢,我们来看几个例子
    2007-12-12
  • HTML文档引入JS模块出现路径问题解决办法

    HTML文档引入JS模块出现路径问题解决办法

    这篇文章主要给大家介绍了关于HTML文档引入JS模块出现路径问题的解决办法,在HTML中引入JavaScript模块时如果遇到路径问题,通常是因为模块的引用路径不正确,本文将解决办法介绍的非常详细,需要的朋友可以参考下
    2024-03-03

最新评论