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>
相关文章
重写document.write实现无阻塞加载js广告(补充)
这篇文章主要介绍了重写document.write实现无阻塞加载js广告,需要的朋友可以参考下2014-12-12
这篇文章主要介绍了javascript new的运行机制的相关资料,需要的朋友可以参考下2016-01-01
这篇文章介绍了javascript中直接写php代码的方法，有需要的朋友可以参考一下2013-07-07
开启Javascript中apply、call、bind的用法之旅模式
在Javascript中，Function是一种对象。Function对象中的this指向决定于函数被调用的方式,使用apply，call 与 bind 均可以改变函数对象中this的指向。2015-10-10
这篇文章主要为大家详细介绍了JavaScript瀑布流的实现方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助2022-07-07
这篇文章主要介绍了JavaScript实现ASC转汉字及汉字转ASC的方法,涉及JavaScript编码转换的相关技巧,需要的朋友可以参考下2016-01-01
利用js异或算法实现脚本加解密的代码2008-02-02
这篇文章主要介绍了layui中的tab控件点击切换触发事件，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-06-06
这篇文章主要介绍了JavaScript动态修改弹出窗口大小的方法,涉及javascript中window.open方法的使用技巧,非常具有实用价值,需要的朋友可以参考下2015-04-04
这篇文章主要介绍了RxJS在TypeScript中的简单使用详解，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-04-04
最新评论