How to create a simple JavaScript Countdown Timer

This is a simple JavaScript countdown timer I have used many times in the past. This script works great when you need to display the time remaining for a specific activity and have it count down until that time is reached.

First, we’ll go over the basic stand-alone script. This script will count down the days, hours, minutes, and seconds until our target date and time and display that countdown in a div with id=’timer’. For our example the target date and time is December 31, 2050 17:00:00. Once we pass the target date and time the timer will display the literal text “Ended”.

<div id='timer'></div>
<script type='text/javascript'>
	var countDownDate = new Date('Dec 31, 2050 17:00:00').getTime();
	var x = setInterval(function() {
		var now = new Date().getTime();
		var distance = countDownDate - now;
		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);
		document.getElementById('timer').innerHTML = days + 'd ' + hours + 'h ' + minutes + 'm ' + seconds + 's ';
		if (distance < 0) { clearInterval(x); document.getElementById('timer').innerHTML = 'Ended'; } }, 1000); 
</script>

Copy Code

Here is an example where we pass the date as a parameter. This is useful for dynamic content. For example I’ve used this on an auction page where the auction end date and time varies by listing.

<div id='timer'></div>
<script type='text/javascript'>
function fnSetTimer(ParmDate)
{
	var countDownDate = new Date(ParmDate).getTime();
	var x = setInterval(function() {
		var now = new Date().getTime();
		var distance = countDownDate - now;
		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);
		//document.getElementById('timer').innerHTML = days + 'd ' + hours + 'h ' + minutes + 'm ' + seconds + 's ';
		// display as hours:minutes:seconds with leading zeros
		document.getElementById('timer').innerHTML = String(hours).padStart(2,'0') + ':' + String(minutes).padStart(2,'0') + ':' + String(seconds).padStart(2,'0');
		if (distance < 0) { clearInterval(x); document.getElementById('timer').innerHTML = 'Ended'; } }, 1000); } </script>

Copy Code

Then with a little PHP code we can pass our date value to the script to populate the timer div.

<?php
	$auction_stop = "2020-12-31 17:00:00";
	echo "<script>\n";
	echo "	fnSetTimer('$auction_stop');\n";
	echo "</script>\n";
?>

Copy Code

In this example I hard coded the stop date/time ($auction_stop) to show the format needed, you would likely obtain dynamic values from a database or calculation.

I didn’t need the number of days and wanted the hours, minutes, and seconds to display with leading zeros. For example 10:05:00.

Click Here for a Working Example

References

Javascript Date
Javascript setInterval
Javascript Math
Javascript getElementById
Javascript padStart