jQuery 手机验证码倒计时效果

这是一种网页上比较常用的效果,当点击获取手机验证码之后,会有一个倒计时的效果,一般是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>

在线演示地址:

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

继续阅读
Admin
  • 本文由 发表于 2017年12月20日16:40:06
  • 除非特殊声明,本站文章均为原创,转载请务必保留本文链接
Vue 项目如何分环境打包不同配置 前端开发

Vue 项目如何分环境打包不同配置

在项目开发中,我们的项目一般分为开发版、测试版、预发布版、生产版,Vue-cli 的默认环境一只有 dev 和 prod 两个,之前每次要发布测试版或预发布版都是需要手动修改代码中配置文件后打包,这样...
JavaScript 实现 GPS 坐标点距离计算 前端开发

JavaScript 实现 GPS 坐标点距离计算

在LBS(基于位置服务)的一些应用中,有时我们会需要计算两个用户或两个坐标点之间的距离。要解决这类问题,就要了解空间几何的概念并结合数学中在三角函数公式计算两点之间的值。本文介绍基于经度/纬度的,两个...
匿名

发表评论

匿名网友 填写信息

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