如何功能化倒計時？

我做了一個倒數計時器，並用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">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>

正如你所看到的，我已經添加段落元素爲天，小時等，所以我不想嵌入通過jQuery的任何額外的文本。

P.S.任何人都可以請告訴我如何設置一個新的倒計時日期？

來源

2012-04-06 Shad Asinger

已嘗試實施倒計時自己？如果是這樣，你卡在哪裏？ – Armatus 2012-04-06 21:25:24

沒有得到倒計時運行，但其格式是非常不同的時間，並且很難定製它。 – 2012-04-06 21:27:36

讓我重述一下我的回答：我正在嘗試開始工作的jQuery插件是爲了讓您只分配div（或任何其他元素），並且jQuery將僅創建該DIV中的所有其他必需元素（例如小時，分鐘等）。但是，當我使用Google Chrome開發人員工具來檢索這些元素的類和ID時，我無法（開始干擾），以便我可以分配一些CSS，使其看起來像我的設計，而不是默認的設計。希望這有助於:) – 2012-04-06 21:38:21

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(10); //10 seconds 
counter(10*60) //600 seconds -> 10 minutes. 
counter(10*60*60) //36000 seconds -> 600 minutes -> 10 hour

EDIT 2：，如果你想要的工作Date爲主，你應該改變這樣的功能

，

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/

來源

2012-04-06 21:40:12 ocanal

太棒了！有關我如何調整時間的任何指示？由於我沒有得到這些數字:)抱歉。 – 2012-04-06 21:41:54

您可以更改初始化程序 - 它目前設置爲倒計時2天。 60秒* 60分鐘* 24小時* 2天）。 2小時後，將線改爲「計數器（120）;」或「計數器（60 * 2）」。 – 2012-04-06 21:48:04

嘿，代碼就像一個魅力！謝謝。但是，有沒有什麼方法可以給出日期，而代碼是否完成了從現在開始到日期爲止的剩餘工作？這是因爲現在我正在研究一個仍然在本地和我的計算機上的項目。因此，每當我重新加載頁面或改變一些東西時，計時器就會重置自己......我明白爲什麼會發生這種情況。無論如何，如果沒有什麼可以做的，我在改變上傳時間方面沒有問題。謝謝:) – 2012-04-07 11:07:30

如何功能化倒計時？

回答

相關問題