javascript倒计时显示天数?

时间:2013-03-26 10:21:22

标签: 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就会自动重启。

3 个答案:

答案 0 :(得分:2)

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的答案和David Smith的评论后

因为setInterval不应该每秒运行一次,所以你需要稍微改变你的策略。我也修改了那个小提琴

  1. 如果希望它过期,请将MAX_COUNTER设置为一个值。
  2. 而不是将计数器减少-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
         }
       }
    

答案 1 :(得分:0)

counter_interval = window.setInterval(updateCounter, 1000); 

1000是以毫秒为单位的值,那么一天中有多少毫秒?

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

答案 2 :(得分:0)

vdua的回答除了:

您的代码编写得非常糟糕。

它使用setInterval,其中计数器不精确(此外,它具有非常非常差的精度) - 所以你的计数器的秒将等于1.05-1.2实时秒(实时和计数器之间的差异) 将积累)。

每次以较低的间隔(如100毫秒)检查系统时间(通过(新日期).getTime()),以获得精确的计数器。