jQuery 手机验证码倒计时效果

Admin
Admin
Admin
52
文章
6
评论
更多
 2017年12月20日16:40:06 评论 10,771 3158字阅读10分31秒

这是一种网页上比较常用的效果，当点击获取手机验证码之后，会有一个倒计时的效果，一般是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 中通常我们会在模板绑定表达式，模板是用来描述视图结构的。如果模板中的表达式存在过多的逻辑性语句，那么整个模板就会变得特别的臃肿，可读性和维护性将会降低，因此为了简化逻辑，我们可以使用计算属...
10月22日 9,584 评论
浅谈 JS 中的防抖和节流操作 前端开发

浅谈 JS 中的防抖和节流操作

一般在进行窗口的 resize、scroll 等输入框内容校验等操作时，如果事件处理函数调用的频率无限制，会加重浏览器的负担，导致用户体验非常糟糕。此时我们可以采用 debounce（防抖）和 thr...
10月14日 8,806 评论
JS中的「import」和「require 」的区别 前端开发

JS中的「import」和「require 」的区别

import 和 require 是 JS 模块化编程使用的，模块化是一种将系统分离成独立功能部分的方法，一个模块是为完成一个功能的一段程序或子程序，"模块"是系统中功能单一且可替换的部分。模块化思想...
10月12日 19,621 评论
匿名

发表评论

匿名网友 填写信息

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