手机注册发送验证码倒计时的简单实例


Posted in Javascript onNovember 15, 2017

如下所示:

()这里用的是input做的点击发送验证码
<input type="number" class="input" name="mobile" placeholder="手机号" style="border: none"

<input class="hui_kuang"style="width: 30%;text-align: center;height: 42px"onclick="setTime(this)" value='获取验证码'>
<script>

//页面初始化获取倒计时数字(避免在倒计时时用户刷新浏览器导致倒计时归零)
 var $getCodeInput = $(".hui_kuang");
 var sessionCountdown = sessionStorage.getItem("countdown");
 if (!sessionCountdown) {
  $(".hui_kuang").val("获取验证码")
 } else {
  $(".hui_kuang").val("重新发送(" + sessionCountdown + ")");
  setCode($getCodeInput, sessionCountdown);
 }
 //获取验证码
 function setTime() {
  var remobile = $("#registForm input[name='mobile']").val();
  if (!remobile) {
   alert("请输入手机号码")
   return;

  }
  if (!(/^1[3|4|5|8][0-9]\d{4,8}$/.test(remobile))) {
   alert("请输入有效的手机号码")
   return;
  } else {
   setCode($getCodeInput, 60);
  }

 }
 //发送验证码倒计时
 function setCode($getCodeInput, countdown) {
  if (countdown == 0) {
   $getCodeInput.attr('disabled', false);
//   $getCodeInput.removeAttribute("disabled");
   $getCodeInput.val("获取验证码");
   sessionStorage.removeItem("countdown");
   return;
  } else {
   $getCodeInput.attr('disabled', true);
   $getCodeInput.val("重新发送(" + countdown + ")");
   countdown--;
  }
  sessionStorage.setItem("countdown", countdown);
  window.setTimeout(function () {
   setCode($getCodeInput, countdown);
  }, 1000);
 }
</script>

以上这篇手机注册发送验证码倒计时的简单实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JQuery 学习笔记 选择器之六
Jul 23 Javascript
jquery中插件实现自动添加用户的具体代码
Nov 15 Javascript
js浏览器本地存储store.js介绍及应用
May 13 Javascript
javascript实现动态改变层大小的方法
May 14 Javascript
js绘制圆形和矩形的方法
Aug 05 Javascript
JS 实现导航菜单中的二级下拉菜单的几种方式
Oct 31 Javascript
JS对大量数据进行多重过滤的方法
Nov 04 Javascript
Vue中render方法的使用详解
Jan 26 Javascript
使用vue-router完成简单导航功能【推荐】
Jun 28 Javascript
微信小程序实现签到功能
Oct 31 Javascript
小程序测试后台服务的方法(ngrok)
Mar 08 Javascript
Vue的Options用法说明
Aug 14 Javascript
js导出Excel表格超出26位英文字符的解决方法ES6
Nov 15 #Javascript
bootstrap paginator分页插件的两种使用方式实例详解
Nov 14 #Javascript
JavaScript实现为事件句柄绑定监听函数的方法分析
Nov 14 #Javascript
JavaScript函数绑定用法实例分析
Nov 14 #Javascript
cordova入门基础教程及使用中遇到的一些问题总结
Nov 14 #Javascript
JS实现获取汉字首字母拼音、全拼音及混拼音的方法
Nov 14 #Javascript
JS中图片压缩的方法小结
Nov 14 #Javascript
You might like
资料注册后发信小技巧
2006/10/09 PHP
javascript 获取select下拉列表值的代码
2009/09/07 Javascript
JavaScript闭包 懂不懂由你反正我是懂了
2011/10/21 Javascript
checkbox全选所涉及到的知识点介绍
2013/12/31 Javascript
jquery使用slideDown实现模块缓慢拉出效果的方法
2015/03/27 Javascript
jquery实现仿新浪微博带动画效果弹出层代码(可关闭、可拖动)
2015/10/12 Javascript
利用AJAX实现WordPress中的文章列表及评论的分页功能
2016/05/17 Javascript
Javascript中引用类型传递的知识点小结
2017/03/06 Javascript
javascript实现二叉树遍历的代码
2017/06/08 Javascript
简述Vue中容易被忽视的知识点
2019/12/09 Javascript
js点击事件的执行过程实例分析【冒泡与捕获】
2020/04/11 Javascript
[47:53]DOTA2上海特级锦标赛主赛事日 - 1 败者组第一轮#2COL VS Spirit
2016/03/02 DOTA
[39:08]完美世界DOTA2联赛PWL S3 LBZS vs CPG 第一场 12.12
2020/12/16 DOTA
python中合并两个文本文件并按照姓名首字母排序的例子
2014/04/25 Python
python之wxPython菜单使用详解
2014/09/28 Python
用Python制作简单的朴素基数估计器的教程
2015/04/01 Python
Python中使用PyQt把网页转换成PDF操作代码实例
2015/04/23 Python
详细解析Python中的变量的数据类型
2015/05/13 Python
python简单实现旋转图片的方法
2015/05/30 Python
Flask解决跨域的问题示例代码
2018/02/12 Python
centos 安装python3.6环境并配置虚拟环境的详细教程
2018/02/22 Python
Python读取properties配置文件操作示例
2018/03/29 Python
对python的unittest架构公共参数token提取方法详解
2018/12/17 Python
详解从Django Rest Framework响应中删除空字段
2019/01/11 Python
python+numpy实现的基本矩阵操作示例
2019/07/19 Python
Anaconda配置pytorch-gpu虚拟环境的图文教程
2020/04/16 Python
python thrift 实现 单端口多服务的过程
2020/06/08 Python
欧舒丹澳洲版:L’OCCITANE
2017/07/17 全球购物
出生医学证明样本
2014/01/17 职场文书
《自选商场》教学反思
2014/02/14 职场文书
市场营销大学生职业规划书
2014/02/25 职场文书
数控专业毕业生自荐信范文
2014/03/04 职场文书
聘任书的写作格式及范文
2014/03/29 职场文书
员工保密协议范本,您一定得收藏!很有用!
2019/08/08 职场文书
如何在Mac上通过docker配置PHP开发环境
2021/05/29 PHP
Golang数据类型和相互转换
2022/04/12 Golang