JS设置手机验证码60s等待实现代码

 更新时间:2017年06月14日 11:08:47   作者:OileDie  
本文给大家分享JS设置手机验证码60s等待实现代码,需要的朋友参考下吧

 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等待实现代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

相关文章

  • uniapp基础篇之上传图片的实战步骤

    uniapp基础篇之上传图片的实战步骤

    应用uni-app开发跨平台App项目时,上传图片、文档等资源功能需求十分常见,下面这篇文章主要给大家介绍了关于uniapp基础篇之上传图片的相关资料,需要的朋友可以参考下
    2022-12-12
  • JavaScript版TAB选项卡效果实例

    JavaScript版TAB选项卡效果实例

    tab选项卡效果就是当我指上或经过时就会显示这个选项卡下面的内容,下面我来给大家介绍一款纯js实现的TAB选项卡效果,有需要的朋友可以参考一下
    2013-08-08
  • JavaScript如何借用构造函数继承

    JavaScript如何借用构造函数继承

    这篇文章主要介绍了JavaScript如何借用构造函数继承,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2019-11-11
  • js原型链与继承解析(初体验)

    js原型链与继承解析(初体验)

    js原型链与继承是js中的重点,所以我们通过以下三个例子来进行详细的讲解。一起跟随小编过来看看吧,希望对大家有所帮助。
    2016-05-05
  • 详解自定义ajax支持跨域组件封装

    详解自定义ajax支持跨域组件封装

    本篇文章给大家详细分析了自定义ajax支持跨域组件封装相关的知识点,对此有兴趣的朋友参考学习下。
    2018-02-02
  • JS 在指定数组中随机取出N个不重复的数据

    JS 在指定数组中随机取出N个不重复的数据

    这篇文章主要介绍了JS 在指定数组中随机取出N个不重复数据的方法,需要的朋友可以参考下
    2014-06-06
  • canvas实现动态小球重叠效果

    canvas实现动态小球重叠效果

    在javascript运动系列中,详细介绍了各种运动,其中就包括碰壁运动。但是,如果用canvas去实现,却是另一种思路。本文将详细介绍canvas动态小球重叠效果。下面跟着小编一起来看下吧
    2017-02-02
  • 微信小程序自定义波浪组件使用方法详解

    微信小程序自定义波浪组件使用方法详解

    这篇文章主要为大家详细介绍了微信小程序自定义波浪组件的使用方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-09-09
  • layui 对弹窗 form表单赋值的实现方法

    layui 对弹窗 form表单赋值的实现方法

    今天小编就为大家分享一篇layui 对弹窗 form表单赋值的实现方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-09-09
  • js鼠标坐标获取常用的三个方法

    js鼠标坐标获取常用的三个方法

    这篇文章主要给大家介绍了js鼠标坐标获取常用的三个方法,在 JavaScript中当事件发生时获取鼠标的位置是件很重要的事件,需要的朋友可以参考下
    2023-09-09

最新评论