小程序实现简单验证码倒计时
本篇文章主要讲关于小程序验证码倒计时的功能实现，供大家参考，具体内容如下
首先是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
}
以上就是获取验证码功能的实现。
希望对大家的学习有所帮助，也希望大家多多支持软件开发网。
