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

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了手机注册发送验证码倒计时的简单实例，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含1459字，纯文字阅读大概需要3分钟。

内容图文

如下所示：

()这里用的是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>

以上这篇手机注册发送验证码倒计时的简单实例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。

内容总结

以上是互联网集市为您收集整理的手机注册发送验证码倒计时的简单实例全部内容，希望文章能够帮你解决手机注册发送验证码倒计时的简单实例所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端