按钮被点击后屏蔽点击且倒计时60S能再次被点击

最新推荐文章于 2023-11-13 00:30:00 发布

Giser_往事随风

最新推荐文章于 2023-11-13 00:30:00 发布

阅读量1k

点赞数

CC 4.0 BY-SA版权

分类专栏：前端文章标签： jquery 验证码

本文链接：https://blog.youkuaiyun.com/KK_bluebule/article/details/81014630

前端专栏收录该内容

9 篇文章

订阅专栏

本文介绍了一种使用jQuery实现的验证码倒计时按钮功能。当用户点击按钮后，按钮会进入不可用状态并开始倒计时，在设定的时间结束后恢复为可用状态。此功能常用于网站注册或找回密码等场景。

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

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>

<input type="button" id="btn" value="免费获取验证码" />
<script>
//(我是分开写的--后面的代码我是导入的)
$(function() {
$(function() {
$("#btn").click(settime);
});
});
var countdown = 60;
function settime() {
if(countdown == 0) {
$("#btn").attr("disabled", false);
$("#btn").attr("value", "免费获取验证码");
countdown = 60;
} else {
$("#btn").attr("disabled", true);
$("#btn").attr("value", "重新发送(" + countdown + ")");
countdown--;
setTimeout(settime, 1000)
}
}
</script>
</body>
</html>