前端验证码倒计时如何实现

最新推荐文章于 2024-08-05 07:15:52 发布

小先生编程

最新推荐文章于 2024-08-05 07:15:52 发布

阅读量761

点赞数

文章标签：前端 vue.js javascript

本文链接：https://blog.csdn.net/weixin_43865196/article/details/123228706

版权

这篇博客详细介绍了如何使用JavaScript实现网页中获取验证码的按钮点击后启动倒计时功能，用户需等待1分钟才能再次点击。代码示例中包含了一个`settime`函数，用于更新按钮状态和显示剩余时间，确保用户在规定时间内无法连续获取验证码，增加了用户验证的安全性。

摘要由CSDN通过智能技术生成

点击获取后，需等待1分钟方可再次点击该按钮

<button id="numbtn">获取验证码</button>

var countdown = 60;
$('#numbtn').on('click',function(){
	var obj = $("#numbtn");
	settime(obj);
})
function settime(obj) { //发送验证码倒计时
	if (countdown == 0) {
		obj.attr('disabled', false);
		//obj.removeattr("disabled");
		obj.html("免费获取验证码");
		countdown = 60;
		return;
	} else {
		obj.attr('disabled', true);
		obj.html("重新发送(" + countdown + ")");
		countdown--;
	}
	setTimeout(function () {
		settime(obj)
	}
	, 1000)
}