实现的效果是：点击获取验证码的按钮时，开始倒计时，倒计时过程中，按钮不可点击，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>