超实用的JavaScript代码段 Item4 --发送短信验证码
2015-10-31 10:48
609 查看
发送短信验证码
实现点击“发送验证码”按钮后,按钮依次显示为“59秒后重试”、“58秒后重试”…直至倒计时至0秒时再恢复显示为“发送验证码”。在倒计时期间按钮为禁用状态 .第一步、获取按钮、绑定事件、设置定时器变量和计时变量
第二步、添加定时器,每隔1秒钟计时减 1,直至当计时小于等于 0 时清除定时器,按钮恢复为“发送验证码”,否则显示为“X秒后重试”
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script type="text/javascript"> window.onload=function(){ var send=document.getElementById('send'), times=60, timer=null; send.onclick=function(){ // 计时开始 var that = this; this.disabled=true; timer = setInterval(function(){ times --; that.value = times + "秒后重试"; if(times <= 0){ that.disabled =false; that.value = "发送验证码"; clearInterval(timer); times = 60; } //console.log(times); },1000); } } </script> </head> <body> <input type="button" id="send" value="发送验证码"> </body> </html>
设置按钮是否为禁用时,send.disabled=true; send.disabled=false; true和false不能加引号!true和false不能加引号!true和false不能加引号!否则值永远为真。 也可用send.setAttribute('disabled','disabled'); 或send.removeAttribute('disabled');
相关文章推荐
- JQuery1——基础($对象,选择器,对象转换)
- Android学习笔记(二九):嵌入浏览器
- Android java 与 javascript互访(相互调用)的方法例子
- JavaScript演示排序算法
- javascript实现10进制转为N进制数
- java自动生成验证码插件-kaptcha
- 2019年开发人员应该学习的8个JavaScript框架
- HTML中的script标签研究
- 对一个分号引发的错误研究
- 异步流程控制:7 行代码学会 co 模块
- ES6 走马观花(ECMAScript2015 新特性)
- JavaScript拆分字符串时产生空字符的原因
- Canvas 在高清屏下绘制图片变模糊的解决方法
- IE8开发人员工具教程(二)
- 在flex中执行一个javascript方法的简单方式
- Flex结合JavaScript读取本地路径的方法
- PowerShell中执行Javascript的方法示例
- javascript asp教程第六课-- response方法