Live Server Time Clock using PHP and Javascript

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>

 

If you want any of my script need to be customied according to your bussiness rquirment,

Please feel free to contact me [at] muni@smarttutorials.net

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

Get Hottest Updates, Scripts & Other Useful Resources to your Email

  • http://www.smarttutorials.net muni

    .hide{display:none;}

    <?php while ( $result = mysqli_fetch_assoc($row) ) {
    if ( $i == 0) echo "”;?>

    <div id='question’ >
    <p class='questions' id="qname”> .
    <input type="radio" value="1" id='radio1_’ name=”/>

    <input type="radio" value="2" id='radio1_’ name=”/>

    <input type="radio" value="3" id='radio1_’ name=”/>

    <input type="radio" value="4" id='radio1_’ name=”/>

    <input type="radio" checked='checked' style='display:none' value="5" id='radio1_’ name=”/>

  • http://www.smarttutorials.net muni

    $i++;
    if ( ( $remainder < 1 ) || ( $i == $number_question && $remainder == 1 ) ) {
    echo "Finish”;
    echo “”;
    } elseif ( $rowcount > $number_question ) {
    if ( $j == 1 && $i == $number_question ) {
    echo “Next”;
    echo “”;
    $i = 0;
    $j++;
    } elseif ( $k == $rowcount ) {
    echo ” Previous
    Finish”;
    echo “”;
    $i = 0;
    $j++;
    } elseif ( $j > 1 && $i == $number_question ) {
    echo “Previous
    Next”;
    echo “”;
    $i = 0;
    $j++;
    }

    }
    $k++;

Get Instant Script Download Access!