码云 JavaScript防止表单重复提交，指定时间内禁止重复点击
AI 概述
最近项目在做一个登录页的时候，为了避免用户的多次重复点击登录按钮发送请求，所以我在点击了按钮发送请求后，将设置按钮变灰并禁用，倒计时一段时间后又可重复点击，具体实现如下，有需要的小伙伴可以参考一下。
关键代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
...
最近项目在做一个登录页的时候，为了避免用户的多次重复点击登录按钮发送请求，所以我在点击了按钮发送请求后，将设置按钮变灰并禁用，倒计时一段时间后又可重复点击，具体实现如下，有需要的小伙伴可以参考一下。
关键代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>登录页</title>
<script type="text/javascript">
window.onload = _ => {
document.getElementById('btn').onclick = function () {
send(this, 60)
}
}
/**
* 控制 ele 的按钮在指定时间内禁止重复点击
* @param ele 标签对象
* @param time 禁用时间（s）
*/
function send (ele, time) {
if (!time) {
ele.removeAttribute('disabled')
return ele.value = '登录'
}
ele.setAttribute('disabled', true)
ele.value = time + '秒后可以重新登录'
setTimeout(_ => send(ele, --time), 1000)
}
</script>
</head>
<body>
<input type="button" id="btn" value="登录"/>
</body>
</html>
以上关于JavaScript防止表单重复提交，指定时间内禁止重复点击的文章就介绍到这了，更多相关内容请搜索码云笔记以前的文章或继续浏览下面的相关文章，希望大家以后多多支持码云笔记。
微信
支付宝声明：本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若内容造成侵权/违法违规/事实不符，请将相关资料发送至 admin@mybj123.com 进行投诉反馈，一经查实，立即处理！
重要：如软件存在付费、会员、充值等，均属软件开发者或所属公司行为，与本站无关，网友需自行判断
码云笔记 » JavaScript防止表单重复提交，指定时间内禁止重复点击
如若内容造成侵权/违法违规/事实不符，请将相关资料发送至 admin@mybj123.com 进行投诉反馈，一经查实，立即处理！
重要：如软件存在付费、会员、充值等，均属软件开发者或所属公司行为，与本站无关，网友需自行判断
码云笔记 » JavaScript防止表单重复提交，指定时间内禁止重复点击
