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 相关文章推荐
获取鼠标在div中的相对位置的实现代码
Dec 30 Javascript
jquery基础教程之deferred对象使用方法
Jan 22 Javascript
浅谈javascript的call()、apply()、bind()的用法
Feb 21 Javascript
JS实现pasteHTML兼容ie,firefox,chrome的方法
Jun 22 Javascript
详解JSON1:使用TSQL查询数据和更新JSON数据
Nov 21 Javascript
jQuery操作json常用方法示例
Jan 04 Javascript
浅谈 vue 中的 watcher
Dec 04 Javascript
webpack之devtool详解
Feb 10 Javascript
解决VUE双向绑定失效的问题
Oct 29 Javascript
基于JavaScript判断两个对象内容是否相等
Jan 10 Javascript
Vue + element 实现多选框组并保存已选id集合的示例代码
Jun 03 Javascript
js+canvas实现图片格式webp/png/jpeg在线转换
Aug 22 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
PHP中feof()函数实例测试
2014/08/23 PHP
利用PHP_XLSXWriter代替PHPExcel的方法示例
2017/07/16 PHP
PHP的mysqli_stat()函数讲解
2019/01/23 PHP
php设计模式之装饰模式应用案例详解
2019/06/17 PHP
jQuery获取文本节点之 text()/val()/html() 方法区别
2011/03/01 Javascript
javascript判断两个IP地址是否在同一个网段的实现思路
2013/12/13 Javascript
JQuery实现的图文自动轮播效果插件
2015/06/19 Javascript
JS+CSS实现简单滑动门(滑动菜单)效果
2015/09/19 Javascript
基于jQuery倒计时插件实现团购秒杀效果
2016/05/13 Javascript
关于jquery中动态增加select,事件无效的快速解决方法
2016/08/29 Javascript
使用JavaScript获取Request中参数的值方法
2016/09/27 Javascript
Django使用多数据库的方法
2017/09/06 Javascript
Javascript刷新页面的实例
2017/09/23 Javascript
利用vue + element实现表格分页和前端搜索的方法
2017/12/25 Javascript
Node.js 使用jade模板引擎的示例
2018/05/11 Javascript
微信小程序实现图片选择并预览功能
2019/07/25 Javascript
js表达式与运算符简单操作示例
2020/02/15 Javascript
[06:36]吞吞映像top1
2014/06/20 DOTA
python算法学习之基数排序实例
2013/12/18 Python
Python中装饰器的一个妙用
2015/02/08 Python
使用Python来开发Markdown脚本扩展的实例分享
2016/03/04 Python
Python实现简单生成验证码功能【基于random模块】
2018/02/10 Python
python3 打开外部程序及关闭的示例
2018/11/06 Python
python支付宝支付示例详解
2019/08/22 Python
Python识别验证码的实现示例
2020/09/30 Python
NULL是什么,它是怎么定义的
2015/05/09 面试题
jQuery treeview树形结构应用
2021/03/24 jQuery
幼儿园中秋节活动方案2013
2014/01/29 职场文书
大学校运会广播稿
2014/02/03 职场文书
网球场地租赁协议范本
2014/10/07 职场文书
论群众路线学习心得体会
2014/10/31 职场文书
单位推荐信范文
2015/03/27 职场文书
孝女彩金观后感
2015/06/10 职场文书
超市啤酒狂欢夜策划方案范文!
2019/07/03 职场文书
Python Parser的用法
2021/05/12 Python
JavaScript与JQuery框架基础入门教程
2021/07/15 Javascript