Countdowns

You can use JavaScript to create a countdown. A countdown will display how many days are left until a certain date (for example, the last day of school).

Click here for an example

Before you start to create a countdown, read through the date tutorial. This will help explain how JavaScript works with time.

To create a countdown you will need a header script and a body script. We will start with the header script. First add the JavaScript tags to your HTML document and create a new date object called now.

<script language = "javascript" type="text/javascript">

now = new Date

</script>

Create a new value, thisYr and set it equal to now.getYear, the value of the current year. The code which follows is a Y2K fix, since some versions of JavaScript don't understand the year 2000. If thisYr is less then 1900, the script will reassign thisYr to the value of itself plus 1900.

<script language = "javascript" type="text/javascript">

now = new Date

thisYr = now.getYear()
if(thisYr < 1900){
thisYr = thisYr + 1900
}

</script>

You need to create one more value to represent the date of the event (in this example, the value is named event, but you can name it whatever you want). Set this value equal to new Date(thisYr, month, day). thisYr is the value of the year corrected for the year 2000. You need to substitute a numerical value for month and day. Remember that JavaScript numbers the months beginning with zero, so 0 represents January, 5 represents June, and 11 represents December. In this example, the date is June 21.

<script language = "javascript" type="text/javascript">

now = new Date

thisYr = now.getYear()
if(thisYr < 1900){
thisYr = thisYr + 1900
}

event = new Date (thisYr, 5, 21)

</script>

Now you need to create two functions. A function is a set of instructions that perform a specific task. The first function will convert a JavaScript date, which is expressed as milliseconds since January 1, 1970, into the number of days since January 1, 1970. To get the number of milliseconds, you will use getTime(). To find the number of days, divide this by 1000 (the number of milliseconds in a second) * 60 (the number of seconds in a minute) * 60 (the number of minutes in an hour) * 24 (the number of hours in a day).

function dayToDays(inTime) {
return (inTime.getTime()/(1000*60*60*24))
}

Note: Both functions should be part of your header script.

The second function will calculate the number of days until your event by subtracting the number of days from January 1, 1970 until today from number of days since January 1, 1970 until your event. This will return the correct number of days until the event.

function daysTill(inDate) {
return (Math.ceil(dayToDays(inDate) - dayToDays(now)))
}

This is the end of your header script. Now you can work on the body script. You will need to use document.write to display the information on your webpage. daysTill(event) will display the number of days until the event (substitute whateven name you used to define the date of your event in the header script for event).

<script language = "javascript" type="text/javascript">

document.write("There are " + daysTill(end) + " days until the end of school")

</script>

Here is the code for the example:

<html>
<head>
<title>Countdown</title>

<script language="javascript" type="text/javascript">

now = new Date
thisYr = now.getYear()
if(thisYr < 1900){
thisYr = thisYr + 1900
}

nextYr = thisYr +1

end = new Date(thisYr, 4, 14)
if (end.getTime < now.getTime) {
anniv.setYear(nextYr)
}

function dayToDays(inTime) {
return (inTime.getTime()/(1000*60*60*24))
}

function daysTill(inDate) {
return (Math.ceil(dayToDays(inDate) - dayToDays(now)))
}

</script>
</head>

<body>

<script language = "javascript" type="text/javascript">

document.write("There are " + daysTill(end) + " days until the end of school")

</script>

</body>
</html>