JavaScript实现点击按钮后变灰避免多次重复提交
更新时间：2013年07月15日 17:55:18 作者：
注册的时候需要发送验证激活帐号的邮件，为了避免邮件的多次重复发送，所以可以在点击了发送后，设置按钮变灰，倒计时一段时间后又可重复点击，具体实现如下，感兴趣的朋友可以参考下哈
注册的时候需要发送验证激活帐号的邮件，为了避免邮件的多次重复发送，所以可以在点击了发送后，设置button要过一段时间才能继续点击。下面是一个简单的例子：
<html>
<head>
<title>点击获取验证码按钮后按钮变灰，倒计时一段时间后又可重复点击</title>
</head>
<body>
<input type="button" id="btn" value="免费获取验证码" />
<script type="text/javascript">
var wait=60;
function time(o) {
if (wait == 0) {
o.removeAttribute("disabled");
o.value="免费获取验证码";
wait = 60;
} else {
o.setAttribute("disabled", true);
o.value=wait+"秒后可以重新发送";
wait--;
setTimeout(function() {
time(o)
},
1000)
}
}
document.getElementById("btn").onclick=function(){time(this);}
</script>
</body>
</html>
复制代码 代码如下:
<html>
<head>
<title>点击获取验证码按钮后按钮变灰，倒计时一段时间后又可重复点击</title>
</head>
<body>
<input type="button" id="btn" value="免费获取验证码" />
<script type="text/javascript">
var wait=60;
function time(o) {
if (wait == 0) {
o.removeAttribute("disabled");
o.value="免费获取验证码";
wait = 60;
} else {
o.setAttribute("disabled", true);
o.value=wait+"秒后可以重新发送";
wait--;
setTimeout(function() {
time(o)
},
1000)
}
}
document.getElementById("btn").onclick=function(){time(this);}
</script>
</body>
</html>
相关文章
这篇文章主要介绍了浅谈Fetch 数据交互方式,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-12-12
这篇文章主要介绍了基于JavaScript实现大文件上传后端代码实例,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2020-08-08
这篇文章介绍了在javascript中自定义对象的属性方法，有需要的朋友可以参考一下2013-07-07
下面小编就为大家带来一篇JS 60秒后重新发送验证码的实例讲解。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-07-07
JavaScript在控件上添加倒计时功能，主要原理是利用控件的setEnable(true)/setEnable(false)来进行设置控件的可用与不可用状态，实现过程非常简单，需要的的朋友参考下吧2017-07-07
在JavaScript中for循环是同步的,意味着每个循环都会等待前一个循环的请求完成后才会执行下一个循环,这篇文章主要给大家介绍了关于JS多次请求接口按顺序依次执行的解决办法,需要的朋友可以参考下2024-04-04
这篇文章主要介绍了js 数据类型判断的方法，帮助大家更好的理解和使用JavaScript，感兴趣的朋友可以了解下2020-12-12
这篇文章主要介绍了js常用排序方法实例代码解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2020-03-03
这篇文章主要给大家介绍了关于使用Echarts设置地图并触发点击事件的的相关资料,ECharts是一款基于JavaScript的数据可视化库,可以用于创建各种类型的交互式图表,包括地图,需要的朋友可以参考下2023-09-09
Highlightjs是一款优秀的代码高亮Js组件，可以很方便地对各种语言编写的代码添加语法高亮样式。本文重点给大家介绍Highlightjs 添加代码行号的实现代码，需要的朋友参考下吧2017-09-09
最新评论