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 相关文章推荐
JS版网站风格切换实例代码
Oct 06 Javascript
深入理解JavaScript系列(13) This? Yes,this!
Jan 18 Javascript
javascript窗口宽高,鼠标位置,滚动高度(详细解析)
Nov 18 Javascript
利用JavaScript实现新闻滚动效果(实例代码)
Nov 27 Javascript
js获取当前地址 JS获取当前URL的示例代码
Feb 26 Javascript
js单词形式的运算符
May 06 Javascript
node.js请求HTTPS报错:UNABLE_TO_VERIFY_LEAF_SIGNATURE\的解决方法
Dec 18 Javascript
JavaScript中offsetWidth的bug及解决方法
May 17 Javascript
使用jQuery实现简单的tab框实例
Aug 22 jQuery
vue使用codemirror的两种用法
Aug 27 Javascript
Vue ElementUI实现:限制输入框只能输入正整数的问题
Jul 31 Javascript
react 路由Link配置详解
Nov 11 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.4以上版本GBK编码下htmlspecialchars输出为空问题解决方法汇总
2015/04/03 PHP
浅析iis7.5安装配置php环境
2015/05/10 PHP
PHP的压缩函数实现:gzencode、gzdeflate和gzcompress的区别
2016/01/27 PHP
JavaScript replace(rgExp,fn)正则替换的用法
2010/03/04 Javascript
为JavaScript添加重载函数的辅助方法
2010/07/04 Javascript
深入理解JavaScript系列(45):代码复用模式(避免篇)详解
2015/03/04 Javascript
实例讲解JS中setTimeout()的用法
2016/01/28 Javascript
轻松掌握JavaScript中的Math object数学对象
2016/05/26 Javascript
jQuery+ajax读取并解析XML文件的方法
2016/09/09 Javascript
JSON与String互转的实现方法(Javascript)
2016/09/27 Javascript
vue中的非父子间的通讯问题简单的实例代码
2017/07/19 Javascript
JavaScript实现滑动导航栏效果
2017/08/30 Javascript
Vue中mintui的field实现blur和focus事件的方法
2018/08/25 Javascript
vue+node实现图片上传及预览的示例方法
2018/11/22 Javascript
小程序封装路由文件和路由方法(5种全解析)
2019/05/26 Javascript
Vue+Element UI+vue-quill-editor富文本编辑器及插入图片自定义
2019/08/20 Javascript
详解vue中$nextTick和$forceUpdate的用法
2019/12/11 Javascript
JS实现放烟花效果
2020/03/10 Javascript
python写的一个squid访问日志分析的小程序
2014/09/17 Python
python实现2048小游戏
2015/03/30 Python
Python实现PS滤镜的万花筒效果示例
2018/01/23 Python
对python append 与浅拷贝的实例讲解
2018/05/04 Python
python中的句柄操作的方法示例
2019/06/20 Python
pygame实现弹球游戏
2020/04/14 Python
python获取天气接口给指定微信好友发天气预报
2020/12/28 Python
DC Shoes官网:美国滑板鞋和服饰品牌
2017/09/03 全球购物
中文师范生自荐信
2014/01/30 职场文书
安全伴我行演讲稿
2014/09/04 职场文书
贯彻落实“八项规定”思想汇报
2014/09/13 职场文书
英语四级考试作弊检讨书
2014/09/29 职场文书
电子商务实训报告总结
2014/11/05 职场文书
2014年办公室工作总结范文
2014/11/12 职场文书
2015年设计师个人工作总结
2015/04/25 职场文书
网络舆情信息简报
2015/07/21 职场文书
SQLServer 日期函数大全(小结)
2021/04/08 SQL Server
React 高阶组件HOC用法归纳
2021/06/13 Javascript