T-Minus Javascript Countdown

This page will self-destruct in


Countdowns are used to communicate product launches, retirement dates, and other significant events. Counting backward from an arbitrary date to indicate the time remaining can be done in Javascript very easily with the use of the Date object.

Countdown timers can be found on shopping, hotel reservation and airline reservation websites to motivate speedy user-transactions.

Script:
<script>
// Variable to hold the countdown date-time
var countDownDate = new Date("Feb 28, 2042 12:00:00").getTime();

// Use setInterval with the number 1000 to update the value once per second
var x = setInterval(function() {

// Variable to hold the current date and time
var now = new Date().getTime();

// Calculate distance between the countdown date-time and now
var distance = countDownDate - now;

// With distance calculated, break it into the number of days, hours, minutes, and seconds.
var days = Math.floor(distance / (1000 * 60 * 60 * 24));
var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
var seconds = Math.floor((distance % (1000 * 60)) / 1000);

// Update the HTML with the distance values.
document.getElementById("countdown").innerHTML = days + hours + minutes + seconds;
if (distance < 0) {
clearInterval(x);
document.getElementById("countdown").innerHTML = "Launch!";
}
}, 1000);
</script>

In the preceding script, the formula is updating an HTML element "countdown" with the countdown value.

Add the "countdown" element to your page.

<p id="countdown"></p>



Copyright Oproot Research. All rights reserved.
Permission is granted for limited, non-commercial use of text and images. If used, please credit and notify Oproot Research. If circumstances permit, please include the URL: http://oproot.com. Oproot Research would appreciate a copy of publication. High-resolution images are also available. Please email requests, comments to tech@oproot.com.

 

  

  
  Oproot
  P.O. Box 235
  Hondo TX 78861
  email: code@oproot.com