JS原生代碼之倒計時搶購

時間 2019-11-18

原文原文鏈接

　　剛剛用了一點時間把完善了的倒計時搶購功能又作了一遍，這回用的是原聲代碼，沒有引入jquery庫，雖然明顯感受原生代碼量要多一些，可是寫出來個小功能仍是頗有成就感的。須要注意的就是代碼順序執行的問題，必定要思路清晰。要否則代碼順序寫錯，有些功能仍是實現不了的。html

　　學到了原聲js改變input的disabled的屬性值，由於想讓倒計時結束的同時，搶購按鈕能夠被點擊。代碼爲：document.getElementById("buy").disabled = "";或者disabled的值爲false也能夠。
　　下面是我編寫的代碼，哪裏不完善，還請大神指點。jquery

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>倒計時搶購</title>
 6 </head>
 7 <body>
 8     <span id="time"></span>
 9     <input type="button" value="開始搶購" id="buy" disabled="true">
10     <script>
11         function Time(){
12             var date = new Date();
13             var nowhour = date.getHours();
14             var nowmin = date.getMinutes();
15             var nowsec = date.getSeconds();
16             var finalhour = 22;
17             var finalmin = 22;
18             var finalsec = 22;
19             var finals = finalhour * 3600 + finalmin * 60 + finalsec;
20             var nows = nowhour * 3600 + nowmin * 60 + nowsec;
21             var showhour = parseInt((finals - nows)/3600);
22             var showmin = parseInt((finals - nows)%3600/60);
23             var showsec = (finals - nows)%60;
24              if(showsec<10){
25                 showsec = "0" + showsec;
26             }
27             if(showmin<10){
28                 showmin = "0" + showmin;
29             }
30             if(showhour<10){
31                 showhour = "0" + showhour;
32             }
33             document.getElementById("time").innerHTML = "距離22點22分22秒還有：" + showhour + ":" + showmin + ":" + showsec;
34             if(showhour == "00" && showmin == "00" && showsec =="00"){
35                 clearInterval(t);
36                 document.getElementById("buy").disabled="";
37             }
38         }
39         Time();
40         var t = setInterval(Time,1000);
41     </script>
42 </body>
43 </html>