小程序实现计时器功能

 更新时间: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
    })
  }
});

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

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

相关文章

  • 总结5种JavaScript异步解决方案

    总结5种JavaScript异步解决方案

    这篇文章主要讲解了JavaScript异步解决处理方案,文章中有详细的解决方案和代码示例,需要的朋友参考一下
    2023-04-04
  • 基于JS实现二维码图片固定在右下角某处并跟随滚动条滚动

    基于JS实现二维码图片固定在右下角某处并跟随滚动条滚动

    这篇文章主要介绍了基于JS实现二维码图片固定在右下角某处并跟随滚动条滚动,代码简单易懂非常不错,具有参考借鉴价值,需要的朋友可以参考下
    2017-02-02
  • javascript的alert box在java中如何显示多行

    javascript的alert box在java中如何显示多行

    这篇文章主要介绍了javascript的alert box在java中如何显示多行,需要的朋友可以参考下
    2014-05-05
  • 详解基于webpack2.x的vue2.x的多页面站点

    详解基于webpack2.x的vue2.x的多页面站点

    本篇文章主要主要介绍了基于webpack2.x的vue2.x的多页面站点 ,具有一定的参考价值,感兴趣的小伙伴们可以参考一下。
    2017-08-08
  • 微信小程序开发之数据存储 参数传递 数据缓存

    微信小程序开发之数据存储 参数传递 数据缓存

    本文主要介绍了微信小程序开发之数据存储、参数传递、数据缓存的相关知识。具有很好的参考价值。下面跟着小编一起来看下吧
    2017-04-04
  • JavaScript中forEach的错误用法汇总

    JavaScript中forEach的错误用法汇总

    js中foreach是用于遍历数组的方法,将遍历到的元素传递给回调函数,遍历的数组不能是空的要有值,下面这篇文章主要给大家介绍了关于JavaScript中forEach的错误用法,需要的朋友可以参考下
    2022-06-06
  • 值得分享的bootstrap table实例

    值得分享的bootstrap table实例

    这篇文章主要为大家详细介绍了一个值得分享的bootstrap table实例,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-09-09
  • 原生Js页面滚动延迟加载图片实现原理及过程

    原生Js页面滚动延迟加载图片实现原理及过程

    页面滚动加载事件,获取元素在页面里的top值根据滚动条的位置判断何时显示图片;获取元素集合 加载过的图片从集合里删除,具体实现如下,感兴趣的朋友各位可以参考下哈
    2013-06-06
  • 利用JavaScript编写一个简单的1024小游戏

    利用JavaScript编写一个简单的1024小游戏

    在每年的10月24日,我们都会庆祝程序员节,这是一个向所有辛勤工作、创造出无数令人惊叹应用和系统的程序员们致敬的日子,为了纪念这个特殊的日子,我们将通过编写一个简单的1024小游戏来向所有程序员们表示敬意,本文将详细解释如何使用JavaScript编写这个小游戏
    2023-10-10
  • ant design中实现table的表格行的拖拽

    ant design中实现table的表格行的拖拽

    这篇文章主要介绍了ant design中实现table的表格行的拖拽,文章围绕table表格行拖拽实现的相关资料展开详细的代码内容,具有一定的参考价值,需要的小伙伴可以参考一下
    2022-03-03

最新评论