Cookie Countdown Timer

Question

I know that there were many such questions, but I just have a problem that I could not find the answer to. My script:

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 a countdown timer that tells the user how much time is left depending on his cookie value. So far I have been able to calculate the difference between the two values, but I do not know how to make a format, for example, "dd / mm / yy hh: mm: ss" from a timestamp (diff). Is it even possible?

Answer 1

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

5d 4h 3m 2s

If you don't mind a lot of days for time periods> several months, you can 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 a difference in milliseconds, you will need to pass this number divided by 1000. You can also use Math.round to get rid of fractions, but you can just leave them if you want the displayed information.

Getting months and years is a little harder for several reasons:

• The number of days in a month varies.
• When you go from the middle of the month to the middle of the next, the time interval does not apply to whole months, even if the number of days is> 31 (for example, how many months exist between June 2 and July 30?).

If you really want the number of months between two moments, the number of seconds between them is not enough. You must use calendar logic that requires passing at the beginning and at the end of a date + time.

PS: When you submit a question, avoid unnecessary details. For example, your question is not related to cookies, setInterval or onload. The only part you don’t know is how to convert (mili) seconds into several days, hours, etc. It might be useful to indicate why you are trying to do something, but if it is not important for understanding the main question, put it at the end so that people do not have to get through it before they get to the main part. The same recommendations apply to your name; make sure it’s relevant by excluding irrelevant data (e.g. cookies and countdown).

Answer 2

JavaScript has no built-in date formatting methods, as you would expect if you made any kind of PHP. Instead, you need to build the string manually. However, there are a number of production methods that will be useful for this purpose. See 10 ways to format time and date using JavaScript .

Also, just so you know. Date.parse does not return the millisecond part of the timestamp (it is rounded down). If you need milliseconds, you can do one of the following:

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

or simply

 var timestamp_ms = +d; 

Answer 3

• I don’t understand why you are checking the cookie for if ( !document.cookie ) But it does not work in my browser, so I changed it to if ( document.cookie )

• Try the toString function and others. See them in the javascript Date object reference. For instance,

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

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