微信小程序倒計(jì)時(shí)功能實(shí)現(xiàn)代碼
倒計(jì)時(shí)功能是一個(gè)比較常見(jiàn)的功能，比如用戶獲取驗(yàn)證碼就需要用到。這里記錄一下在微信小程序里面倒計(jì)時(shí)功能的簡(jiǎn)單實(shí)現(xiàn)。
直接看看代碼吧
//倒計(jì)時(shí)60秒
function countDown(that,count) {
if (count == 0) {
that.setData({
timeCountDownTop: '獲取驗(yàn)證碼',
counting:false
})
return;
}
that.setData({
counting:true,
timeCountDownTop: count + '秒后重新獲取',
})
setTimeout(function(){
count--;
countDown(that, count);
}, 1000);
}
在需要倒計(jì)時(shí)的地方調(diào)用
Page({
data:{
counting:false
},
//生成驗(yàn)證碼
generateVerifyCode:function() {
var that = this;
if (!that.data.counting) {
wx.showToast({
title: '驗(yàn)證碼已發(fā)送',
})
//開始倒計(jì)時(shí)60秒
countDown(that, 60);
}
},
})
下面簡(jiǎn)單介紹下功能的實(shí)現(xiàn)
首先倒計(jì)時(shí)的方法是寫在Page的外面，這個(gè)別搞錯(cuò)了
實(shí)現(xiàn)倒計(jì)時(shí)關(guān)鍵的地方在于setTimeout方法，也即下面這段代碼。setTimeout方法可以設(shè)置在指定的時(shí)間間隔執(zhí)行某個(gè)函數(shù)。應(yīng)用的格式是setTimeout(function(),time),function就是對(duì)應(yīng)要執(zhí)行的方法，time就是時(shí)間間隔，這里的1000表示1000毫秒，也就是間隔1秒執(zhí)行一次countDown方法。
setTimeout(function(){
count--;
countDown(that, count);
}, 1000);
- countDown方法中利用count字段來(lái)設(shè)置倒計(jì)時(shí)的時(shí)間，比如這里是60秒
- countDown方法中把that也傳遞進(jìn)去是為了在倒計(jì)時(shí)狀態(tài)改變時(shí)利用setData方法更新頁(yè)面
- countDown方法中利用counting字段來(lái)判斷是否已經(jīng)在倒計(jì)時(shí)了，避免重復(fù)開始倒計(jì)時(shí)
倒計(jì)時(shí)結(jié)束是通過(guò)count來(lái)判斷，通過(guò)return直接退出
總結(jié)
以上所述是小編給大家介紹的微信小程序倒計(jì)時(shí)功能實(shí)現(xiàn)代碼，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
相關(guān)文章
這篇文章主要給大家介紹了關(guān)于微信小程序阻止小程序返回的兩種方法,分別是通過(guò)wx.enableAlertBeforeUnload和page-container,兩種方法都給出了詳細(xì)的實(shí)例,需要的朋友可以參考下2023-04-04
微信小程序使用radio顯示單選項(xiàng)功能【附源碼下載】
這篇文章主要介紹了微信小程序使用radio顯示單選項(xiàng)功能,涉及針對(duì)radio組件事件響應(yīng)相關(guān)操作技巧,并附帶源碼供讀者下載參考,需要的朋友可以參考下2017-12-12
這篇文章主要介紹了JS模板編譯的實(shí)現(xiàn)詳情，編譯是一種格式變成另一種格式的過(guò)程。編譯會(huì)導(dǎo)致好的結(jié)果，比如書寫簡(jiǎn)單的代碼，編譯出來(lái)復(fù)雜的代碼；或者提高代碼的使用性能2022-07-07
詳解cesium實(shí)現(xiàn)大批量POI點(diǎn)位聚合渲染優(yōu)化方案
這篇文章主要為大家介紹了cesium實(shí)現(xiàn)大批量POI點(diǎn)位聚合渲染優(yōu)化方案詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-05-05
JavaScript遞歸函數(shù)定義與用法實(shí)例分析
這篇文章主要介紹了JavaScript遞歸函數(shù)定義與用法,結(jié)合實(shí)例形式分析了javascript遞歸的原理、函數(shù)定義、使用方法及操作注意事項(xiàng),需要的朋友可以參考下2019-01-01
這篇文章主要介紹了微信小程序收藏功能的實(shí)現(xiàn)代碼,基本功能是點(diǎn)擊收藏后顯示已收藏，在另一個(gè)頁(yè)面出現(xiàn)目前點(diǎn)擊收藏的項(xiàng)目。需要的朋友可以參考下2018-06-06
這篇文章主要介紹了10大Js圖像處理庫(kù)，對(duì)圖像處理感興趣的同學(xué)，可以參考下2021-04-04
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)彈框效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-03-03
JS 實(shí)現(xiàn)列表與多選框選擇附預(yù)覽動(dòng)畫
本節(jié)為大家介紹的是用JS實(shí)現(xiàn)列表與多選框選擇，并附gif演示動(dòng)畫，這個(gè)例子很詳細(xì)，大家可以看看2014-10-10
layui監(jiān)聽(tīng)單元格編輯前后交互的例子
今天小編就為大家分享一篇layui監(jiān)聽(tīng)單元格編輯前后交互的例子，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-09-09