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

相关文章

  • 关于js二维数组和多维数组的定义声明(详解)

    关于js二维数组和多维数组的定义声明(详解)

    下面小编就为大家带来一篇关于js二维数组和多维数组的定义声明(详解)。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-10-10
  • 微信小程序学习总结(四)事件与冒泡实例分析

    微信小程序学习总结(四)事件与冒泡实例分析

    这篇文章主要介绍了微信小程序学习总结(四)事件与冒泡,结合实例形式分析了微信小程序事件、冒泡、数据获取相关机制、原理与操作注意事项,需要的朋友可以参考下
    2020-06-06
  • js实现简易计算器小功能

    js实现简易计算器小功能

    这篇文章主要为大家详细介绍了js实现简易计算器小功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-11-11
  • js使用removeChild方法动态删除div元素

    js使用removeChild方法动态删除div元素

    本节为大家介绍了js使用removeChild方法动态删除div元素,需要的朋友可以参考下
    2014-08-08
  • JavaScript模板引擎应用场景及实现原理详解

    JavaScript模板引擎应用场景及实现原理详解

    这篇文章主要介绍了JavaScript模板引擎应用场景及实现原理,结合实例形式详细分析了javascript模版引擎的具体应用场景、实现原理、相关操作技巧与注意事项,需要的朋友可以参考下
    2018-12-12
  • Bootstrap组件(一)之菜单

    Bootstrap组件(一)之菜单

    本文主要给大家介绍bootstrap组件的知识,涉及到bootstrap, 组件, 字体图标, 上拉菜单的相关知识,非常具有参考借鉴价值,感兴趣的朋友一起学习吧
    2016-05-05
  • 不同js异步函数同步的实现方法

    不同js异步函数同步的实现方法

    下面小编就为大家带来一篇不同js异步函数同步的实现方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-05-05
  • Vuejs通过拖动改变元素宽度实现自适应

    Vuejs通过拖动改变元素宽度实现自适应

    这篇文章主要介绍了Vuejs通过拖动改变元素宽度实现自适应,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-09-09
  • js实现点击左右按钮轮播图片效果实例

    js实现点击左右按钮轮播图片效果实例

    这篇文章主要介绍了js实现点击左右按钮轮播图片效果的方法,涉及click事件相应、animate方法等使用技巧,需要的朋友可以参考下
    2015-01-01
  • Javascript使用uploadify来实现多文件上传

    Javascript使用uploadify来实现多文件上传

    本篇文章主要介绍了Javascript使用uploadify来实现多文件上传,具有一定的参考价值,有需要的可以了解一下。
    2016-11-11

最新评论