Tuesday, November 19, 2013

Server clock on client side using JS + PHP

A small piece of code(js + PHP) which will help you to get the server clock in browser using js on a global variable. It may be helpful when your are building some activity/tracker kind of application using js.


<script type="text/javascript">
    <?php date_default_timezone_set('Asia/Calcutta'); ?>
    var i = 0;
    var servDate = '<?php echo date("Y/m/d/H/i/s", time()); ?>';
    var servDateArray = servDate.split('/');
    var serverTimestamp = '';

    function serverClock()
    {
        var now = new Date( 
            Number(servDateArray[0]), 
            Number(servDateArray[1]), 
            Number(servDateArray[2]), 
            Number(servDateArray[3]), 
            Number(servDateArray[4]), 
            Number(servDateArray[5]) + i
        );
        i++;
        
        var secs = now.getSeconds();
        var mins = now.getMinutes();
        var hr = now.getHours();
        var date = now.getDate();
        var month = now.getMonth();
        var year = now.getFullYear();
        
        var finaldate = year
                            + '-' + ((month < 10) ? "0" + month : month) 
                            + '-' + ((date < 10) ? "0" + date : date);
        var finaltime = ((hr < 10) ? "0" + hr : hr) 
                            + ':' + ((mins < 10) ? "0" + mins : mins) 
                            + ':' + ((secs < 10) ? "0" + secs : secs);
        
        serverTimestamp = finaldate + ' ' + finaltime;
        // console.log(serverTimestamp);

        setTimeout('serverClock()', 1000);
    }

    window.onload = serverClock;
</script>