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


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下申明对象的几种方法小结
Oct 02 Javascript
jQuery EasyUI API 中文文档 - DataGrid数据表格
Nov 17 Javascript
Extjs中RowExpander控件的默认展开问题示例探讨
Jan 24 Javascript
jQuery实现感应鼠标动画效果自动伸长的输入框实例
Feb 24 Javascript
jquery ajax分页插件的简单实现
Jan 27 Javascript
jquery操作select元素和option的实例代码
Feb 03 Javascript
AngularJs基于角色的前端访问控制的实现
Nov 07 Javascript
JavaScript实现经典排序算法之选择排序
Dec 28 Javascript
JavaScript的事件机制详解
Jan 17 Javascript
vue.js全局API之nextTick全面解析
Jul 07 Javascript
CSS3 动画卡顿性能优化的完美解决方案
Sep 20 Javascript
浅析Vue 防抖与节流的使用
Nov 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
实用函数3
2007/11/08 PHP
PHP常用函数小技巧
2008/09/11 PHP
PHP 编写的 25个游戏脚本
2009/05/11 PHP
php数组函数序列之array_splice() - 在数组任意位置插入元素
2011/11/07 PHP
解析php时间戳与日期的转换
2013/06/06 PHP
thinkphp视图模型查询提示ERR: 1146:Table 'db.pr_order_view' doesn't exist的解决方法
2014/10/30 PHP
关于laravel后台模板laravel-admin select框的使用详解
2019/10/03 PHP
JS 判断代码全收集
2009/04/28 Javascript
js 获取浏览器高度和宽度值(多浏览器)
2009/09/02 Javascript
js对象与打印对象分析比较
2013/04/23 Javascript
node.js适合游戏后台开发吗?
2014/09/03 Javascript
chrome浏览器当表单自动填充时如何去除浏览器自动添加的默认样式
2015/10/09 Javascript
使用jquery实现鼠标滑过弹出更多相关信息层附源码下载
2015/11/23 Javascript
JavaScript实战之带收放动画效果的导航菜单
2016/08/16 Javascript
nodejs根据ip数组在百度地图中进行定位
2017/03/06 NodeJs
基于Vue实现后台系统权限控制的示例代码
2017/08/29 Javascript
XMLHttpRequest对象_Ajax异步请求重点(推荐)
2017/09/28 Javascript
vue学习之mintui picker选择器实现省市二级联动示例
2017/10/12 Javascript
javascript回调函数详解
2018/02/06 Javascript
js+HTML5 canvas 实现简单的加载条(进度条)功能示例
2019/07/16 Javascript
js实现浏览器打印功能的示例代码
2020/07/15 Javascript
python k-近邻算法实例分享
2014/06/11 Python
Python的Flask框架中实现分页功能的教程
2015/04/20 Python
分析用Python脚本关闭文件操作的机制
2015/06/28 Python
轻松掌握python设计模式之访问者模式
2016/11/18 Python
解决python3中os.popen()出错的问题
2020/11/19 Python
html5实现输入框fixed定位在屏幕最底部兼容性
2020/07/03 HTML / CSS
Martinelli官方商店:西班牙皮鞋和高跟鞋品牌
2019/07/30 全球购物
捷克街头、运动和滑板一站式商店:BoardStar.cz
2019/10/06 全球购物
门卫工作岗位职责
2013/12/17 职场文书
新领导上任欢迎词
2014/01/13 职场文书
大学校运会广播稿
2014/02/03 职场文书
历史专业学生的自我评价
2014/02/28 职场文书
邀请书模板
2015/02/02 职场文书
安全教育第一课观后感
2015/06/17 职场文书
Python机器学习应用之工业蒸汽数据分析篇详解
2022/01/18 Python