微信小程序倒計時功能實現(xiàn)代碼
更新時間：2017年11月09日 10:20:29 作者：xxq2dream
倒計時功能在項目開發(fā)中經(jīng)常會用到，今天小編給大家介紹下微信小程序倒計時功能實現(xiàn)代碼，需要的朋友參考下吧
倒計時功能是一個比較常見的功能，比如用戶獲取驗證碼就需要用到。這里記錄一下在微信小程序里面倒計時功能的簡單實現(xiàn)。
直接看看代碼吧
//倒計時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: '驗證碼已發(fā)送',
})
//開始倒計時60秒
countDown(that, 60);
}
},
})
下面簡單介紹下功能的實現(xiàn)
首先倒計時的方法是寫在Page的外面，這個別搞錯了
實現(xiàn)倒計時關鍵的地方在于setTimeout方法，也即下面這段代碼。setTimeout方法可以設置在指定的時間間隔執(zhí)行某個函數(shù)。應用的格式是setTimeout(function(),time),function就是對應要執(zhí)行的方法，time就是時間間隔，這里的1000表示1000毫秒，也就是間隔1秒執(zhí)行一次countDown方法。
setTimeout(function(){
count--;
countDown(that, count);
}, 1000);
- countDown方法中利用count字段來設置倒計時的時間，比如這里是60秒
- countDown方法中把that也傳遞進去是為了在倒計時狀態(tài)改變時利用setData方法更新頁面
- countDown方法中利用counting字段來判斷是否已經(jīng)在倒計時了，避免重復開始倒計時
倒計時結束是通過count來判斷，通過return直接退出
總結
以上所述是小編給大家介紹的微信小程序倒計時功能實現(xiàn)代碼，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
相關文章
這篇文章主要介紹了微信小程序的運行機制與安全機制解決方案，接觸小程序有一段時間了，總得來說小程序開發(fā)門檻比較低，但其中基本的運行機制和原理還是要懂的2023-02-02
這篇文章主要介紹了Typescrip異步函數(shù)Promise使用方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
js遍歷、動態(tài)的添加數(shù)據(jù)的小例子
js遍歷、動態(tài)的添加數(shù)據(jù)的小例子，需要的朋友可以參考一下2013-06-06
Javascript 阻止javascript事件冒泡，獲取控件ID值
Javascript學習日記-阻止javascript事件冒泡，獲取控件ID值2009-06-06
JS實現(xiàn)表單多文件上傳樣式美化支持選中文件后刪除相關項
在項目開發(fā)中我們經(jīng)常遇到文件上傳的功能，根據(jù)需求有多文件上傳和單文件上傳，今天小編給大家實例講解下表單多文件上傳樣式美化支持選中文件后刪除相關項，非常不錯，感興趣的朋友一起看看吧2016-09-09
這篇文章主要為大家詳細介紹了基于bootstrap風格的彈框插件，適用于確認框、提示框，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-12-12
Extjs4中tree的拖拽功能(可以兩棵樹之間拖拽) 簡單實例
這篇文章主要介紹了Extjs4中tree的拖拽功能簡單實例，有需要的朋友可以參考一下2013-12-12
本文主要介紹了使用js獲取隱藏元素寬高的解決方案以及代碼思路，具有很好的參考價值，下面跟著小編一起來看下吧2017-02-02
這篇文章主要介紹了在微信小程序里使用watch和computed的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-08-08
下面小編就為大家?guī)硪黄远x事件解決重復請求BUG的問題。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-07-07