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


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 相关文章推荐
yepnope.js 异步加载资源文件
Sep 08 Javascript
jQuery EasyUI API 中文文档 - PropertyGrid属性表格
Nov 18 Javascript
js replace 与replaceall实例用法详解
Aug 03 Javascript
js 跳出页面的frameset框架示例介绍
Dec 23 Javascript
通过pjax实现无刷新翻页(兼容新版jquery)
Jan 31 Javascript
js事件监听器用法实例详解
Jun 01 Javascript
BootstrapValidator超详细教程(推荐)
Dec 07 Javascript
JavaScript设计模式之职责链模式应用示例
Aug 07 Javascript
vue里input根据value改变背景色的实例
Sep 29 Javascript
微信小程序实现搜索指定景点周边美食、酒店
May 18 Javascript
微信小程序3种位置API的使用方法详解
Aug 05 Javascript
uniapp 微信小程序 自定义tabBar 导航
Apr 22 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
删除及到期域名的查看(抢域名必备哦)
2008/05/14 PHP
php实现的操作excel类详解
2016/01/15 PHP
laravel中命名路由的使用方法
2017/02/24 PHP
PHP如何搭建百度Ueditor富文本编辑器
2018/09/21 PHP
ie focus bug 解决方法
2009/09/03 Javascript
js 弹出框 替代浏览器的弹出框
2010/10/29 Javascript
JS画线(实例代码)
2013/11/20 Javascript
JavaScript创建一个object对象并操作对象属性的用法
2015/03/23 Javascript
js鼠标单击和双击事件冲突问题的快速解决方法
2016/07/11 Javascript
微信小程序 实现列表项滑动显示删除按钮的功能
2017/04/13 Javascript
vue实现全选、反选功能
2020/11/17 Javascript
JavaScript:ES2019 的新特性(译)
2019/08/08 Javascript
Vue filter 过滤当前时间 实现实时更新效果
2019/12/20 Javascript
[54:10]Spirit vs NB Supermajor小组赛 A组败者组决赛 BO3 第一场 6.2
2018/06/03 DOTA
python实现的各种排序算法代码
2013/03/04 Python
python通过线程实现定时器timer的方法
2015/03/16 Python
Python使用dis模块把Python反编译为字节码的用法详解
2016/06/14 Python
Python 3中的yield from语法详解
2017/01/18 Python
python 数据的清理行为实例详解
2017/07/12 Python
Python2随机数列生成器简单实例
2017/09/04 Python
详解Selenium+PhantomJS+python简单实现爬虫的功能
2019/07/14 Python
Flask框架学习笔记之使用Flask实现表单开发详解
2019/08/12 Python
pytorch 中的重要模块化接口nn.Module的使用
2020/04/02 Python
英国的屈臣氏:Boots博姿
2017/12/23 全球购物
以实惠的价格提供高品质的时尚:Newchic
2018/01/18 全球购物
芬兰设计商店美国:Finnish Design Shop US
2019/03/25 全球购物
人事档案接收函
2014/01/12 职场文书
教师学习培训邀请函
2014/02/04 职场文书
业务内勤岗位职责
2014/04/30 职场文书
行政监察建议书
2014/05/19 职场文书
电子商务专业求职信
2014/07/10 职场文书
2014年学校安全工作总结
2014/11/13 职场文书
英文自荐信范文
2015/03/25 职场文书
追讨欠款律师函
2015/05/27 职场文书
小程序实现悬浮按钮的全过程记录
2021/10/16 HTML / CSS
游戏《东方异文石:爱亚利亚黎明》正式版发布
2022/04/03 其他游戏