首页 > 技术文章 > 微信小程序倒计时,小程序60秒倒计时,小程序倒计时防止重复点击

yequxue 2020-07-31 10:27 原文

相信大家再做小程序的时候大部分都会碰到获取验证码功能
比如说手机号登陆获取验证码
一定时间之内不能重复点击

 

html部分
<
view class="signIn"> <view class="mainBody"> <view class="title">手机号登录</view> <view class="weui-input"> <input bindinput="adminNameInput" type="number" name="adminInput" value="{{adminInput}}" placeholder="请输入手机号码"/> </view> <view class="weui-input"> <input bindinput="codeInput" maxlength="4" name="codeInput" value="{{codeInput}}" placeholder="请输入验证码"/> <button bindtap="sendCode" disabled="{{smsFlag}}" class="countDown">{{sendTime}}</button> </view> <view class="botMain"> <view bindtap='noBtn'>退出</view> <view bindtap='okBtn'>登录</view> </view> </view> </view>
css部分
.signIn
{ position: fixed; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,.6); text-align: center; display: flex; justify-content: center; align-items: center; } .signIn .mainBody{ background-color: #fff; width: 82%; margin: 0 auto; border-radius: 20rpx; } .signIn .botMain{ display: flex; text-align: center; margin-top: 40rpx; } .signIn .botMain view{ flex: 1; height: 90rpx; line-height: 90rpx; background-color: #ccc; color: #fff; } .signIn .botMain view:last-child{ background-color: #0089ff; } .signIn .mainBody .title{ font-size: 40rpx; padding: 30rpx 0; } .signIn .mainBody .weui-input{ border: 1rpx solid #ccc; text-align: left; width: 70%; margin: 0 auto 20rpx; border-radius: 16rpx; height: 80rpx; line-height: 80rpx; padding: 0 30rpx; position: relative; } .signIn .mainBody .weui-input input{ width: 100%; height: 100%; font-size: 28rpx; } .signIn .mainBody .weui-input .countDown{ position: absolute; right: 0; top: 0; width: 200rpx; height: 77rpx; line-height: 77rpx; font-size: 26rpx; border: 0; border-radius: 16rpx; z-index: 11; background-color: #eee; } .signIn .mainBody .weui-input .countDown::after{ border: 0; }
js部分
data: { adminInput:
'', sendTime: '', codeInput: '', sendTime: '获取验证码', sendColor: '#363636', snsMsgWait: 60, }, onLoad: function () { }, adminNameInput (e) { this.setData({ adminInput: e.detail.value }) }, sendCode: function() { console.log('获取验证码事件') let myreg=/^[1][3,4,5,7,8][0-9]{9}$/ if(this.data.adminInput == "") { console.log('手机号不能为空') } else if(this.data.adminInput !== "" && myreg.test(this.data.adminInput) == false ) { console.log('请输入正确的手机号码') } else { console.log('成功') var inter = setInterval(function() { this.setData({ smsFlag: true, sendTime: this.data.snsMsgWait + 's后重发', snsMsgWait: this.data.snsMsgWait - 1 }); if (this.data.snsMsgWait < 0) { clearInterval(inter) } }.bind(this), 500); } }, codeInput (e) { this.setData({ codeInput: e.detail.value }) },

 

推荐阅读