js_一個簡單的30分鍾循環倒計時

本文轉載自查看原文 2017-12-28 17:32 7669 jq/ 倒計時/ js&jq

吐槽段：

需求的變更是千變萬化的，至少在你說服和你打交道的那位誰誰誰之前。

創業公司就是這樣，產品經理一個想法，就是改改改，管你改起來復雜不復雜，在他們眼里都是非常簡單的。

今天的一個小改動需求，把活動的倒計時改成一個循環的30分鍾倒計時，沒錯，就是一個循環的30分鍾倒計時，這個活動是永無止境的。

技術段：

HTML

1 <p>紅包有效期：
2     <!--2.倒計時HTML-->
3     <span id="minute">00</span>分
4     <span id="second">00</span>秒
5 </p>

 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

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 js 30分鍾倒計時 js十分鍾倒計時純js實現10分鍾倒計時 vue 15分鍾倒計時一個簡單的JS倒計時 js_倒計時去執行函數或則跳轉頁面一分鍾html頁面倒計時可精確到秒 vue2.0實現倒計時15分鍾一個簡單的js實現倒計時函數原生js實現一個簡單的倒計時功能