小程序实现计时器小功能

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

效果图如下

布局（.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:'0',
? ? 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:'0'
? ? })
? },
? 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
? ? })
? }
});

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

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

查看更多关于小程序实现计时器小功能的详细内容...