倒计时60s

实现的效果是：点击获取验证码的按钮时，开始倒计时，倒计时过程中，按钮不可点击，60s后恢复按钮原来状态。

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>倒计时60s</title>
 6     <style>
 7         .btn{
 8             padding: 6px 14px;
 9             background: #ffa125;
10             color: #fff;
11             outline: none;
12             border: 0;
13             border-radius: 5px;
14             cursor: pointer;
15         }
16         .btn-select{
17             background: rgba(255,161,37,.5);
18         }
19     </style>
20 </head>
21 <body>
22     <button type="button" class="btn get-code">获取验证码</button>
23     <script src="js/jquery-3.2.1.min.js"></script>
24     <script>
25         var timer;
26         var count=60;
27         $('.btn').click(function(){
28             setTime();
29         });
30         function setTime(){
31             if(count === 0) {  
32                 clearTimeout(timer);
33                 $(".get-code").attr("disabled",false).removeClass('btn-select'); 
34                 $(".get-code").text("获取验证码");
35                 count = 60;  
36             } else {  
37                 $(".get-code").attr("disabled",true).addClass('btn-select'); //倒计时状态中，按钮不可点击
38                 $(".get-code").text(count+'s');
39                 count--;  
40                 timer=setTimeout(setTime, 1000);  
41             }  
42         }
43     </script>
44 </body>
45 </html>

 

posted @ 2018-03-02 09:45  shuangcherry  阅读(177)  评论(0)  编辑  收藏  举报