相信大家再做小程序的时候大部分都会碰到获取验证码功能
比如说手机号登陆获取验证码
一定时间之内不能重复点击
案例下载地址
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})},
