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


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 相关文章推荐
JavaScript 动态将数字金额转化为中文大写金额
May 14 Javascript
javascript 限制输入脚本大全
Nov 03 Javascript
js简单的弹出框有关闭按钮
May 05 Javascript
jQuery给多个不同元素添加class样式的方法
Mar 26 Javascript
jquery实现顶部向右伸缩的导航区域代码
Sep 02 Javascript
JS不用正则验证输入的字符串是否为空(包含空格)的实现代码
Jun 14 Javascript
Highcharts学习之坐标轴
Aug 02 Javascript
使用jquery.qrcode.js生成二维码插件
Oct 17 Javascript
从零学习node.js之express入门(六)
Feb 25 Javascript
详解微信小程序实现跑马灯效果(附完整代码)
Apr 29 Javascript
vuex根据不同的用户权限展示不同的路由列表功能
Sep 20 Javascript
浅谈TypeScript 索引签名的理解
Oct 16 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
PHP生成迅雷、快车、旋风等软件的下载链接代码实例
2014/05/12 PHP
ThinkPHP查询中的魔术方法简述
2014/06/25 PHP
JavaScript 学习笔记一些小技巧
2010/03/28 Javascript
jQuery1.6 使用方法一
2011/11/23 Javascript
GridView中获取被点击行中的DropDownList和TextBox中的值
2013/07/18 Javascript
解决json日期格式问题的3种方法
2014/02/02 Javascript
javascript实现iframe框架延时加载的方法
2014/10/30 Javascript
基于jquery固定于顶部的导航响应浏览器滚动条事件
2014/11/02 Javascript
jQuery源码解读之removeClass()方法分析
2015/02/20 Javascript
利用JS提交表单的几种方法和验证(必看篇)
2016/09/17 Javascript
jQuery中$.ajax()方法参数解析
2016/10/22 Javascript
在js中做数字字符串补0(js补零)
2017/03/25 Javascript
Vue实现动态显示textarea剩余字数
2017/05/22 Javascript
深入浅析Node环境和浏览器的区别
2018/08/14 Javascript
vue form 表单提交后刷新页面的方法
2018/09/04 Javascript
layuiAdmin循环遍历展示商品图片列表的方法
2019/09/16 Javascript
微信小程序服务器日期格式化问题
2020/01/07 Javascript
js实现简单的打印表格
2020/01/15 Javascript
[01:14]2014DOTA2展望TI 剑指西雅图newbee战队专访
2014/06/30 DOTA
python进阶教程之循环相关函数range、enumerate、zip
2014/08/30 Python
Python3 Random模块代码详解
2017/12/04 Python
在mac下查找python包存放路径site-packages的实现方法
2018/11/06 Python
python的一些加密方法及python 加密模块
2019/07/11 Python
在Django的View中使用asyncio的方法
2019/07/12 Python
Django 静态文件配置过程详解
2019/07/23 Python
Opencv求取连通区域重心实例
2020/06/04 Python
canvas学习笔记之绘制简单路径
2019/01/28 HTML / CSS
Linux不知道文件后缀名怎么判断文件类型
2014/08/21 面试题
校庆团日活动总结
2014/08/28 职场文书
狮子林导游词
2015/02/03 职场文书
幼儿园教师师德表现自我评价
2015/03/05 职场文书
2015年简历自我评价范文
2015/03/11 职场文书
spring cloud 配置中心客户端启动遇到的问题
2021/09/25 Java/Android
如何通过一篇文章了解Python中的生成器
2022/04/02 Python
零基础学java之循环语句的使用
2022/04/10 Java/Android
SpringBoot详解整合Redis缓存方法
2022/07/15 Java/Android