JQuery实现简单的获取短信验证码倒计时功能(IE兼容版)

一、前言

　　倒计时功能在前端页面效果渲染上属于比较常见的一个功能，需要实现的效果基本包含三点:1.点击获取验证码链接或按钮进入倒计时；2.在倒计时归零前无法重复点击；3.倒计时结束后链接或按钮允许重新点击。针对该功能效果，本文将介绍基于JQuery如何实现倒计时功能。

二、代码实现

　　该功能还有不完善的地方，没法完全防止用户刷新页面而导致渲染出初始效果(即呈现出未点击状态)，目前只处理了按F5刷新页面。

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <meta charset="UTF-8">
 5 <title>短信验证倒计时功能</title>
 6 <script src="https://cdn.bootcss.com/jquery/1.8.3/jquery.min.js"></script>
 7 </head>
 8 <body>
 9 <span id="checkcode-a" style="font-size:15px;color: red;cursor:pointer;text-decoration:underline;" onclick="getCheckCode()">获取短信验证码</span>
10 <script type="text/javascript">
11     $(document).bind("keydown", function(e) {//文档绑定键盘按下事件
12         e = window.event || e;//解决浏览器兼容的问题   
13         if(e.keyCode == 116) {//F5按下
14         　　e.keyCode = 0;
15         　　return false;
16         }
17     });
18     function getCheckCode(){
19         //AJAX方式调用短信发送接口,调用成功后进入倒计时功能
20         settime(60);
21     }
22     //倒计时功能
23     function settime(countdown){
24         if(countdown==0){
25             $("#checkcode-a").css({"font-size":"15px","color": "red","cursor":"pointer","text-decoration":"underline"});
26             $("#checkcode-a").text("获取短信验证码");
27             $("#checkcode-a").attr("onclick","getCheckCode()");
28             return;
29         }else{
30             $("#checkcode-a").css({"font-size":"15px","color":"red","text-decoration":"none"});
31             $("#checkcode-a").removeAttr("onclick");
32             $("#checkcode-a").text("重新发送("+countdown+"s)");
33             countdown--;
34         }
35         setTimeout(function(){
36             settime(countdown);
37         },1000);
38     }
39 </script>
40 </body>
41 </html>

 

posted @ 2019-12-04 17:29  雷德斯の边城  阅读(366)  评论(0)  编辑  收藏  举报