Code-Sucks.com

Creating a countdown in JavaScript at first may seem hard, since you have to think about how to calculate the different amount of days, the hours, seconds, and such. With the Unix Time Stamp, the amount of seconds that have passed from midnight January 1, 1970, we can make the process a lot easier. There a slight issue, JavaScript doesn't support the Unix Time Stamp, but supports UTC, which is the number of milliseconds that have passed since midnight January 1,1970. To fix this "issue" you can do one of two things. You can either divide the UTC time by 1000 when you first call create the variable, or you can multiply all the time equations by 1000. Either one should work in theory, we are going to use the former, since we are not wanting the milliseconds for our countdown. If you are wanting to include the milliseconds in your countdown, then you will need to make for sure each equation that deals with time is multiplied by 1000.

Now that we have a base that we can work with, we can make our equations and then our script. Since the Unix Time Stamp uses seconds as method of counting, we must determine how many seconds are in a minute, an hour, and a year. So let's start with a minute. We know that there are 60 seconds in a minute, so when we want to get the minute value we multiply by 60. Now hours we have to determine how many minutes there are in an hour, which again is 60. So to determine how many seconds are in an hour we multiply 60 by 60. Easy so far. Years is a little different. In our script we are not going to be counting months since each month has a different amount of days. So what we need to do is to determine how many hours are in a day and then how many days are in a year. We all know that there are 24 hours in a day, and 365 days in a year. With this, we now have the equation for how many seconds are in a year, that equation is 60*60*24*365. Again, if you are using JavaScript's UTC time stamp, you must multiply everything by 1000 so your year equation will be 1000*60*60*24*365.

With our equations figured out, we can start scripting. The first thing we want to do is get the Unix Time Stamp for the date that we are going to be using. There are two ways that you can get this information, you can either search for a Unix Time Stamp converter online, or we can use JavaScript. Since this is a JavaScript tutorial, you can only guess what we are going to use. For our tutorial, we are going to use the last date known in the Mayan calendar, which is December 21, 2012, or to the Mayans the end of the world.

var expire = parseInt(Date.parse("Dec 21, 2012")/1000); //End Date

To get the Unix Time Stamp we are using two built in JavaScript functions parseInt, and Date.parse. ParseInt returns the whole integer value in a string. If your string has a value of 3.14, parseInt would return 3. The Date.parse function sets the date in the UTC time stamp that JavaScript uses. Since we have to divide this by 1000, we wrap the equation with the parseInt function to return a whole number. (If you are using UTC for your base, you don't have to divide by 1000 and you don't have to use the parseInt function).

Once you have the end date we have to get the current date, and put it in the same Unix Time Stamp format. If you worked with dates, you know that we have to create a new variable and assign a value to it with the Date function. If you haven't worked with dates in JavaScript you may want to read over some of the date functions either in our Date functions tutorial, or at W3 Schools. Instead of using the getYear, getMonth, etc functions in JavaScript, we are going to use the getTime function. This is a function which returns the current date and time in the UTC time stamp format. Just like when we set the end date, we are going to divide this number by 1000, and wrap it in the parseInt function in order to return the Unix Time Stamp

    var now = new Date();
    var current = parseInt(now.getTime()/1000);

So far we have the end date, the current date and time, and our equations. Now we have to find out the difference between the end date and the current date so we can use the equations that we have created. To find the difference we are going to subtract the current (our current date and time variable) from expire (our end date variable).

    var diff_seconds = expire - current

We named the variable diff_second, since we now know the difference in seconds between the two numbers. From here we an apply our equations to find out how many year, days, hours, minutes, and seconds we have until the end of the world according to the Mayans.

To start out we will need to determine the amount of years that we have left, then subtract that from the diff_seconds. So what we have to do is divide diff_seconds by the equation we create earlier for how many seconds are in a year (60*60*24*365). If you are using the UTC format you equation is (1000*60*60*24*365)

    var diff_years = parseInt(diff_seconds/(60*60*24*365))

We now have how many years there left before our end date. We must now subtract that number of seconds away from diff_seconds, before we can continue to find the hours, and minutes. To do this we will multiply diff_years (number of years left) by the number of seconds in a year (60*60*24*365) and subtract that from diff_seconds.

    diff_seconds -= diff_years * 60 * 60 * 24 * 365;

Using the -= in JavaScript we are telling the script that diff_seconds will now equal itself minus the equation on the right. You could also write this code as diff_seconds = diff_seconds - (diff_years * 60 * 60 * 24 * 365). The -= just make the code a little cleaner, and easier to read.

