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调试过程中找不到哪里出错的可能原因
Dec 16 Javascript
JavaScript清空数组元素的两种方法简单比较
Jul 10 Javascript
基于jQuery Circlr插件实现产品图片360度旋转
Sep 20 Javascript
详解js跨域原理以及2种解决方案
Dec 09 Javascript
关于微信上网页图片点击全屏放大效果
Dec 19 Javascript
three.js实现围绕某物体旋转
Jan 25 Javascript
javaScript 逻辑运算符使用技巧整理
May 03 Javascript
基于Vue实现支持按周切换的日历
Sep 24 Javascript
原生js实现简单的模态框示例
Sep 08 Javascript
微信小程序radio组件使用详解
Jan 31 Javascript
微信小程序开发之改变data中数组或对象的某一属性值
Jul 05 Javascript
微信小程序实现tab左右切换效果
Nov 15 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
提问的智慧(2)
2006/10/09 PHP
自己前几天写的无限分类类
2007/02/14 PHP
php变量作用域的深入解析
2013/06/03 PHP
关于ThinkPhp 框架表单验证及ajax验证问题
2017/07/19 PHP
thinkphp中的多表关联查询的实例详解
2017/10/12 PHP
javascript中利用数组实现的循环队列代码
2010/01/24 Javascript
关于IE浏览器以及Firefox下的javascript冒泡事件的响应层级
2010/10/14 Javascript
javascript内存管理详细解析
2013/11/11 Javascript
javascript实现百度地图鼠标滑动事件显示、隐藏
2015/04/02 Javascript
详解js中构造流程图的核心技术JsPlumb
2015/12/08 Javascript
JavaScript实现图片自动加载的瀑布流效果
2016/04/11 Javascript
JS脚本实现网页自动秒杀点击
2018/01/11 Javascript
详解Webpack + ES6 最新环境搭建与配置
2018/06/04 Javascript
Vue ElementUi同时校验多个表单(巧用new promise)
2018/06/06 Javascript
微信小程序实现获取准确的腾讯定位地址功能示例
2019/03/27 Javascript
JavaScript单线程和任务队列原理解析
2020/02/04 Javascript
基于Django模板中的数字自增(详解)
2017/09/05 Python
PyQt5每天必学之像素图控件QPixmap
2018/04/19 Python
Python中flatten( )函数及函数用法详解
2018/11/02 Python
Python如何使用函数做字典的值
2019/11/30 Python
python关于调用函数外的变量实例
2019/12/26 Python
浅析Python 序列化与反序列化
2020/08/05 Python
高级护理实习生自荐信
2013/09/28 职场文书
网络公司美工设计工作个人的自我评价
2013/11/03 职场文书
生物医学工程专业学生求职信范文分享
2013/12/14 职场文书
语文教学感言
2014/02/06 职场文书
个性与发展自我评价
2014/02/11 职场文书
预防传染病方案
2014/06/14 职场文书
租房协议书范例
2014/10/14 职场文书
技术员个人工作总结
2015/03/03 职场文书
宝宝满月祝酒词
2015/08/10 职场文书
商务英语邮件开头问候语
2015/11/10 职场文书
家庭教育培训学习心得体会
2016/01/14 职场文书
大学生就业指导课心得体会
2016/01/15 职场文书
创业计划书之酒厂
2019/10/14 职场文书
python爬虫之利用selenium模块自动登录CSDN
2021/04/22 Python