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中取前n天日期的两种方法分享
Jan 26 Javascript
jQuery中prevAll()方法用法实例
Jan 08 Javascript
JavaScript字符串常用类使用方法汇总
Apr 14 Javascript
javascript返回顶部的按钮实现方法
Jan 09 Javascript
JavaScript 链式结构序列化详解
Sep 30 Javascript
详解Vue 普通对象数据更新与 file 对象数据更新
Apr 26 Javascript
Angular实现类似博客评论的递归显示及获取回复评论的数据
Nov 06 Javascript
在 Typescript 中使用可被复用的 Vue Mixin功能
Apr 17 Javascript
JavaScript引用类型Function实例详解
Aug 09 Javascript
Vue使用lodop实现打印小结
Jul 06 Javascript
JavaScript设计模式之门面模式原理与实现方法分析
Mar 09 Javascript
逐行分析鸿蒙系统的 JavaScript 框架(推荐)
Sep 17 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
PHP4中session登录页面的应用
2008/07/25 PHP
php中设置index.php文件为只读的方法
2013/02/06 PHP
ThinkPHP独立分组使用的注意事项
2014/11/25 PHP
简单谈谈php中ob_flush和flush的区别
2014/11/27 PHP
PHP模板引擎Smarty自定义变量调解器用法
2016/04/11 PHP
php简单实现sql防注入的方法
2016/04/22 PHP
PHP实现权限管理功能示例
2017/09/22 PHP
Laravel 5使用Laravel Excel实现Excel/CSV文件导入导出的功能详解
2017/10/11 PHP
解决PHPstudy Apache无法启动的问题【亲测有效】
2020/10/30 PHP
javascript 页面只自动刷新一次
2009/07/10 Javascript
javascript 三种编解码方式
2010/02/01 Javascript
javascript内置对象操作详解
2015/02/04 Javascript
跟我学习javascript的函数调用和构造函数调用
2015/11/16 Javascript
利用jquery制作滚动到指定位置触发动画
2016/03/26 Javascript
AngularJS基础 ng-readonly 指令简单示例
2016/08/02 Javascript
js滚轮事件兼容性问题需要注意哪些
2016/11/15 Javascript
纯js的右下角弹窗实例
2017/03/12 Javascript
JavaScript实现AOP详解(面向切面编程,装饰者模式)
2017/12/19 Javascript
JavaScript设计模式之装饰者模式实例详解
2019/01/17 Javascript
vue + typescript + video.js实现 流媒体播放 视频监控功能
2019/07/07 Javascript
js实现登录时记住密码的方法分析
2020/04/05 Javascript
Python使用xlrd读取Excel格式文件的方法
2015/03/10 Python
git进行版本控制心得详谈
2017/12/10 Python
Django model序列化为json的方法示例
2018/10/16 Python
利用python提取wav文件的mfcc方法
2019/01/09 Python
Django缓存系统实现过程解析
2019/08/02 Python
python将字典列表导出为Excel文件的方法
2019/09/02 Python
python第三方库学习笔记
2020/02/07 Python
药学专业毕业生求职信
2013/10/20 职场文书
小班下学期评语
2014/05/04 职场文书
网吧消防安全责任书
2014/07/29 职场文书
物业客服专员岗位职责
2015/04/07 职场文书
导游词之江南周庄
2019/12/06 职场文书
python读取pdf格式文档的实现代码
2021/04/01 Python
粗暴解决CUDA out of memory的问题
2021/05/22 Python
PostgreSQL怎么创建分区表详解
2022/06/25 PostgreSQL