js_一个简单的30分钟循环倒计时

Posted 皮皮是只公喵

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了js_一个简单的30分钟循环倒计时相关的知识,希望对你有一定的参考价值。

吐槽段:

需求的变更是千变万化的,至少在你说服和你打交道的那位谁谁谁之前。

创业公司就是这样,产品经理一个想法,就是改改改,管你改起来复杂不复杂,在他们眼里都是非常简单的。

今天的一个小改动需求,把活动的倒计时改成一个循环的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分钟循环倒计时的主要内容,如果未能解决你的问题,请参考以下文章

js循环倒计时代码 每5秒循环倒计时到0 再从5秒开始 到0之后刷新页面 类似网易的滚动新闻

纯js实现10分钟倒计时

30分钟全看懂127个常用的JS程序片段

每天倒计时代码

html里video只有几十秒,可以改成几分钟的播放时间吗?

数组项循环后,使用计时器再次使用新数据重新循环它们