微信小程序實現簡單倒計時功能
本文實例為大傢分享瞭微信小程序實現簡單倒計時的具體代碼，供大傢參考，具體內容如下
任務描述：
計時器
任務要求：
案例描述：設計一個實現倒計時功能的小程序，小程序運行後，首先顯示空白界面，過2秒後才顯示計時界面，點擊“開始計時”按鈕後開始倒計時，點擊“停止計時”按鈕後停止計時。
實現效果：根據案例描述做出如下圖效果，初始顯示空白界面，2秒後顯示計時界面（圖1），數字為60，點擊“開始計時”按鈕後開始倒計時，點擊“停止計時”按鈕後停止計時（圖2）。
index.wxml
<!--index.wxml-->
<view class="container">
<view wx:if="{{hidden}}">
<view class="title"> 計時器</view>
<view class="play"> {{num}}</view>
<view class="btn">
<button bindtap="start"> 開始計時</button>
<button bindtap="stop">停止計時</button>
</view>
</view>
</view>
index.js
// index.js
// 獲取應用實例
var num = 60;//定義開始秒數
//定義一個佈爾變量，用於停止計時器
var ynStop=false;
Page({
data: {
//用於顯示計算器
hidden: false,
num: num
},
//渲染出計時器
onLoad() {
//function裡直接用this會出錯
var that =this
//延時顯示函數
setTimeout(function(){
//設置隱藏屬性為否
that.setData({
hidden:true
})
}
//設置延時為2s
, 2000);
},
start: function () { //開始計時函數
//設置顯示器值為當前值減一
this.setData({
num: num--
})
//調用timer函數
this.timer()
//後臺打印num值
console.log(num)
},
stop: function () { //停止函數
//將是否停止循環值定義為真
ynStop=true;
console.log(ynStop)
},
timer: function () { //計時函數
if (num > 0&&ynStop==false) {
//隔一秒回調start函數，註意setTimeout裡函數不要加括號，或者用function（）{}
setTimeout(this.start, 1000);
} else {
this.setData({
num: 0
})
}
}
})
以上就是本文的全部內容，希望對大傢的學習有所幫助，也希望大傢多多支持WalkonNet。