微信小程序倒計時(shí)功能 - 新聞資訊 - 雲南小程序開發|雲南軟件開發|雲南網站建設-昆明融晨信息技術有限公司

159-8711-8523

雲南網建設/小程序開發/軟件開發

知識

不(bù)管是(shì)網站,軟件還是(shì)小程序,都要(yào / yāo)直接或間接能爲(wéi / wèi)您産生價值,我們在(zài)追求其視覺表現的(de)同時(shí),更側重于(yú)功能的(de)便捷,營銷的(de)便利,運營的(de)高效,讓網站成爲(wéi / wèi)營銷工具,讓軟件能切實提升企業内部管理水平和(hé / huò)效率。優秀的(de)程序爲(wéi / wèi)後期升級提供便捷的(de)支持!

您當前位置>首頁 » 新聞資訊 » 小程序相關 >

微信小程序倒計時(shí)功能

發表時(shí)間:2022-9-6

發布人(rén):融晨科技

浏覽次數:439

倒計時(shí)功能是(shì)一個(gè)比較常見的(de)功能,比如用戶獲取驗證碼就(jiù)需要(yào / yāo)用到(dào)。這(zhè)裏記錄一下在(zài)微信小程序裏面倒計時(shí)功能的(de)簡單實現

直接看看代碼吧

  1. //倒計時(shí)60秒
  2. function countDown(that,count) {
  3. if (count == 0) {
  4. that.setData({
  5. timeCountDownTop: '獲取驗證碼',
  6. counting:false
  7. })
  8. return;
  9. }
  10. that.setData({
  11. counting:true,
  12. timeCountDownTop: count + '秒後重新獲取',
  13. })
  14. setTimeout(function(){
  15. count--;
  16. countDown(that, count);
  17. }, 1000);
  18. }

在(zài)需要(yào / yāo)倒計時(shí)的(de)地(dì / de)方調用

  1. Page({
  2. data:{
  3. counting:false
  4. },
  5. //生成驗證碼
  6. generateVerifyCode:function() {
  7. var that = this;
  8. if (!that.data.counting) {
  9. wx.showToast({
  10. title: '驗證碼已發送',
  11. })
  12. //開始倒計時(shí)60秒
  13. countDown(that, 60);
  14. }
  15. },
  16. })

下面簡單介紹下功能的(de)實現

首先倒計時(shí)的(de)方法是(shì)寫在(zài)Page的(de)外面,這(zhè)個(gè)别搞錯了(le/liǎo) 
實現倒計時(shí)關鍵的(de)地(dì / de)方在(zài)于(yú)setTimeout方法,也(yě)即下面這(zhè)段代碼。setTimeout方法可以(yǐ)設置在(zài)指定的(de)時(shí)間間隔執行某個(gè)函數。應用的(de)格式是(shì)setTimeout(function(),time),function就(jiù)是(shì)對應要(yào / yāo)執行的(de)方法,time就(jiù)是(shì)時(shí)間間隔,這(zhè)裏的(de)1000表示1000毫秒,也(yě)就(jiù)是(shì)間隔1秒執行一次countDown方法。

  1. setTimeout(function(){
  2. count--;
  3. countDown(that, count);
  4. }, 1000);

countDown方法中利用count字段來(lái)設置倒計時(shí)的(de)時(shí)間,比如這(zhè)裏是(shì)60秒 
countDown方法中把that也(yě)傳遞進去是(shì)爲(wéi / wèi)了(le/liǎo)在(zài)倒計時(shí)狀态改變時(shí)利用setData方法更新頁面 
countDown方法中利用counting字段來(lái)判斷是(shì)否已經在(zài)倒計時(shí)了(le/liǎo),避免重複開始倒計時(shí)

倒計時(shí)結束是(shì)通過count來(lái)判斷,通過return直接退出(chū) 
以(yǐ)上(shàng)就(jiù)是(shì)微信小程序裏面倒計時(shí)功能的(de)簡單實現啦,希望對大(dà)家有用!


相關案例查看更多