How to create a Count Down Cllock

PHP
1

Hello,

We want to create a Count Down Clock which in real time counts down to a given date.

I think this function needs to be a combination of Php & JavaScript or Ajax.
But since there is no forum for Php & JavaScript combined, I am posting this question here.
No JQuery please.

So say launch date is $launch_date = ‘May/1/2013’;

What we want then is the code which would display to a person visiting this page the message:

Launch Date: 31 Days - 23 Hours - 4 Min - 45 Seconds

With the counter for Seconds, Minutes, etc. clicking down in real time toward the launch date.

Thank you for your suggestions.

2

If you need real-time update, then you need Javascript. In your PHP page you should do something like this:

<script type="text/javascript">
  var launchDate = new Date(<?php echo date('D, d M Y H:i:s e', $launchTimeInSeconds); ?>); //date should have format Wed, 09 Aug 1995 00:00:00 GMT
</script>

Make sure, that launchTime is in UTC (or GMT).
Then you need a script that works with that date and current user’s time and every second returns difference between the current time and the planned launch date in a form of object, something like this:

function timeDiff(launchTime) {
    //some calculations
    return {days: 15, hours: 12, minutes:10, seconds:5};
}

Then you need one more function that updates the DOM. I’d use jQuery for it, but plan JS also works well:

function updateElement(el, time) {
    var domEl = document.getElementById(el);
    var str = (time.days || 0) + 'days - ' + (time.hours || 0) + 'hours - ' + (time.minutes || 0) + 'minutes - ' + (time.seconds || 0) + 'seconds';
    domEl.innerHtml = str;
}

And in the main scrip file you do this:

var timeout = setTimeout(function() {
updateElement('timeSpan', timeDiff);
}, 1000);

That’s it.

I didn’t test the actual functions, but this is correct approach and should work as long as you implement timeDiff function correctly. There you just need to use getTime() from current and launch date and divide by 1000 (to remove milliseconds), then by 24*3600 for days, remaining part by 3600 for hours, remaining by 60 for minutes and remaining part is seconds.
This is straightforward code and I’m a bit lazy to write it :slight_smile:

Good luck!

3

Hi,

I dont see how your code can work!

for example how do I set the value of:
$launchTimeInSeconds

what is the point of this:

timeDiff (launchTime) {
//some calculations
return {days: 15, hours: 12, minutes:10, seconds:5};
}

I mean what is
//some calculations
and where are values for return {days: 15, hours: 12, minutes:10, seconds:5};
coming from?

Thanks

4

Here is a quick and dirty jQuery based example but it can be converted to use PHP and regular Javascript if needed


<!DOCTYPE html>
<html lang="en">


<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">


    <title>Site Base</title>


</head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>


<script type="text/javascript">
var before="Camp Starts!"
var current="Game on!"
var montharray=new Array("Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec")


function countdown(yr,m,d){
	theyear=yr;themonth=m;theday=d
	var today=new Date() 
	var todayy=today.getYear()
	if (todayy < 1000)
	todayy+=1900
	var todaym=today.getMonth()
	var todayd=today.getDate()
	var todayh=today.getHours()
	var todaymin=today.getMinutes()
	var todaysec=today.getSeconds()
	var todaystring=montharray[todaym]+" "+todayd+", "+todayy+" "+todayh+":"+todaymin+":"+todaysec
	futurestring=montharray[m-1]+" "+d+", "+yr
	dd=Date.parse(futurestring)-Date.parse(todaystring)
	dday=Math.floor(dd/(60*60*1000*24)*1)
	dhour=Math.floor((dd%(60*60*1000*24))/(60*60*1000)*1)
	dmin=Math.floor(((dd%(60*60*1000*24))%(60*60*1000))/(60*1000)*1)
	dsec=Math.floor((((dd%(60*60*1000*24))%(60*60*1000))%(60*1000))/1000*1)
	
	if(dday==0&&dhour==0&&dmin==0&&dsec==1){
		document.forms.count.count2.value=current
		return
	} else
	$('.timer').text("Training starts in  "+dday+ " days, "+dhour+" hours, "+dmin+" minutes, and "+dsec+" seconds");
	setTimeout("countdown(theyear,themonth,theday)",1000)
}




//enter the count down date using the format year/month/day
		countdown(2013,08,19);
    


</script>
<body>
    <div class="timer"></div>
</body>
</html>
5 

echo date('D, d M Y H:i:s e', $launchTimeInSeconds);

$launchTimeInSeconds is the date of your event, in seconds from Unix time stamp. (See php.net/time)

You can convert a date to time stamp using strtotime