Live Server Time Clock using PHP and Javascript

Posted 4:08 pm by muni & filed under JAVASCRIPT, JQUERY, PHP.

In this tutorial we are going to see how to set up PHP timestamp in javascript date object to simulate real time clock.
If we are going to make clock script only in php, for every second we need to make an ajax call to the server to get sever time to display on clicent side. It is completely bad scripting for making ajax call for every second to the server.
It good idea to assign php timestamp (server in time) to javascript variable, and run a javscript clock from that timestamp gives exact server time on the client side without making ajax call to the server.

Live Server Time Clock Using PHP Javascript

Step 1 :

Create index.php file. Now get php timestamp from php inbuilt DateTime class.

<?php
$date = new DateTime();
$current_timestamp = $date->getTimestamp();
?>

Now $current_timestamp will have current time in seconds from ( Jan 1, 1970). That’s it on PHP side.

Step 2:

Add <script> tag in index.php file.

<script>.....</scritp>

Step 3:

where Javascript setInterval() method calls the phpJavascriptClock() function for every second to simulate real time clock.

setInterval(function(){phpJavascriptClock();},1000);

flag variable helps to assign php timestamp to javscript timer variable only on page load.

 if ( flag ) {
                    timer = <?php echo $current_timestamp;?>*1000;
                }

But on subseqent function call ( phpJavascriptClock() ) value in the timer variable will incremented with 1000.

  timer = timer + 1000;

Here is the full Javascript clock script.

<script>
		    flag = true;
			timer = '';
			setInterval(function(){phpJavascriptClock();},1000);

			function phpJavascriptClock()
			{
				if ( flag ) {
					timer = <?php echo $current_timestamp;?>*1000;
				}
				var d = new Date(timer);
				months = new Array('Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sept', 'Oct', 'Nov', 'Dec');

				month_array = new Array('January', 'Febuary', 'March', 'April', 'May', 'June', 'July', 'Augest', 'September', 'October', 'November', 'December');

				currentYear = d.getFullYear();
				month = d.getMonth();
				var currentMonth = months[month];
				var currentMonth1 = month_array[month];
				var currentDate = d.getDate();
				currentDate = currentDate < 10 ? '0'+currentDate : currentDate;

				var hours = d.getHours();
				var minutes = d.getMinutes();
				var seconds = d.getSeconds();

				var ampm = hours >= 12 ? 'PM' : 'AM';
				hours = hours % 12;
				hours = hours ? hours : 12; // the hour ’0' should be ’12'
				minutes = minutes < 10 ? '0'+minutes : minutes;
				seconds = seconds < 10 ? '0'+seconds : seconds;
				var strTime = hours + ':' + minutes+ ':' + seconds + ' ' + ampm;
				document.getElementById("demo").innerHTML= currentMonth+' ' + currentDate+' , ' + currentYear + ' ' + strTime ;

				document.getElementById("demo1").innerHTML= currentMonth1+' ' + currentDate+' , ' + currentYear + ' ' + strTime ;

				document.getElementById("demo2").innerHTML= currentDate+':' +month+':' +currentYear + ' ' + strTime ;

				document.getElementById("demo3").innerHTML= strTime ;

				flag = false;
				timer = timer + 1000;
			}

		</script>

 .