小程序获取手机验证码倒计时的方法
本文实例为大家分享了小程序获取手机验证码倒计时的具体代码,供大家参考,具体内容如下
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 () { }, })
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。
赞 (0)