uni-app实现获取验证码倒计时功能 uni-app实现获取验证码倒计时功

本文实例为大家分享了uni-app实现获取验证码倒计时的具体代码，供大家参考，具体内容如下
实现的效果

文章图片

文章图片

文章图片

页面部分是一个三目运算，codeTime是倒计时的时间。

具体思路：
三目运算，判断codeTime的值，当为0的时候显示文字“获取验证码”，大于0的时候显示验证码的倒计时。codeTime默认为0.
这里有个问题就是，怎么阻止用户在倒计时还没结束的时候一直点击，影响倒计时。
解决办法是写个判断，当codeTime大于60的时候，弹窗提示用户不能重复获取验证码。当倒计时运行完了之后要清除倒计时。
代码：

export default { data() { return {codeTime:0, } },methods: {getCheckNum(){ if(this.codeTime>0){uni.showToast({title: '不能重复获取',icon:"none"}); return; }else{this.codeTime = 60let timer = setInterval(()=>{this.codeTime--; if(this.codeTime<1){clearInterval(timer); this.codeTime = 0}},1000)}}}}

css样式：

.all{ margin: 30rpx; border-bottom: 2rpx solid #EEEEEE; display: flex; flex-wrap: nowrap; }.left{ margin-bottom: 30rpx; margin-right: 40rpx; width: 150rpx; }.three{ background-color: white; width: 92%; border-radius: 10rpx; padding: 20rpx 0; margin: 20rpx auto; position: relative; }.btn{ background-color: orange; font-size: 28rpx; width: 160rpx; height: 70rpx; line-height: 70rpx; margin-top: 40rpx; color: white; font-weight: 600; }.get{ position: absolute; top: 40rpx; right: 30rpx; background-color: orange; height: 70rpx; line-height: 70rpx; color: white; border-radius: 10rpx; padding: 0 20rpx; }

【uni-app实现获取验证码倒计时功能】以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。