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 相关文章推荐
jQuery 获取对象 基本选择与层级
May 31 Javascript
Javascript创建自定义对象 创建Object实例添加属性和方法
Jun 04 Javascript
js截取字符串的两种方法及区别详解
Nov 05 Javascript
window.location.reload 刷新使用分析(去对话框)
Nov 11 Javascript
使用微信内置浏览器点击下拉框出现页面乱跳转现象(iphone),该怎么办
Jan 04 Javascript
jquery自定义右键菜单、全选、不连续选择
Mar 01 Javascript
Node.js DES加密的简单实现
Jul 07 Javascript
JavaScript获取URL参数的方法之一
Mar 24 Javascript
JS实现动态添加DOM节点和事件的方法示例
Apr 28 Javascript
详解Vue组件实现tips的总结
Nov 01 Javascript
关于vue中watch检测到不到对象属性的变化的解决方法
Feb 08 Javascript
jQuery实现高度灵活的表单验证功能示例【无UI】
Apr 30 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下实现折线图效果的代码
2007/04/28 PHP
PHP程序员常见的40个陋习,你中了几个?
2014/11/20 PHP
浅析PHP文件下载原理
2014/12/25 PHP
关于Yii中模型场景的一些简单介绍
2019/09/22 PHP
php实现映射操作实例详解
2019/10/02 PHP
jquery中输入验证中一个不错的效果
2010/08/21 Javascript
使用GruntJS链接与压缩多个JavaScript文件过程详解
2013/08/02 Javascript
JS过滤url参数特殊字符的实现方法
2013/12/24 Javascript
js和jquery中循环的退出和继续学习记录
2014/09/06 Javascript
PHP结合jQuery实现的评论顶、踩功能
2015/07/22 Javascript
zTree实现节点修改的实时刷新功能
2017/03/20 Javascript
vue-cli如何快速构建vue项目
2017/04/26 Javascript
基于Require.js使用方法(总结)
2017/10/26 Javascript
jquery层次选择器的介绍
2019/01/18 jQuery
angular4中引入echarts的方法示例
2019/01/29 Javascript
vue单页应用的内存泄露定位和修复问题小结
2019/08/02 Javascript
深入理解令牌认证机制(token)
2019/08/22 Javascript
vue 解决无法对未定义的值,空值或基元值设置反应属性报错问题
2020/07/31 Javascript
Python中模块与包有相同名字的处理方法
2017/05/05 Python
Python实现字典的遍历与排序功能示例
2017/12/23 Python
Python基于更相减损术实现求解最大公约数的方法
2018/04/04 Python
基于pandas将类别属性转化为数值属性的方法
2018/07/25 Python
python+selenium 定位到元素,无法点击的解决方法
2019/01/30 Python
python变量的作用域是什么
2020/05/26 Python
CSS3 Media Queries(响应式布局可以让你定制不同的分辨率和设备)
2013/06/06 HTML / CSS
html5借用repeating-linear-gradient实现一把刻度尺(ruler)
2019/09/09 HTML / CSS
The North Face北面法国官网:美国著名户外品牌
2019/11/01 全球购物
幼师专业毕业生自荐信
2013/09/29 职场文书
新闻专业个人求职信
2013/12/19 职场文书
单位提档介绍信
2014/01/17 职场文书
大学生的创业计划书就该这么写
2014/01/30 职场文书
保护环境倡议书500字
2014/05/19 职场文书
共产党员岗位承诺书
2014/05/29 职场文书
高中教师先进事迹材料
2014/08/22 职场文书
2014年业务工作总结
2014/11/17 职场文书
婚姻出轨保证书
2015/05/08 职场文书