本文主要是介绍微信小程序获取验证码30s倒计时，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
页面效果
wxml页面代码
<view class='verificationCode'><view class='verificationText'>验证码</view><input class="userName" type="number" placeholder="请输入短信验证码" class='verificationInput'/><view class='getVerification' bindtap="getVerification" wx:if='{{!verificationCodeButton}}'>{{verificationText}}</view><view class='getVerifications' wx:if='{{verificationCodeButton}}'>已发送{{count}}s</view>
</view>css页面代码
.verificationCode {height: 126rpx;width: 686rpx;background-color: #fff;border-radius: 20rpx;display: flex;flex-direction: row;margin-top: 32rpx;align-items: center;
}
.verificationText {padding: 0 40rpx;
}
.getVerification,
.getVerifications {padding: 24rpx;border-radius: 16rpx;background: #0099FF;margin-right: 24rpx;font-size: 24rpx;color: #FFFFFF;
}
.getVerifications {background: #9ED4F9;
}
.verificationInput {flex: 1;
}js页面代码
Page({data: {verificationCode: null,count: 30,verificationText: '获取验证码',},/*** 30s倒计时*/countDown() {const that = this;const { count } = that.data;if (count == 0) {that.setData({count: 60,verificationCodeButton: false,verificationText: '重新发送'});clearTimeout(time);return;}const time = setTimeout(function () {that.setData({count: count - 1,});that.countDown();}, 1000);},
})
这篇关于微信小程序获取验证码30s倒计时的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
