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 06 Javascript
利用AngularJs实现京东首页轮播图效果
Sep 08 Javascript
jQuery简单创建节点的方法
Sep 09 Javascript
bootstrap提示标签、提示框实现代码
Dec 28 Javascript
es6的数字处理的方法(5个)
Mar 16 Javascript
Angularjs+bootstrap+table多选(全选)支持单击行选中实现编辑、删除功能
Mar 27 Javascript
微信小程序获取用户openId的实现方法
May 23 Javascript
vue父子组件的嵌套的示例代码
Sep 08 Javascript
利用nginx + node在阿里云部署https的步骤详解
Dec 19 Javascript
解决微信小程序防止无法回到主页的问题
Sep 28 Javascript
JavaScript自动生成 年月范围 选择功能完整示例【基于jQuery插件】
Sep 03 jQuery
对layui中table组件工具栏的使用详解
Sep 19 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
关于我转生变成史莱姆这档事:第二季PV上线,萌王2021年回归
2020/05/06 日漫
thinkphp5.1框架中容器(Container)和门面(Facade)的实现方法分析
2019/08/05 PHP
THINKPHP5分页数据对象处理过程解析
2020/10/28 PHP
JS 的应用开发初探(mootools)
2009/12/19 Javascript
JS request函数 用来获取url参数
2010/05/17 Javascript
30个精美的jQuery幻灯片效果插件和教程
2011/08/23 Javascript
用js正确判断用户名cookie是否存在的方法
2014/01/28 Javascript
什么是cookie?js手动创建和存储cookie
2014/05/27 Javascript
Javascript实现简单的富文本编辑器附演示
2014/06/16 Javascript
2014 HTML5/CSS3热门动画特效TOP10
2014/12/07 Javascript
轻松学习Javascript闭包
2017/03/01 Javascript
vue代理和跨域问题的解决
2018/07/18 Javascript
基于Vue2实现简易的省市区县三级联动组件效果
2018/11/05 Javascript
react组件从搭建脚手架到在npm发布的步骤实现
2019/01/09 Javascript
微信小程序实现基于三元运算验证手机号/姓名功能示例
2019/01/19 Javascript
在NPM发布自己造的轮子的方法步骤
2019/03/09 Javascript
零基础写python爬虫之urllib2中的两个重要概念:Openers和Handlers
2014/11/05 Python
浅析Python中的多重继承
2015/04/28 Python
Python 爬虫的工具列表大全
2016/01/31 Python
利用 Monkey 命令操作屏幕快速滑动
2016/12/07 Python
win10系统下Anaconda3安装配置方法图文教程
2018/09/19 Python
python学生信息管理系统(完整版)
2020/04/05 Python
对python dataframe逻辑取值的方法详解
2019/01/30 Python
python3利用Axes3D库画3D模型图
2020/03/25 Python
pycharm如何使用anaconda中的各种包(操作步骤)
2020/07/31 Python
Python 远程开关机的方法
2020/11/18 Python
css3实现二维码扫描特效的示例
2020/10/29 HTML / CSS
SKECHERS官方旗舰店:美国舒适运动休闲品牌
2017/12/22 全球购物
美国首屈一指的礼品篮供应商:GiftTree
2018/01/06 全球购物
Agoda台湾官网:国内外订房2折起
2018/03/20 全球购物
澳大利亚百货商店中销量第一的商务衬衫品牌:Van Heusen
2018/07/26 全球购物
一套Delphi的笔试题一
2016/02/14 面试题
关于礼仪的演讲稿
2014/01/04 职场文书
学校通报表扬范文
2015/05/04 职场文书
村官2015年度工作总结
2015/10/14 职场文书
大学三好学生主要事迹范文
2015/11/03 职场文书