小程序实现计时器小功能
更新时间: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 }) } });
注意的点: 在点击启动定时器按钮时,多次连着点击,会累加定时器,会造成定时器加速的效果,为了避免这种情况,应该在每次点击开始前先清除一下定时器。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
相关文章
ES5 模拟 ES6 的 Symbol 实现私有成员功能示例
这篇文章主要介绍了ES5 模拟 ES6 的 Symbol 实现私有成员功能,结合实例形式分析了ES5 模拟 ES6 的 Symbol 实现私有成员功能相关原理、实现方法与操作注意事项,需要的朋友可以参考下2020-05-05layui 实现自动选择radio单选框(checked)的方法
今天小编就为大家分享一篇layui 实现自动选择radio单选框(checked)的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧2019-09-09JavaScript使用ActiveXObject访问Access和SQL Server数据库
这篇文章主要介绍了JavaScript使用ActiveXObject访问Access和SQL Server数据库,本文分别给出相应操作代码,需要的朋友可以参考下2015-04-04
最新评论