如何功能化倒计时？ [英] How to functionalize countdown?

问题描述

我做了一个倒计时计时器，并用HTML和CSS编码，但我不能使它的功能使用jQuery。我如何功能化这个倒计时？这里是我喜欢倒计时的HTML结构：

 < div id =counter-container> 
< div class =counter-box> 
< div class =counter>< p class =counter-p>＃< / p>< / div> 
< p class =counter-box-p>天< / p> 
< / div> 
< div class =counter-box> 
< div class =counter>< p class =counter-p>＃< / p>< / div> 
< p class =counter-box-p>小时< / p> 
< / div> 
< div class =counter-box> 
< div class =counter>< p class =counter-p>＃< / p>< / div> 
< p class =counter-box-p>分钟< / p> 
< / div> 
< div class =counter-box> 
< div class =counter>< p class =counter-p>＃< / p>< / div> 
< p class =counter-box-p>秒< / p> 
< / div> 
  

正如你所看到的，我已经添加了段落元素的天，小时等，因此我不想通过jQuery嵌入任何额外的文本。

解决方案

 函数计数器计数）{
 countdown = setInterval（function（）{
 var temp; 
 $（p＃d）。html（Math.floor（count /（60 * 60 * 24） ））; 
 temp = count％（60 * 60 * 24）; 
 $（p＃h）。html（Math.floor（temp /（60 * 60）））; 
 temp = count％（60 * 60）; 
 $（p＃m）。html（Math.floor（temp /（60）））; 
 temp = count％ ; 
 $（p＃s）。html（temp）; 
 if（count == 0）{
 alert（time's up）; 
 clearInterval ）; 
} 
 count--; 
}，1000）; 
} 
 
计数器（60 * 60 * 24 * 2）; 
  

demo

EDIT-1：时间为秒。

 计数器// 10秒
计数器（10 * 60）// 600秒 - > 10分钟。 
计数器（10 * 60 * 60）// 36000秒 - > 600分钟 - > 10小时
  

EDIT-2：

如果你想要 Date 工作，你应该这样改变函数，

 函数计数器（futureDate）{
 var today = new Date（）; // today 
 count = Math.floor（（futureDate-today）/ 1000）; 
 countdown = setInterval（function（）{
 var temp; 
 $（p＃d）。html（Math.floor（count /（60 * 60 * 24）））; 
 temp = count％（60 * 60 * 24）; 
 $（p＃h）。html（Math.floor（temp /（60 * 60）））; 
 temp = count％（60 * 60）; 
 $（p＃m）。html（Math.floor（temp /（60）））; 
 temp = count％（60） $ b $（p＃s）。html（temp）; 
 if（count == 0）{
 alert（time's up）; 
 clearInterval（countdown）; 
} 
 count--; 
}，1000）; 
} 
 
 counter（new Date（2012,4,8））; // May 8，2012 00:00:00 
 / * counter（new Date（2012,4,8,15,49,10））; // May 8，2012 15:49:00 * / 
 
  

http://jsfiddle.net/NfLAB/1/

I made a countdown timer and coded this in with HTML and CSS, but I wasn't able to make it functional using jQuery. How can I functionalize this countdown? Here is the HTML structure I prefer the countdown to be in:

    <div id="counter-container">
      <div class="counter-box">
        <div class="counter"><p class="counter-p">#</p></div>
        <p class="counter-box-p">days</p>
      </div>
      <div class="counter-box">
        <div class="counter"><p class="counter-p">#</p></div>
        <p class="counter-box-p">hours</p>
      </div>
      <div class="counter-box">
        <div class="counter"><p class="counter-p">#</p></div>
        <p class="counter-box-p">minutes</p>
      </div>
      <div class="counter-box">
        <div class="counter"><p class="counter-p">#</p></div>
        <p class="counter-box-p">seconds</p>
      </div>

As you can see, I have already added paragraph elements for days, hours etc, therefore I do not want to embed any extra text through jQuery.

P.S. Could anyone please tell me how to set a new countdown date?

解决方案

function counter(count) {
  countdown = setInterval(function(){
    var temp;
    $("p#d").html(Math.floor(count/(60*60*24)));
    temp = count%(60*60*24);
    $("p#h").html(Math.floor(temp/(60*60)));
    temp = count%(60*60);
    $("p#m").html(Math.floor(temp/(60)));
    temp = count%(60);
    $("p#s").html(temp);
    if (count == 0) {
         alert("time's up");
         clearInterval(countdown);       
    }
    count--;
  }, 1000);
}

counter(60*60*24*2);

​demo

EDIT-1:

counter gets time as seconds.

counter(10); //10 seconds
counter(10*60) //600 seconds -> 10 minutes.
counter(10*60*60) //36000 seconds -> 600 minutes -> 10 hour

EDIT-2:

if you want it to work Date based, you should change function like this,

function counter(futureDate) {
  var today = new Date(); // today
  count = Math.floor((futureDate-today)/1000);
  countdown = setInterval(function(){
    var temp;
    $("p#d").html(Math.floor(count/(60*60*24)));
    temp = count%(60*60*24);
    $("p#h").html(Math.floor(temp/(60*60)));
    temp = count%(60*60);
    $("p#m").html(Math.floor(temp/(60)));
    temp = count%(60);
    $("p#s").html(temp);
    if (count == 0) {
         alert("time's up");
         clearInterval(countdown);       
    }
    count--;
  }, 1000);
}

counter(new Date(2012,4,8)); // May 8, 2012 00:00:00
/* counter(new Date(2012,4,8,15,49,10)); // May 8, 2012 15:49:00 */
​

http://jsfiddle.net/NfLAB/1/

这篇关于如何功能化倒计时？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！