微信開發現在越來越火,倒數功能是一個比較常見的功能,例如用戶取得驗證碼就需要用到。倒數計時功能在專案開發中常會用到,今天小編跟大家介紹下微信小程式倒數功能實現程式碼,需要的朋友參考下吧,希望能幫助大家。
直接看看程式碼吧
//倒计时60秒 function countDown(that,count) { if (count == 0) { that.setData({ timeCountDownTop: '获取验证码', counting:false }) return; } that.setData({ counting:true, timeCountDownTop: count + '秒后重新获取', }) setTimeout(function(){ count--; countDown(that, count); }, 1000); }
在需要倒數的地方呼叫
Page({ data:{ counting:false }, //生成验证码 generateVerifyCode:function() { var that = this; if (!that.data.counting) { wx.showToast({ title: '验证码已发送', }) //开始倒计时60秒 countDown(that, 60); } }, })
下面簡單介紹下功能的實作
首先倒數計時的方法是寫在Page的外面,這個別搞錯了
實作倒數關鍵的地方在於setTimeout方法,也也就是下面這段程式碼。 setTimeout方法可以設定在指定的時間間隔執行某個函數。應用的格式是setTimeout(function(),time),function就是對應要執行的方法,time就是時間間隔,這裡的1000表示1000毫秒,也就是間隔1秒執行一次countDown方法。
setTimeout(function(){ count--; countDown(that, count); }, 1000);
countDown方法中利用count字段來設定倒數計時的時間,例如這裡是60秒
countDown方法中把that也傳遞進去是為了在倒數狀態改變時利用setData方法更新頁面
countDown方法中利用counting欄位來判斷是否已經在倒數計時了,避免重複開始倒數
#倒數結束是透過count來判斷,透過return直接退出
相關推薦:
以上是實例講解微信小程式倒數功能的詳細內容。更多資訊請關注PHP中文網其他相關文章!