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


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的使ListNav兼容中文首字拼音排序的实现代码
Jul 10 Javascript
jQuery实现返回顶部功能适合不支持js的浏览器
Aug 19 Javascript
如何利用JS通过身份证号获取当事人的生日、年龄、性别
Jan 22 Javascript
JavaScript中的时间处理小结
Feb 24 Javascript
基于jQuery实现淡入淡出效果轮播图
Jul 31 Javascript
微信小程序 详解页面跳转与返回并回传数据
Feb 13 Javascript
JavaScript 中Date对象的格式化代码方法汇总
Sep 06 Javascript
浅谈Node.js爬虫之网页请求模块
Jan 11 Javascript
Ionic学习日记实现验证码倒计时
Feb 08 Javascript
VUE 配置vue-devtools调试工具及安装方法
Sep 30 Javascript
vue elementUI 表单校验功能之数组多层嵌套
Jun 04 Javascript
基于vuex实现购物车功能
Jan 10 Vue.js
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 empty()与isset()区别的详细介绍
2013/06/17 PHP
PHP扩展安装方法步骤解析
2020/11/24 PHP
php常见的页面跳转方法汇总
2015/04/15 Javascript
JS获取屏幕高度的简单实现代码
2016/05/24 Javascript
原生JavaScript编写canvas版的连连看游戏
2016/05/29 Javascript
微信小程序 倒计时组件实现代码
2016/10/24 Javascript
js css自定义分页效果
2017/02/24 Javascript
Vue.js项目部署到服务器的详细步骤
2017/07/17 Javascript
微信小程序实现点击按钮移动view标签的位置功能示例【附demo源码下载】
2017/12/06 Javascript
vue 简单自动补全的输入框的示例
2018/03/12 Javascript
webpack vue项目开发环境局域网访问方法
2018/03/20 Javascript
使用vuex的state状态对象的5种方式
2018/04/19 Javascript
详解vue组件基础
2018/05/04 Javascript
详解Nodejs内存治理
2018/05/13 NodeJs
使用vue-router beforEach实现判断用户登录跳转路由筛选功能
2018/06/25 Javascript
JS实现的视频弹幕效果示例
2018/08/17 Javascript
ajaxfileupload.js实现上传文件功能
2019/04/19 Javascript
JavaScript队列结构Queue实现过程解析
2020/03/07 Javascript
[02:55]含熏伴清风,风行者至宝、屠夫身心及典藏宝瓶二展示
2020/09/08 DOTA
跟老齐学Python之玩转字符串(3)
2014/09/14 Python
Python内置函数之filter map reduce介绍
2014/11/30 Python
Python开发常用的一些开源Package分享
2015/02/14 Python
Python中的fileinput模块的简单实用示例
2015/07/09 Python
Python的numpy库中将矩阵转换为列表等函数的方法
2018/04/04 Python
Python任务调度模块APScheduler使用
2020/04/15 Python
解决python Jupyter不能导入外部包问题
2020/04/15 Python
基于Pyinstaller打包Python程序并压缩文件大小
2020/05/28 Python
python和C++共享内存传输图像的示例
2020/10/27 Python
关于逃课的检讨书
2014/01/23 职场文书
教师党员批评与自我批评
2014/10/15 职场文书
领导干部群众路线对照检查材料
2014/11/05 职场文书
建国大业观后感
2015/06/01 职场文书
小学音乐课教学反思
2016/02/18 职场文书
合作合同协议书
2016/03/21 职场文书
怎样评估创业计划书是否有可行性?
2019/08/07 职场文书
golang 实现并发求和
2021/05/08 Golang