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 相关文章推荐
Javascript调试工具(下载)
Jan 09 Javascript
国外Lightbox v2.03.3 最新版 下载
Oct 17 Javascript
JS的反射问题
Apr 07 Javascript
jQuery大于号(&gt;)选择器的作用解释
Jan 13 Javascript
JavaScript中操作Mysql数据库实例
Apr 02 Javascript
javascript如何实现暂停功能
Nov 06 Javascript
JS检测页面中哪个HTML标签触发点击事件的方法
Jun 17 Javascript
js实现table添加行tr、删除行tr、清空行tr的简单实例
Oct 15 Javascript
vue基于Vue2.0和高德地图的地图组件实例
Apr 28 Javascript
vue缓存的keepalive页面刷新数据的方法
Apr 23 Javascript
layui实现数据表格table分页功能(ajax异步)
Jul 27 Javascript
vue实现导航标题栏随页面滚动渐隐渐显效果
Mar 12 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脚本的10个技巧(6)
2006/10/09 PHP
php摘要生成函数(无乱码)
2012/02/04 PHP
php 操作调试的方法
2012/07/12 PHP
PHP daddslashes 使用方法介绍
2012/10/26 PHP
php strrpos()与strripos()函数
2013/08/31 PHP
php查询操作实现投票功能
2016/05/09 PHP
php面向对象之反射功能与用法分析
2017/03/29 PHP
php使用curl实现ftp文件下载功能
2017/05/16 PHP
从QQ网站中提取的纯JS省市区三级联动菜单
2013/12/25 Javascript
JS去除字符串两端空格的简单实例
2013/12/27 Javascript
自己用jQuery写了一个图片的马赛克消失效果
2014/05/04 Javascript
Node.js服务器环境下使用Mock.js拦截AJAX请求的教程
2016/05/23 Javascript
详解JavaScript中this关键字的用法
2016/05/26 Javascript
JavaScript常见的五种数组去重的方式
2016/12/15 Javascript
详解JavaScript中js对象与JSON格式字符串的相互转换
2017/02/14 Javascript
Vue的实例、生命周期与Vue脚手架(vue-cli)实例详解
2017/12/27 Javascript
微信小程序登录换取token的教程
2018/05/31 Javascript
快速解决vue在ios端下点击响应延时的问题
2018/08/27 Javascript
JavaScript中七种流行的开源机器学习框架
2018/10/11 Javascript
详解vue 不同环境配置不同的打包命令
2019/04/07 Javascript
vue 虚拟DOM的原理
2020/10/03 Javascript
[57:16]2014 DOTA2华西杯精英邀请赛 5 25 LGD VS VG第二场
2014/05/26 DOTA
[03:40]DOTA2亚洲邀请赛小组赛第二日 赛事回顾
2015/01/31 DOTA
Python open读写文件实现脚本
2008/09/06 Python
Linux下用Python脚本监控目录变化代码分享
2015/05/21 Python
深入浅析python继承问题
2016/05/29 Python
python字符串,数值计算
2016/10/05 Python
使用selenium模拟登录解决滑块验证问题的实现
2019/05/10 Python
python常用函数与用法示例
2019/07/02 Python
pycharm无法导入本地模块的解决方式
2020/02/12 Python
卡西欧G-SHOCK英国官网: 防水防震手表
2018/01/08 全球购物
大学生收银员求职信分享
2014/01/02 职场文书
元旦标语大全
2014/10/09 职场文书
车间统计员岗位职责
2015/04/14 职场文书
uniapp 微信小程序 自定义tabBar 导航
2022/04/22 Javascript
Nginx如何限制IP访问只允许特定域名访问
2022/07/23 Servers