微信小程序獲取驗(yàn)證碼60秒倒計(jì)時(shí)功能怎么實(shí)現(xiàn)

這篇文章主要講解了“微信小程序獲取驗(yàn)證碼60秒倒計(jì)時(shí)功能怎么實(shí)現(xiàn)”，文中的講解內(nèi)容簡(jiǎn)單清晰，易于學(xué)習(xí)與理解，下面請(qǐng)大家跟著小編的思路慢慢深入，一起來(lái)研究和學(xué)習(xí)“微信小程序獲取驗(yàn)證碼60秒倒計(jì)時(shí)功能怎么實(shí)現(xiàn)”吧！

效果圖

index.wxml

     <view class="Info">
            <view class="Num">
                <view>6位數(shù)字驗(yàn)證碼</view>
                <view class="verification_time">
                    <button bindtap='MosendSms' disabled='{{MoDisabled}}' class="Box_hid" style='color:{{MoColor}}' type="button">{{MoCodeMsg}}</button>
                </view>
            </view>
            <view class='verification'>
                <block wx:for="{{Length}}" wx:key="item">
                    <input class='frame' value="{{Showboxval.length>=index+1?Showboxval[index]:''}}" disabled catchtap='InputTap' />
                </block>
            </view>
            <view class="error" wx:if="{{error}}">驗(yàn)證碼輸入錯(cuò)誤</view>
            <input name="password" password="{{true}}" class='ipt' maxlength="{{Length}}" focus="{{isFocus}}" bindinput="FocuInput" />
      </view>

index.js

           data: {
                code: "", //后端驗(yàn)證碼
                Jurisdiction: true, //是否有權(quán)限
                error: false, //錯(cuò)誤提示
                Length: 6, //輸入框個(gè)數(shù)
                isFocus: true, //聚焦
                Showboxval: "", //輸入的內(nèi)容
                MoDisabled: false, //驗(yàn)證碼是否可點(diǎn)擊
                MoCodeMsg: '獲取驗(yàn)證碼', //文案
                MoMsgWait: 60, //時(shí)間秒
                MoColor: 'rgba(40, 200, 122, 1)', //默認(rèn)驗(yàn)證碼字體顏色
            },

             /**
             * 生命周期函數(shù)--監(jiān)聽(tīng)頁(yè)面加載 正常第一次進(jìn)來(lái)先調(diào)用一次
             */
            onLoad(options) {
               this.MosendSms() // 60秒后重新獲取驗(yàn)證碼
            },

// 60秒后驗(yàn)證碼
            sendSbinms() {
                wx.showToast({
                    title: '短信驗(yàn)證碼發(fā)送成功，請(qǐng)注意查收',
                    icon: 'none'
                })
                this.setData({
                    MoCodeMsg: this.data.MoMsgWait + "  s",
                    MoColor: 'rgba(40, 200, 122, 1)',
                    MoMsgWait: this.data.MoMsgWait - 1,
                    MoDisabled: true
                });
                let inter = setInterval(function () {
                    this.setData({
                        MoCodeMsg: this.data.MoMsgWait + "  s",
                        MoColor: 'rgba(40, 200, 122, 1)',
                        MoMsgWait: this.data.MoMsgWait - 1,
                        MoDisabled: true
                    });
                    if (this.data.MoMsgWait < 0) {
                        clearInterval(inter)
                        this.setData({
                            MoCodeMsg: "重新獲取",
                            MoMsgWait: 60,
                            MoDisabled: false,
                            MoColor: 'rgba(40, 200, 122, 1)'
                        });
                    }
                    //注意后面的bind綁定，最關(guān)鍵。不然又是未定義，無(wú)法使用外圍的變量;
                }.bind(this), 1000);
            },

            // 點(diǎn)擊獲取驗(yàn)證碼
            MosendSms() {
               if (this.data.Jurisdiction) {
                   this.sendSbinms() // 60秒后重新獲取驗(yàn)證碼
                   this.obtain();  //后端接口 獲取驗(yàn)證碼
               } else {
                   wx.showToast({
                      title: this.data.massage ? this.data.massage : '手機(jī)號(hào)未注冊(cè)',
                       icon: 'error',
                       duration: 3000
                   })
               }
             },

             obtain() {
                    let params = {
                        phone: this.data.rstProduct,
                        type: 1
                    }
                    appletValidateCode(params).then((res) => {
                        this.setData({
                            code: res.data.data,
                        });
                    }).catch((res) => {})
                },

     //驗(yàn)證碼輸入框
        FocuInput(e) {
            let that = this;
            let inputValue = e.detail.value;
            that.setData({
                Showboxval: inputValue,
            })
            if (inputValue.length === 6) {
                if (inputValue == this.data.code) {
                    this.setData({
                        error: false,
                    });
                } else {
                    this.setData({
                        error: true,
                    });
                }
            }
        },

   //驗(yàn)證碼輸入框點(diǎn)擊
    InputTap() {
        let that = this;
        that.setData({
            isFocus: true,
        })
    },

index.wxss

.Info {
    padding: 138rpx 32rpx 0 32rpx;
}

.verification {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 30rpx;
    font-size: 32rpx;
}

.Num {
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: rgba(0, 0, 0, 0.65);
    font-size: 30rpx;
    font-family: PingFang SC-Regular, PingFang SC;
    font-weight: 400;
}

.frame {
    width: 80rpx;
    height: 80rpx;
    border-radius: 2px;
    border: 2rpx solid #DEDEDE;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    font-size: 32rpx;
    font-family: PingFang SC-Medium, PingFang SC;
    font-weight: 500;
    color: rgba(0, 0, 0, 0.65);
}

.ipt {
    width: 0;
    height: 0;
}

.Box_hid {
    font-size: 30rpx;
    background: #fff !important;
    text-align: left;
    color: rgba(40, 200, 122, 1) !important;
    padding-right: 0 !important;
    font-family: PingFang SC-Regular, PingFang SC;
    font-weight: 400 !important;
}

.Box_hid::after {
    border: none;
}

.error {
    color: #F24236;
    margin-top: 8rpx;
    font-size: 28rpx;
    font-family: PingFang SC-Regular, PingFang SC;
    font-weight: 400;
}

感謝各位的閱讀，以上就是“微信小程序獲取驗(yàn)證碼60秒倒計(jì)時(shí)功能怎么實(shí)現(xiàn)”的內(nèi)容了，經(jīng)過(guò)本文的學(xué)習(xí)后，相信大家對(duì)微信小程序獲取驗(yàn)證碼60秒倒計(jì)時(shí)功能怎么實(shí)現(xiàn)這一問(wèn)題有了更深刻的體會(huì)，具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是億速云，小編將為大家推送更多相關(guān)知識(shí)點(diǎn)的文章，歡迎關(guān)注！