Create Your Own jQuery Digital Clock

clock.js

/*
    Create Your Own jQuery Digital Clock
    http://www.sitepoint.com/create-jquery-digital-clock-jquery4u/
*/

<script>
    function updateClock()
    {
        var currentTime = new Date ( );
        var currentHours = currentTime.getHours ( );
        var currentMinutes = currentTime.getMinutes ( );
        var currentSeconds = currentTime.getSeconds ( );

        currentHours = ( currentHours < 10 ? "0" : "" ) + currentHours;
        currentMinutes = ( currentMinutes < 10 ? "0" : "" ) + currentMinutes;
        currentSeconds = ( currentSeconds < 10 ? "0" : "" ) + currentSeconds;

        var currentTimeString = currentHours + ":" + currentMinutes + ":" + currentSeconds;

        $(".timer").html(currentTimeString);

     }

    $(document).ready(function()
    {
       setInterval('updateClock()', 1000);
    });
</script>

<span class="timer"></span>

clock.php

<?php

$date = new DateTime(date('H:i:s'), new DateTimeZone('Asia/Dubai'));
$current_timestamp = $date->getTimestamp();

?>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
    var now = new Date(<?=$current_timestamp*1000?>);
    function updateTime(){
        var nowMS = now.getTime();
        nowMS += 1000;
        now.setTime(nowMS);

        var currentHours = now.getHours();
        var currentMinutes = now.getMinutes();
        var currentSeconds = now.getSeconds();

        currentHours = (currentHours < 10 ? "0" : "" ) + currentHours;
        currentMinutes = (currentMinutes < 10 ? "0" : "" ) + currentMinutes;
        currentSeconds = (currentSeconds < 10 ? "0" : "" ) + currentSeconds;

        var currentTimeString = currentHours + ":" + currentMinutes + ":" + currentSeconds;

        $(".timer").html(currentTimeString);

    }

    $(document).ready(function()
    {
        setInterval('updateTime()', 1000);
    });

</script>

<span class="timer"></span><br /><br /><br />

index.html

<!--
 https://chelladuraii.wordpress.com/2012/06/18/live-timer-using-jquery-ajax-and-php/
-->

<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
 $(document).ready(function(){
     setInterval(ajaxcall, 1000);
 });
 function ajaxcall(){
     $.ajax({
         url: 'time.php',
         success: function(data) {
             data = data.split(':');
             $('#hours').html(data[0]);
             $('#minutes').html(data[1]);
             $('#seconds').html(data[2]);
         }
     });
 }
</script>
<span id="hours">0</span>:<span id="minutes">0</span>:<span id="seconds">0</span>

time.php

<?php
echo $date = date('h:i:s A');