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 相关文章推荐
各种效果的jquery ui(接口)介绍
Sep 17 Javascript
js获取网页高度(详细整理)
Dec 28 Javascript
如何创建一个JavaScript弹出DIV窗口层的效果
Sep 25 Javascript
JavaScript Math.ceil() 函数使用介绍
Dec 11 Javascript
jquery获取节点名称
Apr 26 Javascript
基于AngularJS实现页面滚动到底自动加载数据的功能
Oct 16 Javascript
js控制台输出的方法(详解)
Nov 26 Javascript
JS操作xml对象转换为Json对象示例
Mar 25 Javascript
vue双花括号的使用方法 附练习题
Nov 07 Javascript
JS运动改变单物体透明度的方法分析
Jan 23 Javascript
vue.js中toast用法及使用toast弹框的实例代码
Aug 27 Javascript
解决vue select当前value没有更新到vue对象属性的问题
Aug 30 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中遍历二维数组并以表格的形式输出的方法
2017/01/03 PHP
PHP使用GD库制作验证码的方法(点击验证码或看不清会刷新验证码)
2017/08/15 PHP
载入jQuery库的最佳方法详细说明及实现代码
2012/12/28 Javascript
jquery+javascript编写国籍控件
2015/02/12 Javascript
微信小程序 location API接口详解及实例代码
2016/10/12 Javascript
JS实现的模仿QQ头像资料卡显示与隐藏效果
2017/04/07 Javascript
JS设置手机验证码60s等待实现代码
2017/06/14 Javascript
微信小程序项目实践之验证码倒计时功能
2018/07/18 Javascript
Vue表单之v-model绑定下拉列表功能
2019/05/14 Javascript
layui动态渲染生成select的option值方法
2019/09/23 Javascript
Vue + element 实现多选框组并保存已选id集合的示例代码
2020/06/03 Javascript
[01:09]DOTAPLUS——DOTA2的新时代
2018/04/04 DOTA
[01:20:06]TNC vs VG 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
[01:27:44]DOTA2-DPC中国联赛 正赛 PSG.LGD vs Aster BO3 第一场 1月24日
2021/03/11 DOTA
Python使用Scrapy爬取妹子图
2015/05/28 Python
Python调用C++程序的方法详解
2017/01/24 Python
使用Python对SQLite数据库操作
2017/04/06 Python
python @property的用法及含义全面解析
2018/02/01 Python
python数字图像处理实现直方图与均衡化
2018/05/04 Python
详解Django的model查询操作与查询性能优化
2018/10/16 Python
pycharm使用matplotlib.pyplot不显示图形的解决方法
2018/10/28 Python
Python使用sklearn库实现的各种分类算法简单应用小结
2019/07/04 Python
Django 实现admin后台显示图片缩略图的例子
2019/07/28 Python
python之pymysql模块简单应用示例代码
2019/12/16 Python
python装饰器的特性原理详解
2019/12/25 Python
tensorflow实现训练变量checkpoint的保存与读取
2020/02/10 Python
python GUI库图形界面开发之PyQt5单行文本框控件QLineEdit详细使用方法与实例
2020/02/27 Python
Python3标准库glob文件名模式匹配的问题
2020/03/13 Python
如何基于python3和Vue实现AES数据加密
2020/03/27 Python
python简单实现最大似然估计&amp;scipy库的使用详解
2020/04/15 Python
Python文件夹批处理操作代码实例
2020/07/21 Python
css3实现背景模糊的三种方式(小结)
2020/05/15 HTML / CSS
使用phonegap创建联系人的实现方法
2017/03/30 HTML / CSS
请编写一个 C 函数,该函数在给定的内存区域搜索给定的字符,并返回该字符所在位置索引值
2014/09/15 面试题
通息工程毕业生自荐信
2013/10/16 职场文书
结婚幸福感言
2015/08/01 职场文书