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 相关文章推荐
javascript日期转换 时间戳转日期格式
Nov 05 Javascript
asp.net网站开发中用jquery实现滚动浏览器滚动条加载数据(类似于腾讯微博)
Mar 14 Javascript
jquery ui对话框实例代码
May 10 Javascript
javascript写的一个模拟阅读小说的程序
Apr 04 Javascript
一个支付页面DEMO附截图
Jul 22 Javascript
javaScript中定义类或对象的五种方式总结
Dec 04 Javascript
理解javascript中的闭包
Jan 11 Javascript
vue.js使用v-pre与v-html输出HTML操作示例
Jul 07 Javascript
微信小程序获取用户信息的两种方法wx.getUserInfo与open-data实例分析
May 03 Javascript
通过实例了解js函数中参数的传递
Jun 15 Javascript
vue 取出v-for循环中的index值实例
Nov 09 Javascript
javascript实现计算器功能
Mar 30 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
全国FM电台频率大全 - 13 福建省
2020/03/11 无线电
支持oicq头像的留言簿(二)
2006/10/09 PHP
php Smarty date_format [格式化时间日期]
2010/03/15 PHP
php入门学习知识点一 PHP与MYSql连接与查询
2011/07/14 PHP
ThinkPHP水印功能实现修复PNG透明水印并增加JPEG图片质量可调整
2014/11/05 PHP
php使用类继承解决代码重复的问题
2015/02/11 PHP
typecho插件编写教程(四):插件挂载
2015/05/28 PHP
php实现的微信红包算法分析(非官方)
2015/09/25 PHP
PHP利用pdo_odbc实现连接数据库示例【基于ThinkPHP5.1搭建的项目】
2019/05/13 PHP
[转]JS宝典学习笔记
2007/02/07 Javascript
Jquery中Ajax 缓存带来的影响的解决方法
2011/05/19 Javascript
.net,js捕捉文本框回车键事件的小例子(兼容多浏览器)
2013/03/11 Javascript
JavaScript中的对象序列化介绍
2014/12/30 Javascript
Node.js中的process.nextTick使用实例
2015/06/25 Javascript
兼容各大浏览器的JavaScript阻止事件冒泡代码
2015/07/09 Javascript
页面get请求 中文参数方法乱码问题的快速解决方法
2016/05/31 Javascript
jQuery中deferred对象使用方法详解
2016/07/14 Javascript
jQuery实现选项卡功能(两种方法)
2017/03/08 Javascript
ES6新特性之函数的扩展实例详解
2017/04/01 Javascript
jQuery复合事件结合toggle()方法的用法示例
2017/06/10 jQuery
微信小程序自定义select下拉选项框组件的实现代码
2018/08/28 Javascript
全面了解JavaScript的作用域链
2019/04/03 Javascript
vue组件命名和props命名代码详解
2019/09/01 Javascript
原生js实现贪食蛇小游戏的思路详解
2019/11/26 Javascript
原生js canvas实现鼠标跟随效果
2020/08/02 Javascript
基于vue项目设置resolves.alias: '@'路径并适配webstorm
2020/12/02 Vue.js
Python如何判断数独是否合法
2016/09/08 Python
Pycharm打开已有项目配置python环境的方法
2020/07/03 Python
中国高端鲜花第一品牌:roseonly(一生只送一人)
2017/02/12 全球购物
KIKO MILANO英国官网:意大利知名化妆品和护肤品品牌
2017/09/25 全球购物
介绍一下SQL Server里面的索引视图
2016/07/31 面试题
《美丽的小路》教学反思
2014/02/26 职场文书
农村葬礼主持词
2014/03/31 职场文书
无房证明范本
2014/09/17 职场文书
大队委员竞选稿
2015/11/20 职场文书
反四风问题学习心得体会
2016/01/22 职场文书