Century Clock (2101) Script
Witness the countdown to a new era. This script tracks the time remaining until the beginning of the 22nd century, providing a robust example of future-date calculation.
Countdown to Jan 1, 2101
00000
Days
00
Hrs
00
Mins
00
Secs
Source Code
<div id="century-timer"></div>
<script>
function startCenturyClock() {
var now = new Date();
var target = new Date("January 1, 2101 00:00:00");
var diff = target - now;
var days = Math.floor(diff / (1000 * 60 * 60 * 24));
var hours = Math.floor((diff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
var minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));
var seconds = Math.floor((diff % (1000 * 60)) / 1000);
document.getElementById("century-timer").innerHTML =
days + " Days " + hours + ":" + minutes + ":" + seconds;
setTimeout(startCenturyClock, 1000);
}
startCenturyClock();
</script>Implementation FAQ
Yes. Instead of updating one div, you can target multiple spans (as shown in our demo) to give different colors or sizes to days, hours, and minutes.
Yes. This uses standard ES5 JavaScript math and date functions, making it compatible with almost every browser in use today.
You can add a check:
if (diff < 0) { clearTimeout(timer); return; } to prevent the clock from displaying negative numbers once the date passes.