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动态创建标签示例代码
Jun 09 Javascript
JavaScript中计算网页中某个元素的位置
Jun 10 Javascript
jQuery插件支持同一页面被多次调用
Feb 14 Javascript
一起学写js Calender日历控件
Apr 14 Javascript
JavaScript 数组- Array的方法总结(推荐)
Jul 21 Javascript
jQuery layui常用方法介绍
Jul 25 Javascript
jQuery插件HighCharts绘制的基本折线图效果示例【附demo源码下载】
Mar 07 Javascript
JavaScript实现微信号随机切换代码
Mar 09 Javascript
JS回调函数原理与用法详解【附PHP回调函数】
Jul 20 Javascript
Vue CLI项目 axios模块前后端交互的使用(类似ajax提交)
Sep 01 Javascript
JS实现轮播图效果
Jan 11 Javascript
JavaScript 防篡改对象的用法示例
Apr 24 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环境配置之CGI、FastCGI、PHP-CGI、PHP-FPM、Spawn-FCGI比较?
2011/10/17 PHP
thinkPHP5.0框架安装教程
2017/03/25 PHP
基于Laravel5.4实现多字段登录功能方法示例
2017/08/11 PHP
PHP的简单跳转提示的实现详解
2019/03/14 PHP
PHP7原生MySQL数据库操作实现代码
2020/07/03 PHP
JavaScript面向对象之静态与非静态类
2010/02/03 Javascript
Js获取事件对象代码
2010/08/05 Javascript
juqery 学习之三 选择器 子元素与表单
2010/11/25 Javascript
开发中可能会用到的jQuery小技巧
2014/03/07 Javascript
JS+CSS实现可以凹陷显示选中单元格的方法
2015/03/02 Javascript
js判断手机系统是android还是ios
2017/03/07 Javascript
ES6学习笔记之Set和Map数据结构详解
2017/04/07 Javascript
vue+VeeValidate 校验范围实例详解(部分校验,全部校验)
2018/10/19 Javascript
vue搜索和vue模糊搜索代码实例
2019/05/07 Javascript
微信小程序自定义头部导航栏和导航栏背景图片 navigationStyle问题
2019/07/26 Javascript
jQuery实现中奖播报功能(让文本滚动起来) 简单设置数值即可
2020/03/20 jQuery
npm全局环境变量配置详解
2020/12/15 Javascript
Python计算程序运行时间的方法
2014/12/13 Python
Python端口扫描简单程序
2016/11/10 Python
python同步两个文件夹下的内容
2019/08/29 Python
Python Numpy库常见用法入门教程
2020/01/16 Python
Pycharm Git 设置方法
2020/09/15 Python
matplotlib常见函数之plt.rcParams、matshow的使用(坐标轴设置)
2021/01/05 Python
css3制作彩色边线3d立体按钮的示例(css3按钮)
2014/05/06 HTML / CSS
奥地利度假券的专家:we-are.travel
2019/04/10 全球购物
《藏戏》教学反思
2014/02/11 职场文书
小学生倡议书范文
2014/05/13 职场文书
会计专业自荐信
2014/06/03 职场文书
公共场所标语
2014/06/30 职场文书
应届生面试求职信
2014/07/02 职场文书
幼儿园六一活动总结
2014/08/27 职场文书
法人授权委托书样本
2014/09/19 职场文书
领导班子四风对照检查材料
2014/09/23 职场文书
第二批党的群众路线教育实践活动个人对照检查材料
2014/09/23 职场文书
2015年检验科工作总结
2015/04/27 职场文书
《酸的和甜的》教学反思
2016/02/18 职场文书