Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Oct 2012
    Posts
    5
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Real-time clock project

    Greetings,

    I am looking for help on a little project I got in mind.

    Please keep in mind that I am new to JavaScript, but I got programming knowledge although I am not an expert.

    Basically, here's my goal, I got a clock which time is different from regular time, it is calculated through a mathematical formula.

    I would like to get precise hour before applying the formula.

    So far I saw posts around the internet talking about using AJAX to request the "HEAD" from google such as:

    Code:
    $.ajax('/', {
        type: 'HEAD',
        url: "http://www.google.com",
        success: function(r,status,xhr) {
            alert(xhr.getResponseHeader('Date'));
        }
    });
    Although this works, eventually the page will get stuck on a background "refresh" and it will prevent the clock to update itself unless it gets unstuck.

    My goal would be to call this AJAX function once and then generate the clock from it and have the clock update itself using setInterval() without asking continuously Google forever for the date.

    If I use 2 separate functions, I'll still have to request the date, which will be again requested because of the setInterval().

    I am kind of stuck here, although I do not completely got the JavaScript mindset and way to think, I hope I am missing something so I can make this work.

    Can anyone help me out please? That would be highly appreciated.

    If you got questions, just let me know.

    I can also provide part of the code, but I do not want to disclose it completely at the moment.

    Thanks a lot again.

  • #2
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,335
    Thanks
    11
    Thanked 588 Times in 569 Posts
    JS keeps perfect time, no need to fetch an external opinion more than once.
    i just set the title for this demo, integrate as needed.

    Code:
    var serverOffset;
    
    $.ajax('/', {
        type: 'HEAD',
        url: "/",
        success: function(r,status,xhr) {
            serverOffset=new Date(xhr.getResponseHeader('Date')) - +new Date();
        }
    });
    
    
    function serverTime(){
       return new Date(  Date.now() - (serverOffset||0) );
    } 
    
    
    setInterval(function(){
      document.title=serverTime().toLocaleTimeString();
    }, 333);
    my site (updated 13/9/26)
    BROWSER STATS [% share] (2014/5/28) IE7:0.1, IE8:5.3, IE11:8.4, IE9:3.2, IE10:3.2, FF:18.2, CH:46, SF:7.9, NON-MOUSE:32%

  • #3
    New to the CF scene
    Join Date
    Oct 2012
    Posts
    5
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Greetings,

    Thanks a lot for your reply. Here is what I got now (removed code like formulas but kept the essential):

    HTML file:

    Code:
    <script src="http://example.com/clock.js" type="text/javascript"></script>
    
    <script>var serverOffset;
    
    $.ajax('/', {
        type: 'HEAD',
        url: "/",
        success: function(r,status,xhr) {
            serverOffset=new Date(xhr.getResponseHeader('Date')) - +new Date();
        }
    });
    
    </script>
    
    <body onload="updateTimes(); setInterval('updateTimes()', 1000);">
    
    <table align="center" style="margin: 0px auto;">
    
    <tbody>
    
    <tr align="center">
    
    <td>
    
    <span style="color: rgb(255, 255, 224);" class="style6" id="modifiedtime">&nbsp;</span>
    
    </td>
    
    </tr>
    
    <tr valign="top">
    
    <td>
    
    <span style="display: none"; class="style6" id="currenttime">&nbsp;</span>
    
    </td>
    
    </tr>
    
    </tbody>
    
    </table>
    Clock.js:

    Code:
    function serverTime(){
       return new Date(  Date.now() - (serverOffset||0) );
    } 
    
    function updateTimes() {
        updateCurrentTime();
        updatemodifiedTime();
    }
    
    function updateCurrentTime() {
            var currenttime;
    	currenttime = serverTime().toLocaleTimeString();
    	document.getElementById("modifiedtime").firstChild.nodeValue = currenttime;
    }
    
    function updatemodifiedTime() {
            var modifiedtime;
    	modifiedtime = serverTime().toLocaleTimeString();
    	document.getElementById("modifiedtime").firstChild.nodeValue = modifiedtime;
    }
    That way I get an "undefined" if I alert the serverOffset, I was not sure if I had to put it in a .js file as well.

    Also, will the .js file will be able to correctly use that same variable since I declared it as global?

    Thanks a lot for your help and time again.

  • #4
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,335
    Thanks
    11
    Thanked 588 Times in 569 Posts
    Quote Originally Posted by Ryu Hayabusa View Post
    That way I get an "undefined" if I alert the serverOffset, I was not sure if I had to put it in a .js file as well.

    Also, will the .js file will be able to correctly use that same variable since I declared it as global?

    Thanks a lot for your help and time again.
    you can put all the code in the js file, or swap the order of the two script tags, everything else looks ok as long as jQuery is being loaded and stuff.
    paste the entire html, or a simplified version of it that still shows the problem if you're still stuck...
    my site (updated 13/9/26)
    BROWSER STATS [% share] (2014/5/28) IE7:0.1, IE8:5.3, IE11:8.4, IE9:3.2, IE10:3.2, FF:18.2, CH:46, SF:7.9, NON-MOUSE:32%

  • #5
    Regular Coder
    Join Date
    May 2012
    Location
    France
    Posts
    224
    Thanks
    0
    Thanked 32 Times in 30 Posts
    @rndme thanks for your code.

    The server serverOffset value is to add to client date to get the sever date. Is'nt It ?
    Then I propose a plus sign in your serverTime function. Or I made a mistake ?


  •  

    Posting Permissions

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