Diff_seconds now has the number of seconds subtracted from it, we can now find the number of days left until the end date arrives. The steps we are going to take to find out the number of days, hours, and minutes are exactly the same as we did for the years, only the equations are different to match what we are trying to determine the remaining amount measurements of time.

    var diff_days = parseInt(diff_seconds/(60*60*24));
    diff_seconds -= diff_days * 60 * 60 * 24;
    document.getElementById("days").innerHTML=diff_days;    
    
    //Number of hours left
    var diff_hours = parseInt(diff_seconds/(60*60));
    diff_seconds -= diff_hours * 60 * 60;
    document.getElementById("hours").innerHTML=diff_hours;   

    //Number of minutes left
    var diff_minutes = parseInt(diff_seconds/(60));
    diff_seconds -= diff_minutes * 60;
    document.getElementById("minutes").innerHTML=diff_minutes;

Since we have determined how many years, days, hours, and minutes that are left, we only have to determine how many seconds are left. Since we have been taking the total number of seconds for each unit of time away from the total number of seconds, we have already found out the total number of seconds left.

All that is left is to create a way to update the values, and to display the values, both are easy to do. In order to do either, we first need to put all or the code in a function. If you haven't worked with functions a lot, here is how you would do that. Also, I added some comments to the code in order to know what the code is doing.

function countdown(){
    //Getting dates in Unix Time, and finding the difference between the current time, and expiration date.  Dividing the UTC time by 1000 to get the Unix Time
    var expire = parseInt(Date.parse("Dec 21, 2012")/1000); //End Date
    var now = new Date();
    var current = parseInt(now.getTime()/1000);
    var diff_seconds = expire - current;

    //Number of years left
    var diff_years = parseInt(diff_seconds/(60*60*24*365))
    diff_seconds -= diff_years * 60 * 60 * 24 * 365;

    //Number of days left
    var diff_days = parseInt(diff_seconds/(60*60*24));
    diff_seconds -= diff_days * 60 * 60 * 24;
    
    //Number of hours left
    var diff_hours = parseInt(diff_seconds/(60*60));
    diff_seconds -= diff_hours * 60 * 60;

    //Number of minutes left
    var diff_minutes = parseInt(diff_seconds/(60));
    diff_seconds -= diff_minutes * 60;
}

Now that we have the function, we can create a timer which refreshes the values every second. This is done with the JavaScript function setTimeout. For the setTimeout function requires to values to be passed to it. The object you want to refresh, and how often you want it to refresh in milliseconds. Since we want our function countdown to refresh every second we need to pass this values to the setTimeout function.

    setTimeout("countdown()", 1000);

For the final step in the script we need to display the code. You could use document.write() to write the document to the page, but we are going to create a table with the values for each measurement of time. In order to put the code in the proper cells we are going to use the document.getElementById() function, and innerHTMl. Here is the JavaScript code for years, you will need to add the same code for each other time measurement, replacing the correct variable and the id name for each one.

    document.getElementById("years").innerHTML=diff_years;

This code will write the value of diff_year, where ever there is an HTML element with the id of years.

Before we continue to the HTML code, here is all the final JavaScript code.

Continuing to the HTML, we now need to create a table that is two rows tall and nine columns wide. For every other cell in the second row we are going to place a span element. Each of the span elements will have an id named after the measurement of time that we want to display in that cell. The cells that don't have the span element we are going to put in a colon.

<table>
 <tr>
  <td>Years</td>
  <td>  </td>
  <td>Days</td>
  <td>  </td>
  <td>Hours</td>
  <td>  </td>
  <td>Minutes</td>
  <td>  </td>
  <td>Seconds</td>
 </tr>
 <tr>
  <td align="center"><span id="years"><script language="javascript">countdown();</script></span></td>
  <td>:</td>
  <td align="center"><span id="days"><script language="javascript">countdown();</script></span></td>
  <td>:</td>
  <td align="center"><span id="hours"><script language="javascript">countdown();</script></span></td>
  <td>:</td>
  <td align="center"><span id="minutes"><script language="javascript">countdown();</script></span></td>
  <td>:</td>
  <td align="center"><span id="seconds"><script language="javascript">countdown();</script></span></td>
 </tr>
</table>

Now that we have the HTML code, our entire countdown script is complete. We can tell our visitors how long until the end of the world is according to the Mayans. You can view an example of the code here.