小程序?qū)崿F(xiàn)計時器功能

更新時間：2022年07月17日 09:06:38 作者：今天星期八

這篇文章主要為大家詳細介紹了小程序?qū)崿F(xiàn)計時器功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了小程序?qū)崿F(xiàn)計時器功能的具體代碼，供大家參考，具體內(nèi)容如下

效果圖如下

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

注意的點： 在點擊啟動定時器按鈕時，多次連著點擊，會累加定時器，會造成定時器加速的效果，為了避免這種情況，應(yīng)該在每次點擊開始前先清除一下定時器。

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: