小程序?qū)崿F(xiàn)簡單驗證碼倒計時

更新時間：2022年07月28日 08:39:07 作者：久伍伍

這篇文章主要為大家詳細(xì)介紹了小程序?qū)崿F(xiàn)簡單驗證碼倒計時，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本篇文章主要講關(guān)于小程序驗證碼倒計時的功能實現(xiàn)，供大家參考，具體內(nèi)容如下

首先是wxml部分

<form bindsubmit="regist">
? ? <view class="vip-title">驗證碼</view>
? ? ? <input type="text" name="verifyCode" placeholder="驗證碼" value="{{verifyCode}}" style="width:310rpx" />
? ? ? <button class="captcha" bindtap="captcha" disabled="{{captchaDisabled}}" plain="true" disabled-class="disabled">{{captchaLabel}}</button>
? ? </view>
?</form>

樣式部分：

/*提交按鈕*/
form button {
? ? margin: 30rpx;
? ? background: #09f;
? ? color: white;
}

/*文本框容器*/
.input-container {
? ? margin: 40rpx 60rpx;
? ? display: flex;
? ? flex-direction: row;
? ? justify-content: space-between;
? ? align-items: center;
? ? border-bottom: 1px solid #ddd;
? ? padding-bottom: 6rpx;
}

/*文本框本身*/
.input-container input {
? ? color: #999;
? ? flex: 1;
? ? height: 40px;

}

/*占位符樣式*/
.input-placeholder {
? ? color: #999;
}

/*清空按鈕*/
.input-container image {
? ? width: 22px;
? ? height: 22px;
}

.forgot {
? ? margin: 0 30rpx 40rpx 30rpx;
? ? text-align: right;
? ? font-size: 28rpx;
? ? color: #ccc;
}
.captcha {
? ? margin: 0 8rpx;
? ? color: #fff;
? ? fon-size: 25rpx;
? p t-a
.button[plain] {
? ? color: #09f;

JS部分：

var timer = require('../../utils/timer.js');
Page({
? ? data: {
? ? ? ? verifyCode: '', //6617
? ? ? ? captchaLabel: '獲取驗證碼',
? ? ? ? seconds: timer.length,
? ? ? ? captchaDisabled: false
? ? },
? ? onLoad: function() {

? ? },
? ? captcha: function(e) {
? ? ? ? var param = {
? ? ? ? ? ? phone: this.data.phone
? ? ? ? };
? ? ? ? // 禁用按鈕點擊
? ? ? ? this.setData({
? ? ? ? ? ? captchaDisabled: true
? ? ? ? });
? ? ? ? // 立刻顯示重發(fā)提示，不必等待倒計時啟動
? ? ? ? this.setData({
? ? ? ? ? ? captchaLabel: timer.length + '秒后重新發(fā)送'
? ? ? ? });
? ? ? ? // 啟動以1s為步長的倒計時
? ? ? ? var interval = setInterval(() => {
? ? ? ? ? ? timer.countdown(this);
? ? ? ? }, 1000);
? ? ? ? // 停止倒計時
? ? ? ? setTimeout(function() {
? ? ? ? ? ? clearInterval(interval);
? ? ? ? }, timer.length * 1000);

? ? ? ? if (this.data.seconds == timer.length) {
? ? ? ? ? ? console.log('post');
? ? ? ? ? ? wx.showToast({
? ? ? ? ? ? ? ? title: '發(fā)送成功'
? ? ? ? ? ? });
? ? ? ? }
? ? },

})

timer.js :

var length = 5;

function countdown(that) {
? ? console.log('count down');
? ? var seconds = that.data.seconds;
? ? console.log(seconds);
? ? var captchaLabel = that.data.captchaLabel;
? ? if (seconds <= 1) {
? ? ? ? captchaLabel = '獲取驗證碼';
? ? ? ? seconds = length;
? ? ? ? that.setData({
? ? ? ? ? ? captchaDisabled: false
? ? ? ? });
? ? } else {
? ? ? ? captchaLabel = --seconds + '秒后重新發(fā)送'
? ? }
? ? that.setData({
? ? ? ? seconds: seconds,
? ? ? ? captchaLabel: captchaLabel
? ? });
}

module.exports = {
? ? countdown: countdown,
? ? length: length
}

以上就是獲取驗證碼功能的實現(xiàn)。

希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: