jQuery 手机验证码倒计时效果

  • A+
所属分类:前端开发

这是一种网页上比较常用的效果,当点击获取手机验证码之后,会有一个倒计时的效果,一般是30秒开始到0就变为“获取验证码”,下面动画图片示例:

代码中的样式是基于 jQuery WeUI 组件,针对于微信公众号开发前端组件!

引入文件

  1. <link href="https://cdn.bootcss.com/weui/1.1.2/style/weui.min.css" rel="stylesheet">
  2. <link href="https://cdn.bootcss.com/jquery-weui/1.2.0/css/jquery-weui.min.css" rel="stylesheet">
  3. <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
  4. <script src="https://cdn.bootcss.com/jquery-weui/1.2.0/js/jquery-weui.min.js"></script>

HTML代码

  1. <div class="weui-form-data">
  2.     <div class="weui-cells weui-cells_form">
  3.         <div class="weui-cell weui-cell_vcode">
  4.             <div class="weui-cell__hd">
  5.                 <label class="weui-label">手机号码</label>
  6.             </div>
  7.             <div class="weui-cell__bd">
  8.                 <input id="tel" class="weui-input" type="tel" placeholder="请输入手机号码">
  9.             </div>
  10.             <div class="weui-cell__ft">
  11.                 <input id="btnSendCode" class="weui-vcode-btn weui-input-btn" type="button" value="获取验证码" onclick="sendCodeBtn()">
  12.             </div>
  13.         </div>
  14.         <div class="weui-cell weui-cell_vcode">
  15.             <div class="weui-cell__hd">
  16.                 <label class="weui-label">验证码</label>
  17.             </div>
  18.             <div class="weui-cell__bd">
  19.                 <input id="code" class="weui-input" type="number" placeholder="请输入验证码">
  20.             </div>
  21.             <div class="weui-cell__ft">
  22.                 <button class="weui-vcode-btn weui-hide-btn"></button>
  23.             </div>
  24.         </div>
  25.     </div>
  26.     <div class="weui-btn-area weui-btn-martop">
  27.         <a class="weui-btn weui-btn_primary" href="javascript:" onclick="authBtn()">验证</a>
  28.     </div>
  29. </div>

jQuery代码

  1. <script>
  2.     var InterValObj;    //timer变量,控制时间
  3.     var count = 30;     //间隔函数,1秒执行
  4.     var curCount;       //当前剩余秒数
  5.     var tel;
  6.     var code;
  7.     // 点击获取验证码按钮
  8.     function sendCodeBtn(){
  9.         tel = $('#tel').val();
  10.         if(!tel || !/^((13|14|15|17|18)[0-9]{1}\d{8})$/.test(tel)){
  11.             $.toptip('请输入正确的手机号');
  12.         }else{
  13.             sendMessage();
  14.         }
  15.     }
  16.     // 获取验证码
  17.     function sendMessage(){
  18.         curCount = count;
  19.         tel = $('#tel').val();
  20.         $("#btnSendCode").attr("disabled""true");
  21.         $("#btnSendCode").val("重新获取(" + curCount + "s)");
  22.         InterValObj = window.setInterval(SetRemainTime, 1000);
  23.         //请求后台获取验证码
  24.         $.toast('获取验证码成功');
  25.     }
  26.     //倒计时处理
  27.     function SetRemainTime(){
  28.         if (curCount == 0) {
  29.             window.clearInterval(InterValObj);
  30.             $("#btnSendCode").removeAttr("disabled");
  31.             $("#btnSendCode").val("重新获取");
  32.         }
  33.         else {
  34.             curCount--;
  35.             $("#btnSendCode").val("重新获取(" + curCount + "s)");
  36.         }
  37.     }
  38.     // 点击验证码校验按钮
  39.     function authBtn(){
  40.         tel = $('#tel').val();
  41.         code = $('#code').val();
  42.         if(!tel || !/^((13|14|15|17|18)[0-9]{1}\d{8})$/.test(tel)){
  43.             $.toptip('请输入正确的手机号');
  44.         }
  45.         else if(!code || !/\d{6}/.test(code)){
  46.             $.toptip('请输入六位手机验证码');
  47.         }
  48.         else{
  49.             //请求后台校验验证码
  50.             $.toast('验证成功');
  51.         }
  52.     }
  53. </script>

在线演示地址:

博主只是一名前端的小白,只是把自己用到的知识分享一下,要是有什么不对的地方,欢迎大家提出~~

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: