輕量級jQuery倒計時

我見過一些非常漂亮的jQuery插件，可以倒數一天，幾小時，幾分鐘和幾秒鐘。他們使用圖像，看起來不錯。但我正在尋找一個簡單的小倒數，用剩餘秒數填充div。我將結合使用：輕量級jQuery倒計時

function submitform() { 
    document.forms[0].submit(); 
} 

jQuery(function($) { 
    setInterval("submitform()",20000); 
});

我只是想的東西在角落裏真正不顯眼的地方，讓他們知道該網頁是關於通過自身所有的刷新。

來源

2010-08-08 Phillip Senn

首先，當你想火在設定的時間間隔功能setInterval使用例如每20秒一次。對於一次性事件使用setTimeout。

這裏是你一個輕量級的解決方案，假設你有一個div的countdown一個id：

$(function() { 
    var seconds = 20; 
    setTimeout(updateCountdown, 1000); 

    function updateCountdown() { 
     seconds--; 
     if (seconds > 0) { 
     $("#countdown").text("You have " + seconds + " seconds remaining"); 
     setTimeout(updateCountdown, 1000); 
     } else { 
     submitForm(); 
     } 
    } 
}); 

function submitForm() { 
    document.forms[0].submit(); 
}

來源

2010-08-08 04:14:41

謝謝box9！這正是我想要的。我轉移了一些東西。 http://pastebin.com/uVQzPEp3 我不明白你爲什麼使用setTimeout而不是setInterval。是否因爲JavaScript的某些行爲？ – 2010-08-08 17:15:36

您也可以在這種情況下使用setInterval，因爲您希望updateCountdown（）每秒觸發一次。我只是認爲在這種情況下setTimeout會更簡單。如果使用setInterval，則必須以三種方式更改上述代碼：1.將第一個setTimeout替換爲timeout = setInterval（...）。 2.由於setInterval每秒都會觸發，所以刪除updateCountdown中的setTimeout。 3.提交表單之前，請致電clearTimeout（超時）。如果你通過頁面刷新提交點3，並不重要，但如果通過ajax，它會每秒提交一次。 – 2010-08-08 23:28:01

本週我剛剛爲一個項目寫了一個倒計時。這只是JavaScript，不需要jQuery。

只需傳遞要放置countDown的div的id，以毫秒爲單位的結束和開始時間（或者您可以更改Date參數的工作方式，我已經在頁面上有ms的日期，所以我通過他們進入的功能，但你可以採取不同的方式）：

<div id="countDownDiv"></div> 
<script type="text/javascript"> 
    countDown("countDownDiv",1281239850163, new Date().getTime()); 
</script>

而這裏的功能：

function countDown(id, end, cur){ 
     this.container = document.getElementById(id); 
     this.endDate = new Date(end); 
     this.curDate = new Date(cur); 


var context = this; 

var formatResults = function(day, hour, minute, second){ 
    var displayString = [ 
       '<div class="stat statBig"><h3>',day,'</h3><p>days</p></div>', 
       '<div class="stat statBig"><h3>',hour,'</h3><p>hours</p></div>', 
       '<div class="stat statBig"><h3>',minute,'</h3><p>minutes</p></div>', 
       '<div class="stat statBig"><h3>',second,'</h3><p>seconds</p></div>' 
    ]; 
    return displayString.join(""); 
} 

var update = function(){ 
    context.curDate.setSeconds(context.curDate.getSeconds()+1); 

    var timediff = (context.endDate-context.curDate)/1000; 

    // Check if timer expired: 
    if (timediff<0){ 
     return context.container.innerHTML = formatResults(0,0,0,0); 
    } 

    var oneMinute=60; //minute unit in seconds 
    var oneHour=60*60; //hour unit in seconds 
    var oneDay=60*60*24; //day unit in seconds 

    var dayfield=Math.floor(timediff/oneDay); 
    var hourfield=Math.floor((timediff-dayfield*oneDay)/oneHour); 
    var minutefield=Math.floor((timediff-dayfield*oneDay-hourfield*oneHour)/oneMinute); 
    var secondfield=Math.floor((timediff-dayfield*oneDay-hourfield*oneHour-minutefield*oneMinute)); 

    context.container.innerHTML = formatResults(dayfield, hourfield, minutefield, secondfield); 

    // Call recursively 
    setTimeout(update, 1000); 
}; 

// Call the recursive loop 
update(); 
}

來源

2010-08-08 03:59:06

哇布賴恩，這是非常大方的你！ – 2010-08-08 04:01:52

輕量級jQuery倒計時

回答

相關問題