小程序获取手机验证码倒计时的方法
短信预约 -IT技能 免费直播动态提醒
本文实例为大家分享了小程序获取手机验证码倒计时的具体代码，供大家参考，具体内容如下
test：
.wxss
.bind_input{ width: 450rpx; height: 80rpx; padding: 0 20rpx; margin: 0 auto 20rpx auto; border-radius: 40rpx; border: #ddd solid 1px;
display: flex; justify-content: space-between; align-items: center;
}
.bind_input input{ width: 230rpx; height: 50rpx; padding-left: 30rpx;}
.bind_yzm_btn{ width: 160rpx; height: 50rpx; line-height: 50rpx; text-align: center; color: #fff; font-size: 24rpx; border-radius: 25rpx; background-color: #0FC393;}
.bind_yzm_btn.grey{ font-size: 28rpx; background-color: #ccc;}
.bind_btn{ width: 450rpx; height: 80rpx; line-height: 80rpx; margin: 40rpx auto 0 auto; text-align: center; color: #fff; font-size: 36rpx; font-weight: 300; border-radius: 40rpx; background-color: #0FC393;
box-shadow:0px 10px 20px rgba(0,182,142,0.4);
}.wxml
<view class="bind_input">
<input type="tel" value="{{mobile}}" bindinput="setMobile" placeholder="输入手机号" maxlength="11" placeholder-style="color:#ccc;" />
</view>
<view class="bind_input">
<input type="tel" value="{[code]}" bindinput="setCode" placeholder="短信验证码" maxlength="4" placeholder-style="color:#ccc;" />
<text wx:if="{{ifTimeIn}}" class="bind_yzm_btn grey">{{timeCur}}</text>
<text wx:else bindtap="getMobileVerify" class="bind_yzm_btn">获取验证码</text>
</view>
<view bindtap="bindDo" class="bind_btn">确定</view>.js
Page({
data: {
mobile:'',
code:'',
// 倒计时参数
timeStart:60, //倒计时初始值
timeCur:null, //当前倒计时显示值
timer:null,
ifTimeIn:false, //是否倒计时中
ifSendMobileVerify:false, //是否发送成功验证码
},
// 设置用户输入的手机号
setMobile(e){
// console.log(e.detail.value);
this.setData({
mobile : e.detail.value.replace(/\s+/g,"")
});
},
// 设置用户输入的验证码
setCode(e){
// console.log(e.detail.value);
this.setData({
code : e.detail.value.replace(/\s+/g,"")
});
},
// 倒计时
setTime(){
let timeCur = this.data.timeCur - 1;
// console.log(timeCur);
if(timeCur < 0){
clearInterval(this.data.timer);
this.setData({
ifTimeIn:false
});
return false;
}
this.setData({
timeCur : timeCur
});
},
// 获取验证码
getMobileVerify(){
if(!this.data.mobile){
wx.showModal({
title: '友情提示',
content: '请输入手机号',
showCancel: false,
});
return false
}
if(!/^1\d{10}$/.test(this.data.mobile)){
wx.showModal({
title: '友情提示',
content: '请输入正确的手机号',
showCancel: false,
});
return false;
}
wx.showLoading({
title: "发送中",
mask: true
});
let dataJson = {
mobile : this.data.mobile,
};
// 执行倒计时
this.setData({
timeCur : this.data.timeStart,
timer : setInterval(this.setTime,1000),
ifTimeIn : true,
ifSendMobileVerify : true
});
wx.hideLoading();
},
// 确定提交
bindDo(){
if(!this.data.ifSendMobileVerify){
wx.showModal({
title: '友情提示',
content: '请确定您的手机收到验证码再操作',
showCancel: false,
});
return false;
}
if(!this.data.code){
wx.showModal({
title: '友情提示',
content: '请输入验证码',
showCancel: false,
});
return false;
}
wx.showToast({
title: '成功',
icon: 'success',
mask: true,
duration: 1500
});
},
onShow: function () {
},
})以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程网。
免责声明：
① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的，并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据，供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。
② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
