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 追加元素的方法如append、prepend、before
Jan 16 Javascript
javascript中setTimeout的问题解决方法
May 08 Javascript
10个很棒的jQuery代码片段
Sep 24 Javascript
JavaScript检测原始值、引用值、属性
Jun 20 Javascript
Javascript随机标签云代码实例
Jun 21 Javascript
jQuery模拟实现的select点击选择效果【附demo源码下载】
Nov 09 Javascript
jquery实现图片上传前本地预览
Apr 28 jQuery
详解Angular的8个主要构造块
Jun 20 Javascript
基于Vue组件化的日期联动选择器功能的实现代码
Nov 30 Javascript
js实现跟随鼠标移动的小球
Aug 26 Javascript
layui给下拉框、按钮状态、时间赋初始值的方法
Sep 10 Javascript
Node使用Nodemailer发送邮件的方法实现
Feb 24 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
地球防卫队:陪着奥特曼打小怪兽的人类力量 那些经典队服
2020/03/08 日漫
php摘要生成函数(无乱码)
2012/02/04 PHP
PHP利用Cookie设置用户30分钟未操作自动退出功能
2017/07/03 PHP
javascript+mapbar实现地图定位
2010/04/09 Javascript
JavaScript入门之事件、cookie、定时等
2011/10/21 Javascript
修改js Calendar日历控件 兼容IE9/谷歌/火狐
2013/01/04 Javascript
九种js弹出对话框的方法总结
2013/03/12 Javascript
纯JS实现五子棋游戏兼容各浏览器(附源码)
2013/04/24 Javascript
用html+css+js实现的一个简单的图片切换特效
2014/05/28 Javascript
js验证身份证号有效性并提示对应信息
2015/10/19 Javascript
js实现文字闪烁特效的方法
2015/12/17 Javascript
ES6新特性三: Generator(生成器)函数详解
2017/04/21 Javascript
jQuery Validate 无法验证 chosen-select元素的解决方法
2017/05/17 jQuery
Vue v2.4中新增的$attrs及$listeners属性使用教程
2018/01/08 Javascript
VUE在for循环里面根据内容值动态的加入class值的方法
2018/08/12 Javascript
详解easyui 切换主题皮肤
2019/04/04 Javascript
vue实现购物车结算功能
2020/06/18 Javascript
python 输出一个两行字符的变量
2009/02/05 Python
python实现linux下使用xcopy的方法
2015/06/28 Python
Python中Threading用法详解
2017/12/27 Python
Python实现的网页截图功能【PyQt4与selenium组件】
2018/07/12 Python
PyCharm配置mongo插件的方法
2018/11/30 Python
python之cv2与图像的载入、显示和保存实例
2018/12/05 Python
Python中pymysql 模块的使用详解
2019/08/12 Python
Python 利用OpenCV给照片换底色的示例代码
2020/08/03 Python
ivx平台开发之不用代码实现一个九宫格抽奖功能
2021/01/27 HTML / CSS
Skyscanner香港:机票比价, 平机票和廉价航空机票预订
2020/02/07 全球购物
总经理的岗位职责
2014/02/23 职场文书
财务管理专业毕业生求职信
2014/06/02 职场文书
机电一体化专业求职信
2014/07/22 职场文书
初中学习计划书范文
2014/09/15 职场文书
党员个人年度总结
2015/02/14 职场文书
大国崛起日本观后感
2015/06/02 职场文书
城南旧事读书笔记
2015/06/29 职场文书
技术入股合作协议书
2016/03/21 职场文书
vue的项目如何打包上线
2022/04/13 Vue.js