JS实现点击发送验证码 xx秒后重新发送功能


Posted in Javascript onJuly 30, 2019

用于一些注册类的场景,点击发送验证码,xx秒后重新发送。

利用 setTimeout 方法,xx秒后执行指定的方法,修改button的属性值,disabled为true时为灰色,不可点击。

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!--<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>-->
<script type="text/javascript"> 
var countdown=60; 
function settime(obj) { 
  if (countdown == 0) { 
    obj.removeAttribute("disabled");  
    obj.value="获取验证码"; 
    countdown = 60; 
    return;
  } else { 
    obj.setAttribute("disabled", true); 
    obj.value="重新发送(" + countdown + ")"; 
    countdown--; 
  } 
setTimeout(function() { 
    settime(obj);
  }
  ,1000);
}
 
</script>
<body>
<label>
  <input type="text" name="textfield">
</label>
<input type="button" id="btn" value="获取验证码" onclick="settime(this)" /> 
</body>
</html>

总结

以上所述是小编给大家介绍的JS实现点击发送验证码 xx秒后重新发送功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
关于JavaScript的gzip静态压缩方法
Jan 05 Javascript
IE8 下的Js错误HTML Parsing Error...
Aug 14 Javascript
ie中js创建checkbox默认选中问题探讨
Oct 21 Javascript
js调试系列 控制台命令行API使用方法
Jun 18 Javascript
node.js中的buffer.Buffer.byteLength方法使用说明
Dec 10 Javascript
node.js中的fs.appendFile方法使用说明
Dec 17 Javascript
Javascript removeChild()删除节点及删除子节点的方法
Dec 27 Javascript
浏览器兼容的JS写法总结
Apr 27 Javascript
微信小程序模板之分页滑动栏
Feb 10 Javascript
JavaScript多态与封装实例分析
Jul 27 Javascript
微信内置浏览器图片查看器的代码实例
Oct 08 Javascript
three.js利用卷积法如何实现物体描边效果
Nov 27 Javascript
微信小程序渲染性能调优小结
Jul 30 #Javascript
vue通过video.js解决m3u8视频播放格式的方法
Jul 30 #Javascript
微信小程序用户授权弹窗 拒绝时引导用户重新授权实现
Jul 29 #Javascript
vue使用混入定义全局变量、函数、筛选器的实例代码
Jul 29 #Javascript
vue前后分离调起微信支付
Jul 29 #Javascript
详解vue-property-decorator使用手册
Jul 29 #Javascript
微信小程序new Date()方法失效问题解决方法
Jul 29 #Javascript
You might like
Zend studio for eclipse中使php可以调用mysql相关函数的设置方法
2008/10/13 PHP
PHP数组实例总结与说明
2011/08/23 PHP
PHP5.4中json_encode中文转码的变化小结
2013/01/30 PHP
微信支付开发告警通知实例
2016/07/12 PHP
php字符串过滤strip_tags()函数用法实例分析
2019/06/24 PHP
Save a File Using a File Save Dialog Box
2007/06/18 Javascript
浅析javascript闭包 实例分析
2010/12/25 Javascript
web网页按比例显示图片实现原理及js代码
2013/08/09 Javascript
js中opener与parent的区别详细解析
2014/01/14 Javascript
动态加载js、css等文件跨iframe实现
2014/02/24 Javascript
IE浏览器中图片onload事件无效的解决方法
2014/04/29 Javascript
js实现无限级树形导航列表效果代码
2015/09/23 Javascript
JS实现的跨浏览器解析XML文件实例
2016/06/21 Javascript
微信小程序 缓存(本地缓存、异步缓存、同步缓存)详解
2017/01/17 Javascript
浅谈js函数三种定义方式 &amp; 四种调用方式 &amp; 调用顺序
2017/02/19 Javascript
详解React之父子组件传递和其它一些要点
2018/06/25 Javascript
vue回到顶部监听滚动事件详解
2019/08/02 Javascript
react使用CSS实现react动画功能示例
2020/05/18 Javascript
浅析Python中的序列化存储的方法
2015/04/28 Python
python判断给定的字符串是否是有效日期的方法
2015/05/13 Python
Python3通过Luhn算法快速验证信用卡卡号的方法
2015/05/14 Python
python实现的多线程端口扫描功能示例
2017/01/21 Python
深入理解Django自定义信号(signals)
2018/10/15 Python
使用Python获取网段IP个数以及地址清单的方法
2018/11/01 Python
python实现kNN算法识别手写体数字的示例代码
2019/08/16 Python
NumPy统计函数的实现方法
2020/01/21 Python
利用css3径向渐变做一张优惠券的示例
2018/03/22 HTML / CSS
Java中实现多态的机制
2015/08/09 面试题
销售员个人求职的自我评价
2014/02/10 职场文书
英语教师自荐信
2014/05/26 职场文书
法人授权委托书范本
2014/09/17 职场文书
乡镇党员干部四风对照检查材料思想汇报
2014/09/27 职场文书
党的群众路线教育实践活动剖析材料
2014/09/30 职场文书
小学生成绩单评语
2014/12/31 职场文书
2015年社区环境卫生工作总结
2015/04/21 职场文书
环境卫生标语
2015/08/03 职场文书