uni驗證碼60秒倒計時


其實要實現這個功能原理非常簡單,就是setInterval+setTimeout+clearInterval結合使用,首先在data里定義一個變量second,初始值為60,然后在setInterval里執行每秒減1的操作,setTimeout在60秒后執行clearInterval清除定時器的操作

<view v-if="showText==true" class="send" @click="getCode">發送驗證碼</view>
<view v-else class="send">{{second}}s重新發送</view>

  data() {
    return {
      second:60,
      showText:true,
    };
 },

getCode(){//倒計時
    this.showText = false
    var interval = setInterval(() => {
        let times = --this.second
        this.second = times<10?'0'+times:times //小於10秒補 0
    }, 1000)
    setTimeout(() => {
        clearInterval(interval)
        this.second=60
        this.showText = true
    }, 60000)
},    

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM