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


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 相关文章推荐
10个基于Jquery的幻灯片插件教程
Oct 29 Javascript
为EasyUI的Tab标签添加右键菜单的方法
Jul 14 Javascript
JQuery的Ajax跨域请求原理概述及实例
Apr 26 Javascript
js 去掉空格实例 Trim() LTrim() RTrim()
Jan 07 Javascript
js 判断js函数、变量是否存在的简单示例代码
Mar 04 Javascript
jQuery animate easing使用方法图文详解
Jun 17 Javascript
AngularJS表达式讲解及示例代码
Aug 16 Javascript
js图片上传前预览功能(兼容所有浏览器)
Aug 24 Javascript
使用JS实现图片展示瀑布流效果的实例代码
Sep 12 Javascript
javascript实现数字配对游戏的实例讲解
Dec 14 Javascript
TensorFlow.js 微信小程序插件开始支持模型缓存的方法
Feb 21 Javascript
JavaScript实现消消乐的源代码
Jan 12 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
smarty基础之拼接字符串的详解
2013/06/18 PHP
PHP使用CURL模拟登录的方法
2015/07/08 PHP
PHP __call()方法实现委托示例
2019/05/20 PHP
Laravel框架Eloquent ORM简介、模型建立及查询数据操作详解
2019/12/04 PHP
URL编码转换,escape() encodeURI() encodeURIComponent()
2006/12/27 Javascript
jQuery移动web开发中的页面初始化与加载事件
2015/12/03 Javascript
JavaScript通过代码调用Flash显示的方法
2016/02/02 Javascript
javaScript给元素添加多个class的简单实现
2016/07/20 Javascript
jQuery实现的模拟弹出窗口功能示例
2016/11/24 Javascript
详解nodejs异步I/O和事件循环
2017/06/07 NodeJs
vue-cli的eslint相关用法
2017/09/29 Javascript
Node.js利用console输出日志文件的方法示例
2018/04/27 Javascript
jQuery实现form表单序列化转换为json对象功能示例
2018/05/23 jQuery
详解Vue中的scoped及穿透方法
2019/04/18 Javascript
Vuejs学习笔记之使用指令v-model完成表单的数据双向绑定
2019/04/29 Javascript
layUI实现前端分页和后端分页
2019/07/27 Javascript
[08:07]DOTA2每周TOP10 精彩击杀集锦vol.8
2014/06/25 DOTA
Python实现的栈(Stack)
2018/01/26 Python
TensorFlow实现RNN循环神经网络
2018/02/28 Python
Python基于whois模块简单识别网站域名及所有者的方法
2018/04/23 Python
使用python接受tgam的脑波数据实例
2020/04/09 Python
HTML5应用之文件上传
2016/12/30 HTML / CSS
iHerb香港:维生素、补充剂和天然保健品
2017/08/01 全球购物
亚马逊海外购:亚马逊美国、英国、日本、德国直邮
2021/03/18 全球购物
新闻编辑自荐书范文
2014/02/12 职场文书
薪酬专员岗位职责
2014/02/18 职场文书
优秀班主任经验交流材料
2014/06/02 职场文书
商场促销活动总结
2014/07/10 职场文书
社区工作者个人总结
2015/02/28 职场文书
法人代表资格证明书
2015/06/18 职场文书
孩子满月酒答谢词
2015/09/30 职场文书
导游词之介休绵山
2019/12/31 职场文书
教你用python控制安卓手机
2021/05/13 Python
如何用PHP实现分布算法之一致性哈希算法
2021/05/26 PHP
浅析CSS在DevTools 中架构演变
2021/10/05 HTML / CSS
SpringBoot前端后端分离之Nginx服务器下载安装过程
2022/08/14 Servers