Live Server Time Clock using PHP and Javascript

Posted by & 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 script php javascript

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>

 .

Download Premium Only Scripts & 80+ Demo scripts Instantly at just 1.95 USD per month + 10% discount to all Exclusive Scripts

If you want any of my script need to be customized according to your business requirement,

Please feel free to contact me [at] muni2explore[at]gmail.com

Note: But it will be charged based on your customization requirement

Get Updates, Scripts & Other Useful Resources to your Email

Join 10,000+ Happy Subscribers on feedburner. Click to Subscribe (We don't send spam)
Every Email Subsciber could have access to download 100+ demo scripts & all future scripts.

Get Instant Script Download Access!