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 设计模式学习 Singleton
Jul 27 Javascript
JS setCapture 区域外事件捕捉
Mar 18 Javascript
打豆豆小游戏 用javascript编写的[打豆豆]小游戏
Jan 08 Javascript
js 调用父窗口的具体实现代码
Jul 15 Javascript
详解JavaScript语法对{}处理的坑爹之处
Jun 05 Javascript
JavaScript function 的 length 属性使用介绍
Sep 15 Javascript
BootStrap Typeahead自动补全插件实例代码
Aug 10 Javascript
JS检测window.open打开的窗口是否关闭
Jun 25 Javascript
JavaScript模块详解
Dec 18 Javascript
微信小程序从注册账号到上架(图文详解)
Jul 17 Javascript
js 解析 JSON 数据简单示例
Apr 21 Javascript
简单了解JavaScript作用域
Jul 31 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
PHP5.0对象模型探索之抽象方法和抽象类
2006/09/05 PHP
PHP设计模式 注册表模式(多个类的注册)
2012/02/05 PHP
select组合框option的捕捉实例代码
2008/09/30 Javascript
匹配任意字符的正则表达式写法
2010/04/29 Javascript
JS模拟键盘打字效果的方法
2015/08/05 Javascript
JavaScript人脸识别技术及脸部识别JavaScript类库Tracking.js
2015/09/14 Javascript
Nodejs初级阶段之express
2015/11/23 NodeJs
jQuery CSS3相结合实现时钟插件
2016/01/08 Javascript
JS面向对象编程详解
2016/03/06 Javascript
checkbox批量选中,获取选中项的值的简单实例
2016/06/28 Javascript
js html css实现复选框全选与反选
2016/10/09 Javascript
jQuery EasyUI tree 使用拖拽时遇到的错误小结
2016/10/10 Javascript
深入浅析Vue组件开发
2016/11/25 Javascript
JS返回只包含数字类型的数组实例分析
2016/12/16 Javascript
深入学习 JavaScript中的函数调用
2017/03/23 Javascript
JS闭包可被利用的常见场景小结
2017/04/09 Javascript
简单谈谈CommonsChunkPlugin抽取公共模块
2017/12/31 Javascript
vue使用自定义指令实现拖拽
2021/01/29 Javascript
微信小程序全局变量的设置、使用、修改过程解析
2019/09/24 Javascript
JavaScript实现点击切换功能
2021/01/27 Javascript
[05:56]第十六期——新进3大C之小兔基
2014/06/24 DOTA
介绍Python的@property装饰器的用法
2015/04/28 Python
使用python调用zxing库生成二维码图片详解
2017/01/10 Python
Python操作Redis之设置key的过期时间实例代码
2018/01/25 Python
python如何制作缩略图
2019/04/30 Python
Python中的引用和拷贝实例解析
2019/11/14 Python
解决pandas展示数据输出时列名不能对齐的问题
2019/11/18 Python
python 图像插值 最近邻、双线性、双三次实例
2020/07/05 Python
详解Pycharm安装及Django安装配置指南
2020/09/15 Python
CSS3实现文本垂直排列的方法
2018/07/10 HTML / CSS
师范生实习的个人自我鉴定
2013/10/20 职场文书
工作交流会欢迎词
2014/01/12 职场文书
服务员岗位职责
2015/02/03 职场文书
换届选举主持词
2015/07/03 职场文书
PHP设计模式(观察者模式)
2021/07/07 PHP
css3手动实现pc端横向滚动
2022/06/21 HTML / CSS