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 11 of 11
  1. #1
    New to the CF scene
    Join Date
    Apr 2011
    Posts
    5
    Thanks
    2
    Thanked 0 Times in 0 Posts

    JavaScript Official Time/Internet clock

    hello all, this is my first time on this site and i can usally find all the information i need on google. However iv run into a problem while coding a countdown timer for students in my school i will be hosting it as a mobile website. what im having problems with is getting not the system time, but 1 syncronized time source ex. The official U.S.time or any other single time source if that one will not be the best. any suggestions?

    ps. i am completely new to js so make any suggestions and please explain throughly.

    Thanks!

  • #2
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,986
    Thanks
    79
    Thanked 4,432 Times in 4,397 Posts
    May not be able to do it with JS alone.

    If you can *FIND* a "universal clock" online somewhere, you can probably read it with server-side code (JSP/PHP/ASP) but unless they provide some sort of includable JS you won't be able to read it from JS.

    I'm not sure how much good that will do you. By the time the server goes running across the internet to get the universal clock, grabs the response, sends the page out to the browser, the browser renders it...well, you will certainly be many many milliseconds "off" and possibly as much as a couple of seconds. Despite what people think, the internet is *NOT* instantaneous.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #3
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,986
    Thanks
    79
    Thanked 4,432 Times in 4,397 Posts
    For example, I could even use JSP/ASP/PHP to "screen scrape" that URL you gave us.

    But accurate to the millisecond it will not be.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #4
    New to the CF scene
    Join Date
    Apr 2011
    Posts
    5
    Thanks
    2
    Thanked 0 Times in 0 Posts
    well maybe it will help if i tell you a little more about my project, it will be a mobile website that will take the current time supplied by the website and at 8:00 assuming thats when school starts will start a 2 hour timer down to the second.(note the time can be off by a couple seconds) it really doesn't matter because i can synchronize it with the delay. even then it still does not have to be perfect. one the timer reaches 0 it will start a 5 minute timer for the class changes, 15 minutes for our break time, 2 hours... so forth.

  • #5
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,374
    Thanks
    11
    Thanked 592 Times in 572 Posts
    I think the OP just wants to make sure that kids aren't cheating by changing their PCs clock; ms accuracy is not important in that case.
    In fact, nether precise nor accurate time is important, so long as it's consistent among all users.

    Code:
    <body>
    
    <h1 id="time"></h1>	
    <script type='text/javascript'>
    	function el(tid) {return document.getElementById(tid);}
    	function serverTime(s){
    		el("time").innerHTML= 	"Time is " + s.hour + 
    							":" + s.minute +
    							":"+s.second; 
    	}
    </script>	
    <script type='text/javascript' src='http://json-time.appspot.com/time.json?callback=serverTime'></script>	
    </body>
    i'll leave the formatting up to the OP, but the info needed is all available in the code above.


    you can also pull the date from your own server using ajax's XHRT.getResponseHeader("date") command; if your server attaches that header....
    my site (updated 13/9/26)
    BROWSER STATS [% share] (2014/9/03) IE7:0.1, IE8:4.6, IE11:9.1, IE9:3.1, IE10:3.0, FF:17.2, CH:46, SF:11.4, NON-MOUSE:38%

  • Users who have thanked rnd me for this post:

    yellosnomonkee (04-12-2011)

  • #6
    Banned
    Join Date
    Feb 2011
    Posts
    2,699
    Thanks
    13
    Thanked 395 Times in 395 Posts
    Why not just display how much time is left on page load without having to use javascript.

    If you want some kind of count down to actually display on the page you will probably need javascript and/or AJAX (which is javascript anyway). For browsers that have javascript disabled for some reason, you would have to come up with a plan B, so imo using javascript is not the best solution.

  • #7
    New to the CF scene
    Join Date
    Apr 2011
    Posts
    5
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by bullant View Post
    Why not just display how much time is left on page load without having to use javascript.

    If you want some kind of count down to actually display on the page you will probably need javascript and/or AJAX (which is javascript anyway). For browsers that have javascript disabled for some reason, you would have to come up with a plan B, so imo using javascript is not the best solution.
    alright yes i did not really know what would be best solution and also can you tell me how this will be done like an example of the coding i can edit iv spent all day researching js to do this and really don't feel like learning a whole new language. :/

  • #8
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,986
    Thanks
    79
    Thanked 4,432 Times in 4,397 Posts
    So *is* the important part that the clock be accurate to the "master" system time, so that a student resetting his/her computer's clock won't be able to affect it?

    If so, and if you have a master system host computer that has an accurate enough clock, then this isn't hard. Though you would need a *tiny* bit of server side coding for it (PHP/JSP/ASP).
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • Users who have thanked Old Pedant for this post:

    yellosnomonkee (04-12-2011)

  • #9
    New to the CF scene
    Join Date
    Apr 2011
    Posts
    5
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Old Pedant View Post
    So *is* the important part that the clock be accurate to the "master" system time, so that a student resetting his/her computer's clock won't be able to affect it?

    If so, and if you have a master system host computer that has an accurate enough clock, then this isn't hard. Though you would need a *tiny* bit of server side coding for it (PHP/JSP/ASP).
    Aha! thankyou! an idea has risen! lol i know what do do now! something along the lines of this:

    Code:
    var _countDowncontainer=0;
    var _currentSeconds=0;
     
    function ActivateCountDown(strContainerID, initialValue) {
        _countDowncontainer = document.getElementById(strContainerID);
        
        if (!_countDowncontainer) {
            alert("count down error: container does not exist: "+strContainerID+
                "\nmake sure html element with this ID exists");
            return;
        }
        
        SetCountdownText(initialValue);
        window.setTimeout("CountDownTick()", 1000);
    }
     
    function CountDownTick() {
        if (_currentSeconds <= 0) {
            alert("your time has expired!");
            return;
        }
        
        SetCountdownText(_currentSeconds-1);
        window.setTimeout("CountDownTick()", 1000);
    }
     
    function SetCountdownText(seconds) {
        //store:
        _currentSeconds = seconds;
        
        //get minutes:
        var minutes=parseInt(seconds/60);
        
        //shrink:
        seconds = (seconds%60);
        
        //get hours:
        var hours=parseInt(minutes/60);
        
        //shrink:
        minutes = (minutes%60);
        
        //build text:
        var strText = AddZero(hours) + ":" + AddZero(minutes) + ":" + AddZero(seconds);
        
        //apply:
        _countDowncontainer.innerHTML = strText;
    hosted by my own sever! ha thanks man i will probably get stuck again so ill reuse this thread and multi-quote you all thanks!

  • #10
    New to the CF scene
    Join Date
    Apr 2011
    Posts
    5
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Old Pedant View Post
    So *is* the important part that the clock be accurate to the "master" system time, so that a student resetting his/her computer's clock won't be able to affect it?

    If so, and if you have a master system host computer that has an accurate enough clock, then this isn't hard. Though you would need a *tiny* bit of server side coding for it (PHP/JSP/ASP).
    Quote Originally Posted by bullant View Post
    Why not just display how much time is left on page load without having to use javascript.

    If you want some kind of count down to actually display on the page you will probably need javascript and/or AJAX (which is javascript anyway). For browsers that have javascript disabled for some reason, you would have to come up with a plan B, so imo using javascript is not the best solution.
    Quote Originally Posted by rnd me View Post
    I think the OP just wants to make sure that kids aren't cheating by changing their PCs clock; ms accuracy is not important in that case.
    In fact, nether precise nor accurate time is important, so long as it's consistent among all users.

    Code:
    <body>
    
    <h1 id="time"></h1>	
    <script type='text/javascript'>
    	function el(tid) {return document.getElementById(tid);}
    	function serverTime(s){
    		el("time").innerHTML= 	"Time is " + s.hour + 
    							":" + s.minute +
    							":"+s.second; 
    	}
    </script>	
    <script type='text/javascript' src='http://json-time.appspot.com/time.json?callback=serverTime'></script>	
    </body>
    i'll leave the formatting up to the OP, but the info needed is all available in the code above.


    you can also pull the date from your own server using ajax's XHRT.getResponseHeader("date") command; if your server attaches that header....
    Quote Originally Posted by yellosnomonkee View Post
    Aha! thankyou! an idea has risen! lol i know what do do now! something along the lines of this:

    Code:
    var _countDowncontainer=0;
    var _currentSeconds=0;
     
    function ActivateCountDown(strContainerID, initialValue) {
        _countDowncontainer = document.getElementById(strContainerID);
        
        if (!_countDowncontainer) {
            alert("count down error: container does not exist: "+strContainerID+
                "\nmake sure html element with this ID exists");
            return;
        }
        
        SetCountdownText(initialValue);
        window.setTimeout("CountDownTick()", 1000);
    }
     
    function CountDownTick() {
        if (_currentSeconds <= 0) {
            alert("your time has expired!");
            return;
        }
        
        SetCountdownText(_currentSeconds-1);
        window.setTimeout("CountDownTick()", 1000);
    }
     
    function SetCountdownText(seconds) {
        //store:
        _currentSeconds = seconds;
        
        //get minutes:
        var minutes=parseInt(seconds/60);
        
        //shrink:
        seconds = (seconds%60);
        
        //get hours:
        var hours=parseInt(minutes/60);
        
        //shrink:
        minutes = (minutes%60);
        
        //build text:
        var strText = AddZero(hours) + ":" + AddZero(minutes) + ":" + AddZero(seconds);
        
        //apply:
        _countDowncontainer.innerHTML = strText;
    hosted by my own sever! ha thanks man i will probably get stuck again so ill reuse this thread and multi-quote you all thanks!


    ok, i realized this morning that my sever that is hosting the code above is not using the host machines time but simply running the js on the views pc witch is there time. can somone tell me how you would code something like that?

  • #11
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,986
    Thanks
    79
    Thanked 4,432 Times in 4,397 Posts
    As I said, you have to *PASS* the server's time to the user's browser. And you have to do that with a smidgen of server-side code. JSP or ASP or PHP.

    What to use depends on what kind of server you have (Apache? IIS? Linux? Windows?).

    What you would do then is send to the browser the number of seconds from NOW (server time) to the expiration time (server time).

    And then a simple countdown in the browser is all you need.

    Comment: Avoid using setTimeout(). If there is a "hiccup" in the browser where something takes, say 1.5 seconds, all of a sudden the timeout becomes anything from 1 second to 2.5 seconds.

    Instead, use setInterval( ).
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.


  •  

    Tags for this Thread

    Posting Permissions

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