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 相关文章推荐
JS继承--原型链继承和类式继承
Apr 08 Javascript
js格式化时间小结
Nov 03 Javascript
为什么JS中eval处理JSON数据要加括号
Apr 13 Javascript
javascript获取select标签选中的值
Jun 04 Javascript
原生js实现倒计时--2018
Feb 21 Javascript
js中删除数组中的某一元素实例(无下标时)
Feb 28 Javascript
mac上node.js环境的安装测试
Jul 03 Javascript
js统计页面上每个标签的数量实例代码
May 29 Javascript
微信小程序通过js实现瀑布流布局详解
Aug 28 Javascript
小程序中设置缓存过期的实现方法
Jan 14 Javascript
原生JS实现分页
Apr 19 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
手冲咖啡应该是现代精品咖啡店的必备选项吗?
2021/03/03 冲泡冲煮
PHP错误Parse error: syntax error, unexpected end of file in test.php on line 12解决方法
2014/06/23 PHP
PHP实现根据银行卡号判断银行
2015/04/29 PHP
PHP的Socket通信之UDP通信实例
2015/07/02 PHP
jquery全选/全不选/反选另一种实现方法(配合原生js)
2013/04/07 Javascript
JQuery for与each性能比较分析
2013/05/14 Javascript
JS中的数组的sort方法使用示例
2014/01/22 Javascript
js触发onchange事件的方法说明
2014/03/08 Javascript
JavaScript获取URL汇总
2015/06/08 Javascript
jQuery操作Table技巧大汇总
2016/01/23 Javascript
不能不知道的10个angularjs英文学习网站
2016/03/23 Javascript
JavaScript简单下拉菜单特效
2016/09/13 Javascript
Bootstrap模态框水平垂直居中与增加拖拽功能
2016/11/09 Javascript
JS实现留言板功能
2017/06/17 Javascript
cocos creator Touch事件应用(触控选择多个子节点的实例)
2017/09/10 Javascript
Koa日志中间件封装开发详解
2019/03/09 Javascript
[02:39]DOTA2英雄基础教程 天怒法师
2013/11/29 DOTA
[04:54]DOTA2 2017国际邀请赛:上届冠军WINGS采访短片
2017/08/09 DOTA
[56:42]VP vs RNG 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/17 DOTA
Python3 能振兴 Python的原因分析
2014/11/28 Python
Python字符串格式化输出方法分析
2016/04/13 Python
Python单向链表和双向链表原理与用法实例详解
2018/08/31 Python
python创建文件备份的脚本
2018/09/11 Python
tensorflow2.0保存和恢复模型3种方法
2020/02/03 Python
Python 面向对象部分知识点小结
2020/03/09 Python
解决python 执行sql语句时所传参数含有单引号的问题
2020/06/06 Python
一些关于python 装饰器的个人理解
2020/08/31 Python
python可视化 matplotlib画图使用colorbar工具自定义颜色
2020/12/07 Python
管理科学大学生求职信
2013/11/13 职场文书
跟单文员的岗位职责
2013/11/14 职场文书
清明节扫墓活动方案
2014/03/02 职场文书
党的群众教育实践活动实施方案
2014/06/12 职场文书
幼儿园大班开学寄语
2014/08/02 职场文书
新教师个人工作总结
2015/02/06 职场文书
电影复兴之路观后感
2015/06/02 职场文书
旅游安全责任协议书
2016/03/22 职场文书