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和jquery获取各种屏幕的宽度和高度的代码
Aug 02 Javascript
Js判断参数(String,Array,Object)是否为undefined或者值为空
Nov 04 Javascript
jquery实现用户打分评分特效
May 28 Javascript
jQuery封装的tab选项卡插件分享
Jun 16 Javascript
jquery图片滚动放大代码分享(2)
Aug 28 Javascript
深入浅析react native es6语法
Dec 09 Javascript
React Native实现简单的登录功能(推荐)
Sep 19 Javascript
js实现带进度条提示的多视频上传功能
Dec 13 Javascript
12条写出高质量JS代码的方法
Jan 07 Javascript
vue如何通过id从列表页跳转到对应的详情页
May 01 Javascript
jQuery操作attr、prop、val()/text()/html()、class属性
May 23 jQuery
angula中使用iframe点击后不执行变更检测的问题
May 10 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 不错的学习资料
2009/02/06 PHP
一个PHP实现的轻量级简单爬虫
2015/07/08 PHP
PHP的压缩函数实现:gzencode、gzdeflate和gzcompress的区别
2016/01/27 PHP
PHP简单读取PDF页数的实现方法
2016/07/21 PHP
JQuery给元素添加/删除节点比如select
2013/04/02 Javascript
javascript:void(0)使用探讨
2013/08/27 Javascript
js菜单点击显示或隐藏效果的简单实例
2014/01/13 Javascript
jQuery中removeData()方法用法实例
2014/12/27 Javascript
jquery中ajax使用error调试错误的方法
2015/02/08 Javascript
JS制作简单的三级联动
2015/03/18 Javascript
jQuery中closest和parents的区别分析
2015/05/07 Javascript
基于Jquery+div+css实现弹出登录窗口(代码超简单)
2015/10/27 Javascript
jquery自定义插件——window的实现【示例代码】
2016/05/06 Javascript
AngularJS 服务详细讲解及示例代码
2016/08/17 Javascript
不间断循环滚动效果的实例代码(必看篇)
2016/10/08 Javascript
Bootstrap CSS布局之表单
2016/12/17 Javascript
webpack打包并将文件加载到指定的位置方法
2018/02/22 Javascript
使用Vue制作图片轮播组件思路详解
2018/03/21 Javascript
JS实现的冒泡排序,快速排序,插入排序算法示例
2019/03/02 Javascript
npm全局环境变量配置详解
2020/12/15 Javascript
在Linux下使用Python的matplotlib绘制数据图的教程
2015/06/11 Python
通过数据库对Django进行删除字段和删除模型的操作
2015/07/21 Python
python 读取excel文件生成sql文件实例详解
2017/05/12 Python
Anaconda入门使用总结
2018/04/05 Python
Python编程深度学习绘图库之matplotlib
2018/12/28 Python
python递归下载文件夹下所有文件
2019/08/31 Python
Python3 翻转二叉树的实现
2019/09/30 Python
django数据模型(Model)的字段类型解析
2019/12/25 Python
python GUI库图形界面开发之PyQt5打印控件QPrinter详细使用方法与实例
2020/02/28 Python
如何配置关联Python 解释器 Anaconda的教程(图解)
2020/04/30 Python
python和js交互调用的方法
2020/06/23 Python
军训的自我鉴定
2013/12/10 职场文书
审计主管岗位职责
2014/01/31 职场文书
会计电算化应届生自荐信
2014/02/25 职场文书
创建省级文明单位实施方案
2014/02/27 职场文书
用Python简陋模拟n阶魔方
2021/04/17 Python