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实现表格中相同单元格合并示例代码
Jun 26 Javascript
jQuery使用post方法提交数据实例
Mar 25 Javascript
Javascript实现的简单右键菜单类
Sep 23 Javascript
JS验证邮件地址格式方法小结
Dec 01 Javascript
Js调用Java方法并互相传参的简单实例
Aug 11 Javascript
js通过指定下标或指定元素进行删除数组的实例
Jan 12 Javascript
详解JS中的this、apply、call、bind(经典面试题)
Sep 19 Javascript
jQuery实现判断上传图片类型和大小的方法示例
Apr 11 jQuery
浅谈vue中.vue文件解析流程
Apr 24 Javascript
原生js实现淘宝放大镜效果
Oct 28 Javascript
在vue项目中引用Antv G2,以饼图为例讲解
Oct 28 Javascript
element el-table表格的二次封装实现(附表格高度自适应)
Jan 19 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执行系统命令函数实例讲解
2021/03/03 PHP
刷新页面实现方式总结(HTML,ASP,JS)
2008/11/13 Javascript
用正则表达式 动态创建/增加css style script 兼容IE firefox
2009/03/10 Javascript
Script的加载方法小结
2011/01/12 Javascript
关于jQuery中.attr()和.prop()的问题探讨
2013/09/06 Javascript
javascript变量声明实例分析
2015/04/25 Javascript
javascript函数式编程实例分析
2015/04/25 Javascript
最原始的jQuery注册验证方式
2016/10/11 Javascript
JavaScript 中对象的深拷贝
2016/12/04 Javascript
ng-options和ng-checked在表单中的高级运用(推荐)
2017/01/21 Javascript
Node.js常用工具之util模块
2017/03/09 Javascript
IScroll那些事_当内容不足时下拉刷新的解决方法
2017/07/18 Javascript
vue登录路由验证的实现
2017/12/13 Javascript
vue.js 打包时出现空白页和路径错误问题及解决方法
2019/06/26 Javascript
使用微信SDK自定义分享的方法
2019/07/03 Javascript
在Django框架中设置语言偏好的教程
2015/07/27 Python
Python3使用requests包抓取并保存网页源码的方法
2016/03/15 Python
python中的迭代和可迭代对象代码示例
2017/12/27 Python
spark dataframe 将一列展开,把该列所有值都变成新列的方法
2019/01/29 Python
详解Python中namedtuple的使用
2020/04/27 Python
什么是python的列表推导式
2020/05/26 Python
Python读取图像并显示灰度图的实现
2020/12/01 Python
css3实现针线缝合效果(图解步骤)
2013/02/04 HTML / CSS
HTML5中使用postMessage实现Ajax跨域请求的方法
2016/04/19 HTML / CSS
斯巴达比赛商店:Spartan Race
2019/01/08 全球购物
大学四年的个人自我评价
2014/01/14 职场文书
英语自我评价范文
2014/01/24 职场文书
水利学院求职自荐书
2014/02/01 职场文书
致标枪运动员广播稿
2014/02/06 职场文书
双拥工作宣传标语
2014/06/26 职场文书
初中生散播谣言检讨书
2014/11/17 职场文书
2015年全国爱眼日活动小结
2015/02/27 职场文书
Nginx工作原理和优化总结。
2021/04/02 Servers
python中Tkinter 窗口之输入框和文本框的实现
2021/04/12 Python
业余无线电通联Q语
2022/02/18 无线电
Android Studio实现简易进制转换计算器
2022/05/20 Java/Android