JavaScript实现点击按钮后变灰避免多次重复提交


Posted in Javascript onJuly 15, 2013

注册的时候需要发送验证激活帐号的邮件,为了避免邮件的多次重复发送,所以可以在点击了发送后,设置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>
Javascript 相关文章推荐
javascript中eval函数用法分析
Apr 25 Javascript
BootStrap中Datepicker控件带中文的js文件
Aug 10 Javascript
javascript 实现动态侧边栏实例详解
Nov 11 Javascript
jquery对所有input type=text的控件赋值实现方法
Dec 02 Javascript
JS触摸与手势事件详解
May 09 Javascript
使用JavaScript实现alert的实例代码
Jul 06 Javascript
在Vue中如何使用Cookie操作实例
Jul 27 Javascript
详解JavaScript栈内存与堆内存
Apr 04 Javascript
JS端基于download.js实现图片、视频时直接下载而不是打开预览
May 09 Javascript
Vue ElementUI实现:限制输入框只能输入正整数的问题
Jul 31 Javascript
Vue.js原理分析之nextTick实现详解
Sep 07 Javascript
vue 解决在微信内置浏览器中调用支付宝支付的情况
Nov 09 Javascript
JS 去前后空格大全(IE9亲测)
Jul 15 #Javascript
Ext中下拉列表ComboBox组件store数据格式用法介绍
Jul 15 #Javascript
ExtJs设置GridPanel表格文本垂直居中示例
Jul 15 #Javascript
鼠标移动到图片名上,显示图片的简单实例
Jul 14 #Javascript
JS中获取数据库中的值的方法
Jul 14 #Javascript
js 实现日期灵活格式化的小例子
Jul 14 #Javascript
仿谷歌主页js动画效果实现代码
Jul 14 #Javascript
You might like
PHP-MySQL教程归纳总结
2008/06/07 PHP
PHP 类商品秒杀计时实现代码
2010/05/05 PHP
phpstrom使用xdebug配置方法
2013/12/17 PHP
PHP程序漏洞产生的原因分析与防范方法说明
2014/03/06 PHP
浅析ThinkPHP中execute和query方法的区别
2014/06/13 PHP
php利用smtp类实现电子邮件发送
2015/10/30 PHP
浅析PHP7新功能及语法变化总结
2016/06/17 PHP
php PDO异常处理详解
2016/11/20 PHP
基于jQuery UI CSS Framework开发Widget的经验
2010/08/21 Javascript
jquery模拟按下回车实现代码
2011/09/20 Javascript
分别用marquee和div+js实现首尾相连循环滚动效果,仅3行代码
2011/09/21 Javascript
js DOM 元素ID就是全局变量
2012/09/20 Javascript
jquery 新建的元素事件绑定问题解决方案
2014/06/12 Javascript
使用jQuery调用XML实现无刷新即时聊天
2016/08/07 Javascript
Angular 2应用的8个主要构造块有哪些
2016/10/17 Javascript
Angular 4依赖注入学习教程之Injectable装饰器(六)
2017/06/04 Javascript
详解swipe使用及竖屏页面滚动方法
2018/06/28 Javascript
vue刷新页面时去闪烁提升用户体验效果的实现方法
2018/12/10 Javascript
浅谈Vue服务端渲染框架Nuxt的那些事
2018/12/21 Javascript
vue与iframe之间的信息交互的实现
2020/04/08 Javascript
Python使用reportlab将目录下所有的文本文件打印成pdf的方法
2015/05/20 Python
通过5个知识点轻松搞定Python的作用域
2016/09/09 Python
Python英文文本分词(无空格)模块wordninja的使用实例
2019/02/20 Python
Python pandas DataFrame操作的实现代码
2019/06/21 Python
Django 通过JS实现ajax过程详解
2019/07/30 Python
解析PyCharm Python运行权限问题
2020/01/08 Python
深入浅析Python 命令行模块 Click
2020/03/11 Python
python对接ihuyi实现短信验证码发送
2020/05/10 Python
荷兰电脑专场:Paradigit
2018/05/05 全球购物
俄罗斯香水和化妆品网上商店:NOTINO.ru
2019/12/17 全球购物
澳大利亚Rockwear官网:女子瑜伽、健身和运动服
2021/01/26 全球购物
酷瑞网络科技面试题
2012/03/30 面试题
肖申克的救赎观后感
2015/06/02 职场文书
沂蒙六姐妹观后感
2015/06/08 职场文书
《爬天都峰》教学反思
2016/02/23 职场文书
redis lua限流算法实现示例
2022/07/15 Redis