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 相关文章推荐
cnblogs中在闪存中屏蔽某人的实现代码
Nov 14 Javascript
利用jquery的获取JS文件中的字符串内容
Feb 14 Javascript
使用javascript控制cookie显示和隐藏背景图
Feb 12 Javascript
详解AngularJS中的表格使用
Jun 16 Javascript
基于JavaScript怎么实现让歌词滚动播放
Nov 03 Javascript
jQuery mobile类库使用时加载导航历史的方法简介
Dec 04 Javascript
快速掌握Node.js事件驱动模型
Mar 21 Javascript
js绘制购物车抛物线动画
Nov 18 Javascript
JS移动端/H5同时选择多张图片上传并使用canvas压缩图片
Jun 20 Javascript
vue中实现滚动加载更多的示例
Nov 08 Javascript
浅谈VueJS SSR 后端绘制内存泄漏的相关解决经验
Dec 20 Javascript
微信小程序常用赋值方法小结
Apr 30 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
Mysql的常用命令
2006/10/09 PHP
PHP $_SERVER详解
2009/01/16 PHP
ionCube 一款类似zend的PHP加密/解密工具
2010/07/25 PHP
visual studio code 调试php方法(图文详解)
2017/09/15 PHP
php常用字符串长度函数strlen()与mb_strlen()用法实例分析
2019/06/25 PHP
PHP实现发送微博消息功能完整示例
2019/12/04 PHP
javascript控制frame,iframe的src属性代码
2009/12/31 Javascript
用html5 js实现点击一个按钮达到浏览器全屏效果
2014/05/28 Javascript
jQuery实现流动虚线框的方法
2015/01/29 Javascript
jQuery中$.click()无效问题分析
2015/01/29 Javascript
jQuery实现统计输入文字个数的方法
2015/03/11 Javascript
JS实现的数组去除重复数据算法小结
2017/11/17 Javascript
json 带斜杠时如何解析的实现
2019/08/12 Javascript
vue获取data数据改变前后的值方法
2019/11/07 Javascript
Angular 多模块项目构建过程
2020/02/13 Javascript
如何手动实现一个 JavaScript 模块执行器
2020/10/16 Javascript
Javascript柯里化实现原理及作用解析
2020/10/22 Javascript
解决vant title-active-color与title-inactive-color不生效问题
2020/11/03 Javascript
[02:59]2014DOTA2西雅图国际邀请赛 圆满落幕中国夺冠
2014/07/23 DOTA
[01:32]TI珍贵瞬间系列(一)
2020/08/26 DOTA
Python连接PostgreSQL数据库的方法
2016/11/28 Python
python实现unicode转中文及转换默认编码的方法
2017/04/29 Python
python如何生成网页验证码
2018/07/28 Python
Python获取Redis所有Key以及内容的方法
2019/02/19 Python
pandas 时间格式转换的实现
2019/07/06 Python
pymysql模块的使用(增删改查)详解
2019/09/09 Python
英国领先的NHS批准的在线药店:Pharmacy2U
2017/01/06 全球购物
南京软件公司的.net程序员笔试题
2014/08/31 面试题
人力资源专员自我评价怎么写
2013/09/19 职场文书
高职助产应届生自荐信
2013/09/24 职场文书
师范学院教师自荐书
2014/01/31 职场文书
项目工作说明书
2014/07/29 职场文书
机电一体化应届生求职信
2014/08/09 职场文书
总经理岗位职责
2015/02/04 职场文书
一小时学会TensorFlow2之基本操作2实例代码
2021/09/04 Python
Django+Nginx+uWSGI 定时任务的实现方法
2022/01/22 Python