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实现表格数据的动态添加与统计的代码
Jan 31 Javascript
javascript游戏开发之《三国志曹操传》零部件开发(四)用地图块拼成大地图
Jan 23 Javascript
jQuery插件分享之分页插件jqPagination
Jun 06 Javascript
jQuery 实现侧边浮动导航菜单效果
Dec 26 Javascript
javascript将DOM节点添加到文档的方法实例分析
Aug 04 Javascript
解决jQuery使用JSONP时产生的错误
Dec 02 Javascript
Javascript数组Array基础介绍
Mar 13 Javascript
JavaScript中apply方法的应用技巧小结
Sep 29 Javascript
折叠菜单及选择器的运用
Feb 03 Javascript
javascript将json格式数组下载为excel表格的方法
Dec 22 Javascript
Webpack 之 babel-loader文件预处理器详解
Mar 23 Javascript
Node.js API详解之 dgram模块用法实例分析
Jun 05 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网站在线人数统计
2008/04/09 PHP
解析PHP中如何将数组变量写入文件
2013/06/06 PHP
判断php数组是否为索引数组的实现方法
2013/06/13 PHP
Laravel实现构造函数自动依赖注入的方法
2016/03/16 PHP
PDO::getAvailableDrivers讲解
2019/01/28 PHP
php+ajax 文件上传代码实例
2019/03/18 PHP
js获取图片长和宽度的代码
2009/11/24 Javascript
javascript 跨浏览器开发经验总结(五) js 事件
2010/05/19 Javascript
跟我学习javascript的异步脚本加载
2015/11/20 Javascript
JavaScript中transform实现数字翻页效果
2017/03/08 Javascript
浅析Node.js非对称加密方法
2018/01/29 Javascript
详解Webpack + ES6 最新环境搭建与配置
2018/06/04 Javascript
原生JS实现列表子元素顺序反转的方法分析
2018/07/02 Javascript
vue router 用户登陆功能的实例代码
2019/04/24 Javascript
layui使用label标签的方法
2019/09/14 Javascript
Python实现微信公众平台自定义菜单实例
2015/03/20 Python
Python中为什么要用self探讨
2015/04/14 Python
python使用PIL缩放网络图片并保存的方法
2015/04/24 Python
Python文件读取的3种方法及路径转义
2015/06/21 Python
Python的装饰器模式与面向切面编程详解
2015/06/21 Python
python登录豆瓣并发帖的方法
2015/07/08 Python
python和shell监控linux服务器的详细代码
2018/06/22 Python
20行python代码实现人脸识别
2019/05/05 Python
如何用Python制作微信好友个性签名词云图
2019/06/28 Python
详细整理python 字符串(str)与列表(list)以及数组(array)之间的转换方法
2019/08/30 Python
基于Python+QT的gui程序开发实现
2020/07/03 Python
基于HTML5 Canvas 实现商场监控实例详解
2017/11/20 HTML / CSS
开发人员所需要知道的HTML5性能分析面面观
2012/07/05 HTML / CSS
美国在线奢侈品寄售商店:Luxury Garage Sale
2018/08/19 全球购物
亿阳信通股份有限公司C#笔试题
2016/12/06 面试题
药剂专业学生求职信范文
2013/12/28 职场文书
工作会议主持词
2014/03/17 职场文书
学生会竞选演讲稿
2014/04/24 职场文书
MySQL分库分表详情
2021/09/25 MySQL
JavaScript ES6的函数拓展
2022/01/18 Javascript
解决spring.thymeleaf.cache=false不起作用的问题
2022/06/10 Java/Android