javascript countdown with year , month , day

Question

I am trying to make a countdown with javascript. However, my countdown can only calculate days, hours, minutes and seconds. I also want to display years and months.

The following is my code:

<script type="text/javascript">

        today = new Date();

        BigDay = new Date("December 25, 2016");
        msPerDay = 24 * 60 * 60 * 1000;
        timeLeft = (BigDay.getTime() - today.getTime());
        e_daysLeft = timeLeft / msPerDay;
        daysLeft = Math.floor(e_daysLeft);
        e_hrsLeft = (e_daysLeft - daysLeft) * 24;
        hrsLeft = Math.floor(e_hrsLeft);
        minsLeft = Math.floor((e_hrsLeft - hrsLeft) * 60);
        // $("#countdown").append("There are only<BR> <H4>" + daysLeft + " days " + hrsLeft + " hours and " + minsLeft + " minutes left </H4> Until December 25th 2020<P>");
        document.write(daysLeft + " days " + hrsLeft + " hours" + minsLeft + " minutes");

</script>

I would like to output:

x Years, y Months, z Days left.

One thing I can tell you is that this will not work reliably cross-browser: `new Date("December 25, 2016")`. That string is not in the correct format. You don't want to use a string for this at all if you know the date; instead: `new Date(2016, 11, 25)` (months run `0-11`). Also note that you're falling prey to *[The Horror of Implicit Globals](http://blog.niftysnippets.org/2008/03/horror-of-implicit-globals.html)*. (Sorry not to be *answering*, but I don't have time to debug the whole script at the moment.) — T.J. Crowder, Jun 20 '12 at 03:46
Check this answer with the Date object methods approach: https://stackoverflow.com/a/30679505/7246488 — Marcelo Cordeiro, Sep 02 '20 at 09:04

score 4 · Answer 1 · edited Nov 15 '17 at 15:36

4

You are on the right track. Just follow the same method for dividing the days by 365 if it is over 365 and doing daysLeft modulo 365.

(Although it won't be exact, but it's a simple one and you can use it If you don't need units to be exact.)

ie

var today = new Date();

var BigDay = new Date("December 25, 2018");
var msPerDay = 24 * 60 * 60 * 1000;
var timeLeft = (BigDay.getTime() - today.getTime());
var e_daysLeft = timeLeft / msPerDay;
var daysLeft = Math.floor(e_daysLeft);
var yearsLeft = 0;
if (daysLeft > 365) {
  yearsLeft = Math.floor(daysLeft / 365);
  daysLeft = daysLeft % 365;
}
var e_hrsLeft = (e_daysLeft - daysLeft) * 24;
var hrsLeft = Math.floor(e_hrsLeft);
var minsLeft = Math.floor((e_hrsLeft - hrsLeft) * 60);
document.write(yearsLeft + " years " + daysLeft + " days " + hrsLeft + " hours " + minsLeft + " minutes");

edited Nov 15 '17 at 15:36

mplungjan

169,008
28
173
236

answered Jun 20 '12 at 03:53

Gerard Sexton

3,114
27
36

Hello Gerard, Thank you very much for your help. It works well. Thank again that u give me yr precious time. – sandy Jun 20 '12 at 04:01
There are 366 days years too. – Leonid Jun 20 '12 at 04:06
Yah, I know, I am worry for leap year. So, now I suppose to show only day min sec. thank for yr advice SomeGuy. – sandy Jun 20 '12 at 06:47
@sandy dont give up that easy. Just work through the problem. It is a math based problem. Just add the extra day on the years where the leap year falls. We can give you code but we cant think for you. – Gerard Sexton Jun 20 '12 at 07:02

David Refoua · Answer 2 · 2017-10-13T14:26:02.163

Months actually contain a varying number of days. Some are 30 days, others are 31. February is even worse, containing 28 days with an additional day every 4 years (leap years). Displaying the number of 'Years' would be less onerous, but there are still leap years to contend with.

So there isn't any simple way to calculate them exactly.

For a code that demonstrates calculat Years, Months and Weeks, check this page:
http://blog.refoua.me/post/day-counter/?lang=en

Although it is not a simple one, it works and calculates units as exactly as it can.

javascript countdown with year , month , day

2 Answers2