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