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控制div及网页相关属性的代码
Dec 19 Javascript
数组Array进行原型prototype扩展后带来的for in遍历问题
Feb 07 Javascript
按给定几率进行随机抽取的js代码
Dec 28 Javascript
JQuery获取样式中的background-color颜色值的问题
Aug 20 Javascript
jQuery中val()方法用法实例
Dec 25 Javascript
JQuery中DOM事件冒泡实例分析
Jun 13 Javascript
轻松学习jQuery插件EasyUI EasyUI创建树形网络(1)
Nov 30 Javascript
js CSS3实现卡牌旋转切换效果
Jul 04 Javascript
Angular模版驱动表单的使用总结
May 05 Javascript
js实现图片实时时钟
Jan 15 Javascript
js中火星坐标、百度坐标、WGS84坐标转换实现方法示例
Mar 02 Javascript
vue 实现锚点功能操作
Aug 10 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 类型转换函数intval
2009/06/20 PHP
PHP学习之输出字符串(echo,print,printf,print_r和var_dump)
2011/04/17 PHP
php设计模式 State (状态模式)
2011/06/26 PHP
php中配置文件操作 如config.php文件的读取修改等操作
2012/07/07 PHP
php实现跨域提交form表单的方法【2种方法】
2016/10/17 PHP
PHP如何实现阿里云短信sdk灵活应用在项目中的方法
2019/06/14 PHP
javaScript - 如何引入js代码
2021/03/09 Javascript
javascript 对象的定义方法
2007/01/10 Javascript
JavaScript 学习笔记(十二) dom
2010/01/21 Javascript
基于jQuery实现表格数据的动态添加与统计的代码
2011/01/31 Javascript
JavaScript中使用ActiveXObject操作本地文件夹的方法
2014/03/28 Javascript
JavaScript中操作Mysql数据库实例
2015/04/02 Javascript
AngularJS基础 ng-readonly 指令简单示例
2016/08/02 Javascript
浅谈JS继承_寄生式继承 &amp; 寄生组合式继承
2016/08/16 Javascript
Webpack打包慢问题的完美解决方法
2017/03/16 Javascript
Bootstrap模态框(Modal)实现过渡效果
2017/03/17 Javascript
AngularJS中下拉框的基本用法示例
2017/10/11 Javascript
vue对storejs获取的数据进行处理时遇到的几种问题小结
2018/03/20 Javascript
Angular动态绑定样式及改变UI框架样式的方法小结
2018/09/03 Javascript
[49:13]DOTA2上海特级锦标赛C组资格赛#1 OG VS LGD第一局
2016/02/27 DOTA
python smtplib模块发送SSL/TLS安全邮件实例
2015/04/08 Python
分析Python中解析构建数据知识
2018/01/20 Python
python issubclass 和 isinstance函数
2019/07/25 Python
pandas按行按列遍历Dataframe的几种方式
2019/10/23 Python
tensorflow实现对张量数据的切片操作方式
2020/01/19 Python
Ann Taylor官方网站:美国最大的女性产品制造商之一
2016/09/14 全球购物
Ben Sherman官方网站:英国男装品牌
2019/10/22 全球购物
给海归自荐信的建议
2013/12/13 职场文书
《草虫的村落》教学反思
2014/02/16 职场文书
《三峡》教学反思
2014/03/01 职场文书
出生公证委托书
2014/04/03 职场文书
爱心活动计划书
2014/04/26 职场文书
公司活动总结怎么写
2014/06/25 职场文书
2014年“世界无车日”活动方案
2014/09/21 职场文书
高中社区服务活动报告
2015/02/05 职场文书
Shell中的单中括号和双中括号的用法详解
2022/12/24 Servers