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的ajax异步请求接收返回json数据实例
Jun 16 Javascript
JavaScript中的setUTCDate()方法使用详解
Jun 11 Javascript
基于JS实现PHP的sprintf函数实例
Nov 14 Javascript
JS实现放大、缩小及拖拽图片的方法【可兼容IE、火狐】
Aug 23 Javascript
前端设计师们最常用的JS代码汇总
Sep 25 Javascript
jQuery自定义元素右键点击事件(实现案例)
Apr 28 jQuery
详解vue-meta如何让你更优雅的管理头部标签
Jan 18 Javascript
vue 2.x 中axios 封装的get 和post方法
Feb 28 Javascript
vue中$set的使用(结合在实际应用中遇到的坑)
Jul 10 Javascript
js使用swiper实现层叠轮播效果实例代码
Dec 12 Javascript
详解vue中v-bind:style效果的自定义指令
Jan 21 Javascript
Vue Mint UI mt-swipe的使用方式
Jun 05 Vue.js
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
星际争霸 Starcraft 游戏介绍
2020/03/14 星际争霸
smarty基础之拼接字符串的详解
2013/06/18 PHP
PHP基于双向链表与排序操作实现的会员排名功能示例
2017/12/26 PHP
Alliance vs AM BO3 第一场2.13
2021/03/10 DOTA
javascript 获取所有id中包含某关键字的控件的实现代码
2010/11/25 Javascript
JavaScript中的匀速运动和变速(缓冲)运动详细介绍
2012/11/11 Javascript
js导入导出excel(实例代码)
2013/11/25 Javascript
用JS在浏览器中创建下载文件
2014/03/05 Javascript
js游戏人物上下左右跑步效果代码分享
2015/08/28 Javascript
使用jquery获取url及url参数的简单实例
2016/06/14 Javascript
JavaScript实现多栏目切换效果
2016/12/12 Javascript
利用SpringMVC过滤器解决vue跨域请求的问题
2018/02/10 Javascript
详解JS中统计函数执行次数与执行时间
2018/09/04 Javascript
js针对图片加载失败的处理方法分析
2019/08/24 Javascript
Vue执行方法,方法获取data值,设置data值,方法传值操作
2020/08/05 Javascript
vue3.0中友好使用antdv示例详解
2021/01/05 Vue.js
arcgis.js控制地图地体的显示范围超出区域自动弹回(实现思路)
2021/01/28 Javascript
python使用xlrd与xlwt对excel的读写和格式设定
2017/01/21 Python
python 换位密码算法的实例详解
2017/07/19 Python
Python 3.6 性能测试框架Locust安装及使用方法(详解)
2017/10/11 Python
python+mongodb数据抓取详细介绍
2017/10/25 Python
Python实现的凯撒密码算法示例
2018/04/12 Python
Python获取航线信息并且制作成图的讲解
2019/01/03 Python
在Python函数中输入任意数量参数的实例
2019/07/16 Python
python对csv文件追加写入列的方法
2019/08/01 Python
Python实现多线程/多进程的TCP服务器
2019/09/03 Python
Xadmin+rules实现多选行权限方式(级联效果)
2020/04/07 Python
Python代码覆盖率统计工具coverage.py用法详解
2020/11/25 Python
COACH德国官方网站:纽约现代奢侈品牌,1941年
2018/06/09 全球购物
英文版餐饮运营管理求职信
2013/11/06 职场文书
生物专业个人自荐信范文
2013/11/29 职场文书
师德学习感言
2014/01/31 职场文书
《广玉兰》教学反思
2014/04/14 职场文书
小学生学习雷锋倡议书
2014/05/15 职场文书
学雷锋活动倡议书
2014/08/30 职场文书
死亡证明书样本说明
2014/10/18 职场文书