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> 

您可能感兴趣的文章:

js for循环，为什么一定要加var定义i变量
我知道，有些人（譬如之前的我）写js的for循环时，都不习惯加上var，这当然是语法允许的。
2010-06-06
手写Spirit防抖函数underscore和节流函数lodash
这篇文章主要介绍了手写Spirit防抖函数underscore和节流函数lodash，接下来将会带你们了解下这两者的区别,以及我们该如何手写实现这两个函数
2022-03-03
小程序转发探索示例
这篇文章主要介绍了小程序转发探索示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2019-02-02
javaScript中Math()函数注意事项
本文主要给大家分享了javascript中Math()函数的注意事项，以及math对象的方法，十分的简单实用，有需要的小伙伴可以参考下
2015-06-06
JavaScript中重名的函数与对象示例详析
最近同事问了一个问题，说在js中如果函数与对象重名了会怎么样？仔细详细这个问题值得讨论一下，所以便有了这篇文章，这篇文章主要给大家介绍了关于JavaScript中重名的函数与对象的相关资料，需要的朋友可以参考借鉴，下面来一起看看吧啊。
2017-09-09
JavaScript奇技淫巧44招【实用】
JavaScript是一个绝冠全球的编程语言，可用于Web开发、移动应用开发（PhoneGap、Appcelerator）、服务器端开发（Node.js和Wakanda）等等。本文主要介绍JavaScript应用的一些小技巧。
2016-12-12
JavaScript实现点击按钮直接打印
很多网站都有此功能，当浏览到底部时都会有一个打印按钮，点击打印按钮就可以完成打印功能，功能非常不错，人性化，下面通过本文给大家介绍JavaScript实现点击按钮就打印的代码，需要的朋友参考下
2016-01-01
微信小程序中target和currentTarget的区别小结
这篇文章主要给大家介绍了关于微信小程序中target和currentTarget区别的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2020-11-11
glsl_buffer实现渐变三角形方法详解
这篇文章主要为大家介绍了glsl_buffer实现渐变三角形方法详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2023-03-03
学习JavaScript正则表达式
这篇文章主要介绍了JavaScript正则表达式，详细深入的了解JavaScript正则表达式，从而更熟练掌握JavaScript正则表达式，感兴趣的小伙伴们可以参考一下
2015-11-11