今天就跟大家聊聊有关使用uni-app如何实现获取验证码倒计时功能，可能很多人都不太了解，为了让大家更加了解，小编给大家总结了以下内容，希望大家根据这篇文章可以有所收获。
页面部分是一个三目运算，codeTime是倒计时的时间。
计算
安全
数据库
网络和加速
企业服务
<template>
<view>
<view class="three">
<view class="get" @tap="getCheckNum()">
<text>{{!codeTime?'获取验证码':codeTime+'s'}}</text>
</view>
<view class="all">
<view class="left">验证码</view>
<input v-model="mydata.checkNum" placeholder="请输入验证码"/>
</view>
<button class="btn" @tap='sure'>确认</button>
</view>
</view>
</template>具体思路：
三目运算，判断codeTime的值，当为0的时候显示文字“获取验证码”，大于0的时候显示验证码的倒计时。codeTime默认为0.
这里有个问题就是，怎么阻止用户在倒计时还没结束的时候一直点击，影响倒计时。
解决办法是写个判断，当codeTime大于60的时候，弹窗提示用户不能重复获取验证码。当倒计时运行完了之后要清除倒计时。
代码：
<script>
export default {
data() {
return {
codeTime:0,
}
},
methods: {
getCheckNum(){
if(this.codeTime>0){
uni.showToast({
title: '不能重复获取',
icon:"none"
});
return;
}else{
this.codeTime = 60
let 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如何实现获取验证码倒计时功能有进一步的了解吗？如果还想了解更多知识或者相关内容，请关注亿速云行业资讯频道，感谢大家的支持。
亿速云「云服务器」，即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘，价格低至29元/月。点击查看>>
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
