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 EasyUI NumberBox(数字框)的用法
Jul 08 Javascript
javascript跟随滚动效果插件代码(javascript Follow Plugin)
Aug 03 Javascript
JS实现兼容各浏览器解析XML文档数据的方法
Jun 01 Javascript
每天一篇javascript学习小结(基础知识)
Nov 10 Javascript
使用three.js 画渐变的直线
Jun 05 Javascript
Javascript中call,apply,bind方法的详解与总结
Dec 12 Javascript
JS库particles.js创建超炫背景粒子插件(附源码下载)
Sep 13 Javascript
五步轻松实现zTree的使用
Nov 01 Javascript
JavaScript图片处理与合成总结
Mar 04 Javascript
Vue 中文本内容超出规定行数后展开收起的处理的实现方法
Apr 28 Javascript
微信小程序实现页面浮动导航
Jan 08 Javascript
js实现页面图片消除效果
Mar 24 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
广播爱好者需要了解的天线知识
2021/03/01 无线电
THINKPHP内容分页代码分享
2015/01/14 PHP
PHP环境中Memcache的安装和使用
2015/11/05 PHP
thinkphp配置文件路径的实现方法
2016/08/30 PHP
PHP之header函数详解
2021/03/02 PHP
Jquery AJAX 框架的使用方法
2009/11/03 Javascript
为radio类型的INPUT添加客户端脚本(附加实现JS来禁用onClick事件思路代码)
2010/11/11 Javascript
javascript中字符串的定义示例代码
2013/12/19 Javascript
javascript学习笔记(二)数组和对象部分
2014/09/30 Javascript
浅析2种JavaScript继承方式
2015/12/04 Javascript
JS实现弹出居中的模式窗口示例
2016/06/20 Javascript
JavaScript将base64图片转换成formData并通过AJAX提交的实现方法
2016/10/24 Javascript
前端分页功能的实现以及原理(jQuery)
2017/01/22 Javascript
Bootstrap3多级下拉菜单
2017/02/24 Javascript
JavaScript满天星导航栏实现方法
2018/03/08 Javascript
vue+node实现图片上传及预览的示例方法
2018/11/22 Javascript
微信小程序引入VANT组件的方法步骤
2019/09/19 Javascript
node.js实现简单的压缩/解压缩功能示例
2019/11/05 Javascript
低版本中Python除法运算小技巧
2015/04/05 Python
深入理解Python分布式爬虫原理
2017/11/23 Python
python中的set实现不重复的排序原理
2018/01/24 Python
python使用tornado实现简单爬虫
2018/07/28 Python
python实现dijkstra最短路由算法
2019/01/17 Python
python多线程调用exit无法退出的解决方法
2019/02/18 Python
详解Python下载图片并保存本地的两种方式
2019/05/15 Python
一文轻松掌握python语言命名规范规则
2020/06/18 Python
Python实现JS解密并爬取某音漫客网站
2020/10/23 Python
Shopee印度尼西亚:东南亚与台湾市场最大电商平台
2018/06/17 全球购物
台湾屈臣氏网路商店:Watsons台湾
2020/12/29 全球购物
Java中有几种类型的流?JDK为每种类型的流提供了一些抽象类以供继承,请说出他们分别是哪些类
2012/02/06 面试题
如何拷贝一整个Java对象,包括它的状态
2013/12/27 面试题
有兼职工作经历的简历自我评价
2014/03/07 职场文书
物流专业自荐信
2014/05/23 职场文书
小学生一分钟演讲稿
2014/08/26 职场文书
少先队中队工作总结
2015/08/14 职场文书
企业版Windows 11有哪些新功能? Win11适用于企业的功能介绍
2021/11/21 数码科技