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实现的自定义的对话框的实现代码
Mar 21 Javascript
基于jQuery的message插件实现右下角弹出消息框
Jan 11 Javascript
jQuery中的height innerHeight outerHeight区别示例介绍
Jun 15 Javascript
javascript模拟评分控件实现方法
May 13 Javascript
jquery带翻页动画的电子杂志代码分享
Aug 21 Javascript
JS+CSS实现的日本门户网站经典选项卡导航效果
Sep 27 Javascript
深入理解jQuery 事件处理
Jun 14 Javascript
jquery实现的回旋滚动效果完整实例【附demo源码下载】
Sep 20 Javascript
JS实现最简单的冒泡排序算法
Feb 15 Javascript
React-native桥接Android原生开发详解
Jan 17 Javascript
vue 实现把路由单独分离出来
Aug 13 Javascript
jquery插件实现图片悬浮
Apr 16 jQuery
微信小程序渲染性能调优小结
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中理解print EOT分界符和echo EOT的用法区别小结
2010/02/21 PHP
对象失去焦点时自己动提交数据的实现代码
2012/11/06 PHP
详解Laravel视图间共享数据与视图Composer
2016/08/04 PHP
php实现批量上传数据到数据库(.csv格式)的案例
2017/06/18 PHP
JS Excel读取和写入操作(模板操作)实现代码
2010/04/11 Javascript
关于JQuery($.load)事件的用法和分析
2013/04/09 Javascript
JS通过相同的name进行表格求和代码
2013/08/18 Javascript
用Js实现的动态增加表格示例自己写的
2013/10/21 Javascript
IE下双击checkbox反应延迟问题的解决方法
2014/03/27 Javascript
JavaScript检查某个function是否是原生代码的方法
2014/08/20 Javascript
jquery.cookie.js用法实例详解
2015/12/25 Javascript
javascript的正则匹配方法学习
2016/02/24 Javascript
微信小程序  audio音频播放详解及实例
2016/11/02 Javascript
Angular.js 4.x中表单Template-Driven Forms详解
2017/04/25 Javascript
Bootstrap fileinput文件上传组件使用详解
2017/06/06 Javascript
详解基于 axios 的 Vue 项目 http 请求优化
2017/09/04 Javascript
jQuery实现鼠标移入移出事件切换功能示例
2018/09/06 jQuery
浅谈vue生命周期共有几个阶段?分别是什么?
2020/08/07 Javascript
JS指定音频audio在某个时间点进行播放
2020/11/28 Javascript
Python的Django框架中使用SQLAlchemy操作数据库的教程
2016/06/02 Python
python+selenium打印当前页面的titl和url方法
2018/06/22 Python
对python的unittest架构公共参数token提取方法详解
2018/12/17 Python
对python3.4 字符串转16进制的实例详解
2019/06/12 Python
对Django url的几种使用方式详解
2019/08/06 Python
Python迭代器模块itertools使用原理解析
2019/12/11 Python
利用matplotlib实现根据实时数据动态更新图形
2019/12/13 Python
python烟花效果的代码实例
2020/02/25 Python
Under Armour澳大利亚官网:美国知名的高端功能性运动品牌
2018/02/22 全球购物
世界汽车零件:World Car Parts
2019/09/04 全球购物
Internal修饰符有什么含义
2013/07/10 面试题
投标单位介绍信
2014/01/09 职场文书
机电一体化应届生求职信范文
2014/01/24 职场文书
高三学习决心书
2014/03/11 职场文书
小学生2014国庆节演讲稿:祖国在我心中
2014/09/21 职场文书
小学五年级班主任工作经验交流材料
2015/11/02 职场文书
我的暑假生活作文(五年级)范文
2019/08/07 职场文书