JQuery实现注册按钮计时
在网站中常见到注册时会出现“请认真阅读此协议...秒后可注册”，当时间过去后此按钮消失，取而代之的是“注册”按钮。此次的效果使用JQuery，但是Dom是JQuery的基础，希望在写此程序时可以回顾下使用Dom的效果。下面请看代码：
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml" > 3 <head> 4 <title></title> 5 6 <script src="js/jquery-1.4.2.js" type="text/javascript"></script> 7 <script type="text/javascript"> 8 var i = 10; 9 function timers() { 10 $(function() { 11 if (i >= 0) { 12 $("#timer").val("请认真阅读此协议" + i + "秒后可注册").attr("disabled", "disalbed"); 13 $("#btn").attr("disabled", "disabled"); 14 i--; 15 } 16 else { 17 $("#timer").css("display", "none"); 18 $("#btn").attr("disabled", ""); 19 clearInterval(timer); 20 } 21 22 }); 23 24 } 25 var timer = setInterval("timers()", 1000); 26 27 </script> 28 </head> 29 <body> 30 <input type="button" id="timer" /> 31 <input type="button" id="btn" value="注册" disabled="disabled"/> 32 </body> 33 </html>
在此代码中，中间过程使用的是JQuery，但是使用的还是使用最基础的javascript语法。写出此代码的思路如下：
1.计时。在一个按钮中的value会有一个计时的参数，此参数必须每隔一秒就需要变化一次。所以可以联想到使用setInterval或者是timeOut函数。所以在程序中先定义了一个var i=10;作为时间。
2.实现按钮的不可用性。此时必须判断时间i是否大于0，如果大于0则此时的按钮都为不可用，并且要控制时间递减所以使用i--。其中的 $("#timer").val("请认真阅读此协议" + i + "秒后可注册").attr("disabled", "disalbed"); $("#btn").attr("disabled", "disabled");分别获取到id=“timer”和id=“btn”的控件并将其可用性变为不可用。
3.实现隐藏以及可用性。当时间为0时，需要将id=“timer”的控件隐藏，所以使用函数css（"disaplay","none"）;将id=“btn”的控件变为可用，所以设置控件的属性，使用attr（"disabled",""）并且将setInterval清除。
