Countdown timer with cookies

Question

Hi,

I know there have been a lot of topics like this but I just have problem to which I couldn't find the answer. My script is:

window.onload = function(){
    // 200 seconds countdown
    var countdown = 14400; 
    //current timestamp
    var now   = Date.parse(new Date());

    //ready should be stored in your cookie
    if ( !document.cookie )
    {
        document.cookie = Date.parse(new Date (now + countdown  * 1000)); // * 1000 to get ms
    }

    //every 1000 ms
    setInterval(function()
    {
        var diff = ( document.cookie - Date.parse(new Date()) );

        if ( diff > 0 )
        {
            var message = diff/1000 + " seconds left";
        }
        else
        {
            var message = "finished";
        }

        document.body.innerHTML = message;

    },1000);
}

I want to make countdown timer which tells user time how much left depending on his cookie value. So far I managed to calculate difference between two values but I don't know how to make format like, let's say, "dd/mm/yy hh:mm:ss" from difference timestamp (diff). Is it possible at all?

Answer 1

JavaScript doesn't have any built in date formatting methods like you might expect if you've done any PHP. Instead, you have to build the string manually. However, there are a number of getter methods that will be useful to this end. See 10 ways to format time and date using JavaScript.

Also, just so you know. Date.parse doesn't return the millisecond portion of the time stamp (it rounds down). If you need the milliseconds, you can do either of the following

var d = new Date();
var timestamp_ms = Date.parse(d) + d.getMilliseconds();

or just

var timestamp_ms = +d;

Answer 2

Hello,

1. I do not understand why you check the cookie by if ( !document.cookie ) But it doesnot work on my browser so I modified it into if ( document.cookie )

2. Try toString function and other. Look them up in javascript Date object reference. For example,

           var t = new Date;
       t.setTime(diff);
       var message = t.toTimeString() + " seconds left";
   

This will print 11:59:58 seconds left on my browser.

Answer 3

What you want is a function that converts difference in (mili)seconds to something like

5d 4h 3m 2s

If you don't mind having a large number of days for times periods > a few months, then you could use something like this:

function human_time_difference(diff) {
    var s = diff % 60; diff = Math.floor(diff / 60);
    var min = diff % 60; diff = Math.floor(diff / 60);
    var hr = diff % 24; diff = Math.floor(diff / 24);
    var days = diff;

    return days + 'd ' + hr + 'h ' + min + 'm ' + s + 's';
}

If you have the difference in miliseconds, you'll need to pass the that number divided by 1000. You can also use Math.round to get rid of fractions, but you could just as well leave them on if you want that information displayed.

Getting months and years is a little trickier for a couple of reasons:

1. The number of days in a month varies.
2. When you're going from the middle of one month to the middle of the next, the time span doesn't cover any whole months, even if the number of days > 31 (e.g. How many months are there between the 2nd of June and the 30th of July??).

If you really want the number of months between two times, the number of seconds between them is not enough. You have to use calendar logic, which requires passing in the start and end date + time.

PS: When you post a question, avoid irrelevant details. For example, your question has nothing to do with cookies, setInterval, or onload handlers. The only part that you don't know is how to convert (mili)seconds to days, hours, etc. It might be helpful to supply some background on why you're trying to do something, but if it's not essential to understand the basic question, put it at the end so that people don't have to wade through it before getting to the essential part. The same advice applies to your title; make sure it's relevant by excluding irrelevant details (e.g. cookies and counting down).