How do I insert a countdown to a date on FrontPage?

  • Thread starter Thread starter Mags527
  • Start date Start date
This was asked some time ago and I found/modified this code.

Originally, it was Election Day , but I (just now) changed it to a different
future date

<html>
<head>
<script type="text/javascript">
// Set Specific Date and Time
var myDate = new Date();
myDate.setFullYear(2009,10, 24); // 24th November 2009
myDate.setHours(0,0,0,0); // midnight

/*** Do Not Alter rest of code ***/
function CountDown()
{
var timerID;
var seconds = 1000;
var minutes = seconds * 60;
var hours = minutes * 60;
var days = hours * 24;
var years = days * 365;

// Get the Current Date and Time
var now = new Date();

// Find milliseconds in each date
var nowms = Date.parse(now);
var myDatems = Date.parse(myDate);

// Find difference and set a temporary variable
var diff = myDatems - nowms;
var x = diff;

// Calculate days left and reduce difference
var daysleft = Math.floor(x / days);
x -= daysleft*days;

// Calculate hours left and reduce difference
var hoursleft = Math.floor(x / hours );
x -= hoursleft*hours;

// Calculate minutes left and reduce difference
var minsleft = Math.floor(x / minutes );
x -= minsleft*minutes;

// Calculate seconds left
var secsleft = Math.floor(x / seconds );

// Display results in text boxes
document.getElementById("clock1").value = daysleft;
document.getElementById("clock2").value = hoursleft;
document.getElementById("clock3").value = minsleft;
document.getElementById("clock4").value = secsleft;

// Redo if time left to the specific date
if(diff > 0)
{ timerID = setTimeout(CountDown, 1000); }
}
setTimeout(CountDown, 1000);
</script>
</head>
<body>
<b>Date: <script
type="text/javascript">document.write(myDate.toLocaleDateString())</script><br
/>
Count Down: </b>
<input type="text" id="clock1" size="2" value=""> days
<input type="text" id="clock2" size="2" value=""> hours
<input type="text" id="clock3" size="2" value=""> minutes
<input type="text" id="clock4" size="2" value=""> seconds
</body>
</html>
 
Back
Top