jquery 实现 点击按钮后倒计时效果,多用于实现发送手机验证码

时间:2021-10-09 22:04:01
 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 
 3 <html xmlns="http://www.w3.org/1999/xhtml">
 4 <head>
 5     <title></title>
 6     <script src="HTML/js/jquery-1.4.1.min.js" type="text/javascript"></script>
 7     <script type="text/javascript">
 8 
 9         /*-------------------------------------------*/
10         var InterValObj; //timer变量,控制时间
11 var count = 5; //间隔函数,1秒执行
12 var curCount;//当前剩余秒数
13 var code = ""; //验证码
14 var codeLength = 6;//验证码长度
15 function sendMessage() {
16             curCount = count;
17             var dealType; //验证方式
18 var uid=$("#uid").val();//用户uid
19 if ($("#phone").attr("checked") == true) {
20                 dealType = "phone";
21             }
22             else {
23                 dealType = "email";
24             }
25             //产生验证码
26 for (var i = 0; i < codeLength; i++) {
27                 code += parseInt(Math.random() * 9).toString();
28             }
29             //设置button效果,开始计时
30                 $("#btnSendCode").attr("disabled", "true");
31                 $("#btnSendCode").val("请在" + curCount + "秒内输入验证码");
32                 InterValObj = window.setInterval(SetRemainTime, 1000); //启动计时器,1秒执行一次
33 //向后台发送处理数据
34                 $.ajax({
35                     type: "POST", //用POST方式传输
36                     dataType: "text", //数据格式:JSON
37                     url: 'Login.ashx', //目标地址
38                     data: "dealType=" + dealType +"&uid=" + uid + "&code=" + code,
39                     error: function (XMLHttpRequest, textStatus, errorThrown) { },
40                     success: function (msg){ }
41                 });
42             }
43         //timer处理函数
44 function SetRemainTime() {
45             if (curCount == 0) {                
46                 window.clearInterval(InterValObj);//停止计时器
47                 $("#btnSendCode").removeAttr("disabled");//启用按钮
48                 $("#btnSendCode").val("重新发送验证码");
49                 code = ""; //清除验证码。如果不清除,过时间后,输入收到的验证码依然有效    
50             }
51             else {
52                 curCount--;
53                 $("#btnSendCode").val("请在" + curCount + "秒内输入验证码");
54             }
55         }
56     </script>
57 </head>
58 <body>
59         <input id="btnSendCode" type="button" value="发送验证码" onclick="sendMessage()" /></p>
60 </body>
61 </html>