js_一個簡單的30分鐘循環倒計時
阿新 • • 發佈:2017-12-28
經理 oct function class 就是 重新 lap pre java
吐槽段:
需求的變更是千變萬化的,至少在你說服和你打交道的那位誰誰誰之前。
創業公司就是這樣,產品經理一個想法,就是改改改,管你改起來復雜不復雜,在他們眼裏都是非常簡單的。
今天的一個小改動需求,把活動的倒計時改成一個循環的30分鐘倒計時,沒錯,就是一個循環的30分鐘倒計時,這個活動是永無止境的。
技術段:
HTML
1 <p>紅包有效期: 2 <!--2.倒計時HTML--> 3 <span id="minute">00</span>分 4 <span id="second">00</span>秒 5 </p>
JS
1 <!--3.倒計時js--> 2 <script type="text/javascript"> 3 var minute = "29"; 4 var second = 59; 5 setInterval(function() { 6 second--; 7 if(second == 00 && minute == 00) { 8 minute = 29; 9 second = 59; 10 }; //當分鐘和秒鐘都為00時,重新給值11 if(second == 00) { 12 second = 59; 13 minute--; 14 if(minute < 10) minute = "0" + minute; 15 }; //當秒鐘為00時,秒數重新給值 16 if(second < 10) second = "0" + second; 17 $("#minute").text(minute); 18 $("#second").text(second); 19 }, 1000);20 </script>
全部代碼
1 <!DOCTYPE html> 2 <html> 3 4 <head> 5 <meta charset="UTF-8"> 6 <title></title> 7 <!--1.引入jq--> 8 <script src="http://code.jquery.com/jquery-latest.js"></script> 9 </head> 10 11 <body> 12 <p>紅包有效期: 13 <!--2.倒計時HTML--> 14 <span id="minute">00</span>分 15 <span id="second">00</span>秒 16 </p> 17 </body> 18 <!--3.倒計時js--> 19 <script type="text/javascript"> 20 var minute = "29"; 21 var second = 59; 22 setInterval(function() { 23 second--; 24 if(second == 00 && minute == 00) { 25 minute = 29; 26 second = 59; 27 }; //當分鐘和秒鐘都為00時,重新給值 28 if(second == 00) { 29 second = 59; 30 minute--; 31 if(minute < 10) minute = "0" + minute; 32 }; //當秒鐘為00時,秒數重新給值 33 if(second < 10) second = "0" + second; 34 $("#minute").text(minute); 35 $("#second").text(second); 36 }, 1000); 37 </script> 38 39 </html>View Code
js_一個簡單的30分鐘循環倒計時