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

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

首先是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
}

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

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

查看更多关于小程序实现简单验证码倒计时的详细内容...