dcsimg
www.webdeveloper.com
Results 1 to 3 of 3

Thread: Server Time

  1. #1
    Join Date
    Jul 2014
    Posts
    1

    Lightbulb Server Time

    Hello, I am quite new here so I am not sure if I am on the right section.
    I would like to place a server time clock inside a wordpress widget.
    Now I came up with this code, its all included with the style and I would like to keep this style but this clock doesn't show the server time but the client time.

    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <script>
    function startTime() {
        var today=new Date();
        var h=today.getHours();
        var m=today.getMinutes();
        var s=today.getSeconds();
        m = checkTime(m);
        s = checkTime(s);
        document.getElementById('txt').innerHTML = h+":"+m+":"+s;
        var t = setTimeout(function(){startTime()},500);
    }
    
    function checkTime(i) {
        if (i<10) {i = "0" + i};  // add zero in front of numbers < 10
        return i;
    }
    </script>
    </head>
    
    <body onload="startTime()">
    
    <div id="txt" style="background-color:transparent; font-family: 'courier', Helvetica, Arial, sans-serif;  font-size: 20pt; color: #FFF;"></div>
    
    </body>
    </html>
    Someone can help me with this code to show the server time rather than client time?

    Thank you in advance.

  2. #2
    Join Date
    Mar 2007
    Location
    localhost
    Posts
    2,964
    Get the server time in PHP and have it written in to a time reference in a JavaScript.

    I also see that you are using a method of gathering time data that is really out of the ark.

    Write in the current server time with PHP

    PHP Code:
    <?php
    date_default_timezone_set
    ('America/Los_Angeles');
    $rfc date("r");
    ?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>The Server Time</title>
    <script>
    timeSrv = new Date( "<?php echo $rfc;?>" ).getTime();
    ...
    ...
    stringTime = new Date(timeSrv ).toUTCString().slice(17,25); // returns 00:00:00 format time

    ...
    ...
    </script>
    </head>
    You will need to sub the local timezone of your server here date_default_timezone_set('America/Los_Angeles');

    What you then have is a date object returned by the server, set on the clients machine as milliseconds

    the stringTime will be a string time representation already formatted

    You will need to have other time functions if you want to have the time of this object advanced, because this is in milliseconds, you can incorporate other functions that return milliseconds so you can calculate what you need.

    The JavaScript Date() object understands many different time formats, string dates such as RFC dats and ISO dates and times, milliseconds and d/m/y h:m:s formats.

    Avoid using setTimeout callbacks, they take time to set up and consume time, use the setInterval, it only needs to be set once and it will keep on calling the function until page is shut down or navigated away from.
    STOP using $ prefix on JavaScript variable names...
    Please remember to wrap any code you have in forum tags:-

    [CODE]...[/CODE] [HTML]...[/HTML] [PHP]...[/PHP]

    If you can't think outside the box, you will be trapped forever with no escape...

  3. #3
    Join Date
    Nov 2010
    Posts
    1,123
    a js-only solution, in case that's required...

    Code:
    <body>
    
    <div id="txt" style="background-color:transparent; font-family: 'courier', Helvetica, Arial, sans-serif;  font-size: 20pt;"></div>
    <script>
    (function (){
    	var st=getDate();
    	var today = new Date(st);
    	
    function getDate(){	
    	var xmlHttp = new XMLHttpRequest();
    	xmlHttp.open('HEAD',window.location.href.toString(),false);
    	xmlHttp.setRequestHeader("Content-Type", "text/html");
    	xmlHttp.send('');
    	return xmlHttp.getResponseHeader("Date");
    }
    
    function startTime() {
        var h=today.getHours();
        var m=today.getMinutes();
        var s=today.getSeconds();
        m = checkTime(m);
        s = checkTime(s);
        document.getElementById('txt').innerHTML = h+":"+m+":"+s;
    	today.setSeconds(today.getSeconds() + 1);
    }
    
    function checkTime(i) {
        if (i<10) {i = "0" + i};  // add zero in front of numbers < 10
        return i;
    }
    
    startTime();
    setInterval(startTime,1000);
    })();
    </script>
    </body>

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles