小程序实现简单验证码倒计时

小程序实现简单验证码倒计时 本篇文章主要讲关于小程序验证码倒计时的功能实现,供大家参考,具体内容如下 首先是wxml部分 form bindsubmit=regist     view class=vip-title验证码/view       input type=text name=verifyCode placeholder=验证码 value ...

本篇文章主要讲关于小程序验证码倒计时的功能实现，供大家参考，具体内容如下

首先是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
        });
        // 立刻显示重发提示，不必等待倒计时启动
        this.setData({
            captchaLabel: timer.length + '秒后重新发送'
        });
        // 启动以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: '发送成功'
            });
        }
    },

})

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 + '秒后重新发送'
    }
    that.setData({
        seconds: seconds,
        captchaLabel: captchaLabel
    });
}

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

以上就是获取验证码功能的实现。

希望对大家的学习有所帮助，也希望大家多多支持我们。