app前端验证码60秒倒计时（全部代码）

最新推荐文章于 2024-05-29 11:39:33 发布

java_zxhao

最新推荐文章于 2024-05-29 11:39:33 发布

阅读量445

点赞数 2

本文链接：https://blog.csdn.net/Java_zxhao/article/details/106091026

版权

本文详细介绍了一种在前端应用中实现验证码倒计时功能的方法。通过使用Vue.js框架，结合定时器和状态管理，实现了验证码请求后的倒计时重新发送机制。代码示例清晰展示了如何控制按钮显示和倒计时更新。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

直接上代码，

<view>
				<input type="text" v-model="code" value="" placeholder="请填写验证码"  />
				<button v-if="showText" type="button" @click="getCode()" >获取验证码</button>
				<button v-else  type="button" >{{second}}s重新发送</button>
</view>

data() {
				return {
					code:"",//验证码
					second:60,//默认60秒
					showText:true,//判断是否发送
				};
			},

getCode(){
					var that = this;
					var interval = setInterval(() => {
					    var times = that.second-1;
					    //that.second = times<10?'0'+times:times ;//小于10秒补 0
						that.second = times
					}, 1000)
					setTimeout(() => {
					    clearInterval(interval)
					    that.second=60
					    that.showText = true
					}, 60000);
					uni.request({
					......//此处省略
						success :function(res) {
							that.showText = false
							}
					})
				}