JS设置手机验证码60s等待实现代码


Posted in Javascript onJune 14, 2017

 html:

<div class="input">
  <input class="tel input_all" type="text" name="tel" placeholder="手机号">
</div>
<div class="input huoqu">
  <input class="yzm input_all" type="text" name="code" placeholder="验证码">
  <button class="btn1">获取验证码</button>
</div>
<span class="error"></span>

JavaScript:

var btn1 = document.querySelector('.btn1');
var tel = document.querySelector('.tel');
var error = document.querySelector('.error');
var time = 60;
btn1.onclick = function(){
  var name = tel.value;  
  if (name == "") {
    error.innerHTML='手机号不能为空!';
    return;
  } 
  else {
    if (!(/^1[3|4|5|7|8]\d{9}$/.test(name))) {
      error.innerHTML='手机号格式有误.';
       return;
    }
  }
  var timer = setInterval(function(){    
    time--;
    btn1.innerHTML = time + "秒";
    btn1.disabled = true;
    if (time==0) {
      time = 60;
      clearInterval(timer); 
      btn1.innerHTML = "获取验证码";
      btn1.disabled = false;
    }
  },1000);
}

以上所述是小编给大家介绍的JS设置手机验证码60s等待实现代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
JQuery 图片延迟加载并等比缩放插件
Nov 09 Javascript
学习JavaScript的最佳方法分享
Oct 21 Javascript
JavaScript 用Node.js写Shell脚本[译]
Sep 20 Javascript
jQuery表格插件ParamQuery简单使用方法示例
Dec 05 Javascript
javascript快速排序算法详解
Sep 17 Javascript
探究Javascript模板引擎mustache.js使用方法
Jan 26 Javascript
超实用的JavaScript表单代码段
Feb 26 Javascript
jQuery 常用代码集锦(必看篇)
May 16 Javascript
AngularJS中如何使用echart插件示例详解
Oct 26 Javascript
angular select 默认值设置方法
Jun 23 Javascript
AngularJS ng-repeat指令及Ajax的应用实例分析
Jul 06 Javascript
通过实例解析javascript Date对象属性及方法
Nov 04 Javascript
jQuery ajax动态生成table功能示例
Jun 14 #jQuery
使用requirejs模块化开发多页面一个入口js的使用方式
Jun 14 #Javascript
vue-loader教程介绍
Jun 14 #Javascript
JS中mouseup事件丢失的原因与解决办法
Jun 14 #Javascript
Vue2.0 从零开始_环境搭建操作步骤
Jun 14 #Javascript
jQuery.form.js的使用详解
Jun 14 #jQuery
ExtJs异步无法向外传值和赋值的完美解决办法
Jun 14 #Javascript
You might like
需要使用php模板的朋友必看的很多个顶级PHP模板引擎比较分析
2008/05/26 PHP
php中的动态调用实例分析
2015/01/07 PHP
PHP使用内置dir类实现目录遍历删除
2015/03/31 PHP
tp5实现微信小程序多图片上传到服务器功能
2018/07/16 PHP
超级酷和最实用的jQuery实例收集(20个)
2010/04/21 Javascript
javascript Window及document对象详细整理
2011/01/12 Javascript
dojo随手记 gird组件引用
2011/02/24 Javascript
JS获取鼠标坐标的实例方法
2013/07/18 Javascript
图片放大镜jquery.jqzoom.js使用实例附放大镜图标
2014/06/19 Javascript
JavaScript中匿名、命名函数的性能测试
2014/09/04 Javascript
简单实现JS对dom操作封装
2015/12/02 Javascript
JS Canvas定时器模拟动态加载动画
2016/09/17 Javascript
js继承实现方法详解
2016/12/16 Javascript
js实现随机数字字母验证码
2017/06/19 Javascript
JS去掉字符串中所有的逗号
2017/10/18 Javascript
如何安装控制器JavaScript生成插件详解
2018/10/21 Javascript
前端vue+elementUI如何实现记住密码功能
2020/09/20 Javascript
Python 文件操作实现代码
2009/10/07 Python
python3.4用循环往mysql5.7中写数据并输出的实现方法
2017/06/20 Python
Python用sndhdr模块识别音频格式详解
2018/01/11 Python
Python字符串的一些操作方法总结
2019/06/10 Python
Python 切分数组实例解析
2019/11/07 Python
python 如何设置守护进程
2020/10/29 Python
Canvas 文本填充线性渐变的使用详解
2020/06/22 HTML / CSS
使用HTML和CSS实现的标签云效果(附demo)
2021/02/03 HTML / CSS
介绍一下如何利用路径遍历进行攻击及如何防范
2014/01/19 面试题
财务管理专业毕业生求职信范文
2013/09/21 职场文书
计算机专业个人求职信范例
2013/09/23 职场文书
父亲生日宴会答谢词
2014/01/10 职场文书
中学生旷课检讨书500字
2014/10/29 职场文书
2014年药店店长工作总结
2014/11/17 职场文书
源码解读Spring-Integration执行过程
2021/06/11 Java/Android
python析构函数用法及注意事项
2021/06/22 Python
Python Pandas 删除列操作
2022/03/16 Python
Python+Tkinter打造签名设计工具
2022/04/01 Python
用PYTHON去计算88键钢琴的琴键频率和音高
2022/04/10 Python