countdown script in JavaScript displaying Days hours minutes & Seconds left

We can show a count down script displaying time left from an event. Say we are running a campaign which is going to end after two days. Here we will display a counter saying days , hours , minutes and seconds left for the event to happen or the campaign to end. This script uses the setTimeout function in the same way as it is used in displaying a changing clock script. Here this setTimeout script triggers another function in every 1000 mill seconds ( or in 1 sec ).

This script uses client side JavaScript to generate the count down clock. The initial value in number of seconds left for the countdown to end will be passed to the function. At the time of page loading the seconds left ( a numeric value ) is collected and based on this value the days , hours, minutes and seconds are calculated and displayed. So this script can be run by linking to a server side script like PHP or ASP and a powerful dynamic script can be developed. Let us not discuss the server side script part and we will only run the script with some numeric value for seconds which is collected at the time of page loads.

The script uses two functions. While the page loads we use the onload event of the body tag and pass a value to the function display_c().

<body onload=display_c(86501);>

Now this value of 86501 ( in Seconds ) is used to calculate the number of days, hours , minutes and seconds left for the event to happen.

Since this value we are going to use it again and again so we kept this in a global variable to use it inside and outside the functions like this

window.start = parseFloat(start);

WE have used windows object to store a variable in global scope to use throughout the page.

Now in each successive call to the function the value of this window.start is decreased by one after displaying the countdown value. The count down value changes after ever second and it gets the value after a short calculation.

window.start= window.start- 1;

The days left is calculated by taking the Math.floor value after dividing total time by 86400. This value of 86400 is the total number of seconds in a day ( 60 second x 60 minutes x 24 hours )

Similar way values of hours , minutes and seconds are calculated. A detail help is kept with comment lines inside the code.

Finally using a span id the count down is displayed.

Here is the code

<!doctype html public "-//w3c//dtd html 3.2//en">
<html>
<head>
<title>(Type a title for your page here)</title>

<script type="text/javascript">
var end = 0 // change this to stop the counter at a higher value
var refresh=1000; // Refresh rate in milli seconds

function display_c(start){
window.start = parseFloat(start);

if(window.start >= end ){
mytime=setTimeout('display_ct()',refresh)
}
else {alert("Time Over ");}
}

function display_ct() {
// Calculate the number of days left
var days=Math.floor(window.start / 86400);

// After deducting the days calculate the number of hours left
var hours = Math.floor((window.start - (days * 86400 ))/3600);

// After days and hours , how many minutes are left 
var minutes = Math.floor((window.start - (days * 86400 ) - (hours *3600 ))/60);

// Finally how many seconds left after removing days, hours and minutes. 
var secs = Math.floor((window.start - (days * 86400 ) - (hours *3600 ) - (minutes*60)));

var x = window.start  + "(" + days + " Days " + hours + " Hours "  + minutes + " Minutes and "  + secs + " Secondes " + ")";
document.getElementById('ct').innerHTML = x;

window.start= window.start- 1;

tt=display_c(window.start);
}
</script>

</head>
<body onload=display_c(86501);>

<span id='ct' style="background-color: #FFFF00"></span>

</body>
</html>

If you are not able to copy the above code then check this text file with code.

Page refresh

On refresh of this page the counter starts from the beginning. If you want the counter to continue from the point we refresh the page then we have to store the end time at Server end. Each time the page loads the value of start ( here it is 86501 ) will change to new value.
DEMO : Countdown script with page refresh
We can implement this by storing the event time in a database or in a file. Every time we will read from the database or file and then subtract the current time and pass the balance time as start.

What is timestamp

Timestamp is the seconds lapsed from Unix Epoch (January 1 1970 00:00:00 GMT) .

How this demo page works.

The end time is fixed for tomorrow 20 hour , 15 minutes and 40 second. From timestamp of this value current time stamp ( time of page refresh ) is subtracted and passed as start value to the same script. The problem is the script will never time out if the page is refreshed frequently. ( Note that end time is created by adding one day to today )

This can be created by using any server side script.

Using Client side JavaScript

Same concepts can be used by using client side Javascript to create timestamp but this will create problem as client side time zone or clock can be changed so the value can be changed.

Stopwatch script using setInterval()
Date Reference Realtime Clock using JavaScript

Subscribe to our YouTube Channel here

emmanuel ogbonnaya smith	02-08-2012
hello, can any body help me out. really am running a hotspot internet cafe , and am using a mikrotik os for my hotspot. really i want to display time left for my client on there computers, or laptop, i dont know to do that . can someone help me out thank u

	12-08-2020
how to code this when I refresh the page the time remaining will not returning back to the time?

	23-08-2020
This part is explained now and one demo page is added. HTH

Real time display of time left for an event in days, hours, minutes and seconds

Page refresh

What is timestamp

How this demo page works.

Using Client side JavaScript

Subscribe