SQL PHP HTML ASP JavaScript articles and free scripts to download
 

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

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 ).

Related Tutorial
Clock in different formats
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">
function display_c(start){
window.start = parseFloat(start);
var end = 0 // change this to stop the counter at a higher value
var refresh=1000; // Refresh rate in milli seconds
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.
Google+

More on JavaScript Date & Time
emmanuel ogbonnaya smith02-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
Post Comment This is for short comments only. Use the forum for more discussions.
Name
Email( not to be displayed)Privacy Policy
1+2=This is to prevent automatic submission by spammers. Please enter the result of the sum as asked




HTML . MySQL. PHP. JavaScript. ASP. Photoshop. Articles. FORUM Contact us

©2000-2014 plus2net.com All rights reserved worldwide Privacy Policy Disclaimer