Javascript Countdown Timer

This is a small, real-time, timer/countdown system programmed in JavaScript by Derek C. Jones.

The following is the JavaScript source code for the timer. You can use this code as desired, you just need to change the date you are counting down to and the text messages that display during and after the countdown:

// Developed by Derek C. Jones of Pluralverse, copyright September, 2011

<script type="text/javascript">
// Date you are counting down to
var year = 2015; // year (2011-on)
var month = 1; // month (1-12)
var day = 1; // day (1-31)
var hour = 0; // hour (0-23)
var minute = 0; // minute (0-59)

// message to display underneat the countdown
var message = "Until the New Year!";

// announcement to display upon completion of countdown
var announcement = "The countdown to the New Year has ended! ^_^";

// set up the div for the timer
var timerDiv = '<div id="pluralverseCountdown"></div>';
document.write(timerDiv);

// start timer
runTimer(year, month, day, hour, minute);

function runTimer(y, mo, d, h, mi){
var today = new Date();

// convert dates into milliseconds.
var todaysDate = (new Date(today.getFullYear(),
today.getMonth(),
today.getDate(),
today.getHours(),
today.getMinutes(),
today.getSeconds())).getTime();
var endingDate = (new Date(y, mo - 1, d, h, mi, 00)).getTime();

// find the difference, then convert into seconds.
var timeLeft = Math.round((endingDate - todaysDate) / 1000);

// fill in the timer div based on the time left in countdown
var innerHtml;
if(timeLeft < 0){
// countdown over, display ending message
innerHtml = '&lt;span id="pluralverseAnnouncement">' +
announcement +
'</span>';
document.getElementById('pluralverseCountdown').innerHTML = innerHtml;
}
else {
// time left in countdown, display clock and waiting message

// time calculations for clock
var days = Math.floor(timeLeft / (60*60*24));
timeLeft %= (60*60*24);
var hours = Math.floor(timeLeft / (60*60));
timeLeft %= (60*60);
var minutes = Math.floor(timeLeft / 60);
timeLeft %= 60;
var seconds = timeLeft;

// grammar for clock text
dps = 's'; hps = 's';
if(days == 1) dps = '&nbsp;';
if(hours == 1) hps = '&nbsp;';

// clock
innerHtml = '<span id="pluralverseTimeDigits">';
if(days &lt; 100)
innerHtml += '0';
if(days &lt; 10)
innerHtml += '0';
innerHtml += days;
if(hours &lt; 10)
innerHtml += ':0' + hours;
else
innerHtml += ':' + hours;
if(minutes &lt; 10)
innerHtml += ':0' + minutes;
else
innerHtml += ':' + minutes;
if(seconds &lt; 10)
innerHtml += ':0' + seconds;
else
innerHtml += ':' + seconds;

innerHtml += '</span&gt;<span id="pluralverseTimeText">&lt;br />&nbsp;&nbsp;&nbsp;day' +
dps + '&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;hour' +
hps + '&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;min' +
'&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;sec' +
'</span><br />&lt;span id="pluralverseMessage">' +
message + '</span>';
document.getElementById('pluralverseCountdown').innerHTML = innerHtml;

//Recursive call, continuing the countdown
setTimeout('runTimer(' + year + ',' + month + ',' + day +
',' + hour + ',' + minute + ');', 1000);
}

}
</script>

The following CSS code is used by the above timer:

#pluralverseCountdown{
background: #ddd;
width: 210px;
height: 75px;
margin: 20px;
text-align: center;
}

#pluralverseMessage{
padding: 5px;
}

#pluralverseAnnouncement{
padding: 5px;
}

#pluralverseTimeDigits{
font-family: courier;
font-size: 28px;
}

#pluralverseTimeText{
font-family: "lucida sans";
font-size: 12px;
}

Advertisements