本文实例为大家分享了小程序获取手机验证码倒计时的具体代码，供大家参考，具体内容如下
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 () {
},
})
