javascript倒數顯示天數？

我有這個JavaScript倒計時，將顯示秒。我需要知道如何在櫃檯展示日子而不是第二。javascript倒數顯示天數？

即1天，還剩2小時。

這是代碼：

<script type="text/javascript"> 
var MAX_COUNTER = 1000; 
var counter = null; 
var counter_interval = null; 

function setCookie(name,value,days) { 
    var expires; 
    if (days) { 
     var date = new Date(); 
     date.setTime(date.getTime()+(days*24*60*60*1000)); 
     expires = "; expires="+date.toGMTString(); 
    } 
    else { 
     expires = ""; 
    } 
    document.cookie = name+"="+value+expires+"; path=/"; 
} 

function getCookie(name) { 
    var nameEQ = name + "="; 
    var ca = document.cookie.split(';'); 
    for(var i=0;i < ca.length;i++) { 
     var c = ca[i]; 
     while (c.charAt(0) == ' ') { 
      c = c.substring(1,c.length); 
     } 
     if (c.indexOf(nameEQ) === 0) { 
      return c.substring(nameEQ.length,c.length); 
     } 
    } 
    return null; 
} 

function deleteCookie(name) { 
    setCookie(name,"",-1); 
} 

function resetCounter() { 
    counter = MAX_COUNTER; 
} 

function stopCounter() { 
    window.clearInterval(counter_interval); 
    deleteCookie('counter'); 
} 

function updateCounter() { 
    var msg = ''; 
    if (counter > 0) { 
     counter -= 1; 
     msg = counter; 
     setCookie('counter', counter, 1); 
    } 
    else { 
     counter = MAX_COUNTER; 

    } 
    var el = document.getElementById('counter'); 
    if (el) { 
     el.innerHTML = msg; 
    } 
} 

function startCounter() { 
    stopCounter(); 
    counter_interval = window.setInterval(updateCounter, 1000); 
} 

function init() { 
    counter = getCookie('counter'); 
    if (!counter) { 
     resetCounter(); 
    } 
    startCounter(); 
} 

init(); 
</script>

目前只顯示秒，一旦它擊中0

來源

2013-03-26 David Smith

您需要將秒轉換爲小時，分鐘和天。嘗試http://jsfiddle.net/h2DEr/ – vdua 2013-03-26 10:36:49

@vdua，謝謝。這正是我所期待的。 – 2013-03-26 10:55:27

因爲它的工作，我正在回答這個問題，以便你可以關閉這個問題。 – vdua 2013-03-26 10:58:13

http://jsfiddle.net/h2DEr/1/ 

function updateCounter() { 
    var msg = ''; 
    if (counter > 0) { 
     counter -= 1; 
     msg = convertSecondsToDays(counter); 
     setCookie('counter', counter, 1); 
    } 
    else { 
     counter = MAX_COUNTER; 
    } 
    var el = document.getElementById('counter'); 
    if (el) { 
     el.innerHTML = msg; 
    } 
}

下面是轉換秒到幾天

功能

function convertSecondsToDays(sec) { 
    var days, hours,rem,mins,secs; 
    days = parseInt(sec/(24*3600)); 
    rem = sec - days*3600 
    hours = parseInt(rem/3600); 
    rem = rem - hours*3600; 
    mins = parseInt(rem/60); 
    secs = rem - mins*60; 
    return days +" days " + hours +" hours "+mins + " mins "+ secs + " seconds"; 
}

更新： @ sanya_zol的回答和評論從大衛·史密斯後

，因爲是不應該的setInterval運行每一秒，你都需要改變你的策略。我也修改了小提琴

將MAX_COUNTER設置爲您希望過期的值。

而不是減少計數器-1，檢查當前時間，從過期日期減去它並顯示它。

EXPIRY_SECONDS = 24*60*60; 
    MAX_COUNTER = parseInt(new Date().getTime()/(1000)) + EXPIRY_SECONDS; 

    function updateCounter() { 
    var msg = '',curTime = parseInt(new Date().getTime()/1000); 

    if (curTime < MAX_COUNTER) { 
     msg = convertSecondsToDays(MAX_COUNTER- curTime); 
     setCookie('counter', MAX_COUNTER- curTime, 1); 
    } 
    else { 
     MAX_COUNTER = parseInt(new Date().getTime()/1000) + EXPIRY_SECONDS; 
    } 

    var el = document.getElementById('counter'); 
    if (el) { 
     el.innerHTML = msg 
    } 
    }

來源

2013-03-26 11:00:28 vdua

雖然我選擇這個作爲答案，但這仍然無法正常工作。倒計數將在頁面刷新時自動重置，這不會發生在我自己的代碼上，它不應該發生。 – 2013-03-26 15:35:00

我從來沒有想過這是用例。修改了小提琴http://jsfiddle.net/h2DEr/5/ – vdua 2013-03-26 16:06:47

非常感謝。一旦它達到0就會重置自己？ – 2013-03-26 17:05:56

counter_interval = window.setInterval(updateCounter, 1000);

1000以毫秒爲單位值，因此多少毫秒它將重新啓動本身有一天在嗎？

counter_interval = window.setInterval(updateCounter, 1000*60*60*24);

來源

2013-03-26 10:28:29 HMR

謝謝你的回覆。我是一個JavaScript絕對noob，我不完全知道如何使用你給我的代碼。有什麼機會可以解釋一下嗎？ – 2013-03-26 10:31:05

我用我的代碼替換了你的代碼，當我替換它時，沒有任何反應。該計數器停止工作.... – 2013-03-26 10:37:48

它計數一天的時間，所以你必須等到明天，看看它是否有效。 – HMR 2013-03-26 12:00:41

除了vdua的回答是：

你的代碼確實是寫的不好。

它使用的setInterval該計數器不準確的（而且，它有非常，非常糟糕的精度） - 所以你計數器的第二個將等於1.05-1.2真正秒（實時和反之間的差異會積累 ）。

你應該檢查系統時間（通過（新日期）.getTime（））每次以較低的間隔（如100毫秒）來獲得精確的計數器。

來源

2013-03-26 11:03:35

javascript倒數顯示天數？

回答

相關問題