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 5 of 5
  1. #1
    Regular Coder
    Join Date
    Apr 2012
    Location
    St. Louis, MO
    Posts
    985
    Thanks
    7
    Thanked 101 Times in 101 Posts

    Live clock using server time

    Just something I threw together for something else, thought someone might benefit from it. Displays a live, real time clock value based upon the time of the web server.

    Will not work in IE6 or earlier. Tested in IE7/8, FF12, and Chrome 10.

    Uses AJaX and does NOT require jQuery.

    Code:
    <div id="serverTime"></div>
    <script type="text/javascript">
        String.prototype.pad = function(l,s){ // Pad integers with a leading '0'
        return (l -= this.length) > 0
            ? (s = new Array(Math.ceil(l / s.length) + 1).join(s)).substr(0,s.length) + this + s.substr(0, l-s.length)
            : this ; 
            };
    
    // This will not work in IE6 or earlier
        function getST(){
            var xhr = new XMLHttpRequest();
            xhr.open('HEAD',window.location.href.toString(),false);
            xhr.setRequestHeader("Content-Type","text/html");
            xhr.send('');
            var date = xhr.getResponseHeader("Date");
            date = new Date(date);
            var nowDate = new Date(date.toLocaleString());
            var thisDay = nowDate.getDay();
            switch(thisDay){
                case 0: thisDay = "Sunday"; break; case 1: thisDay = "Monday"; break; case 2: thisDay = "Tuesday"; break;
                case 3: thisDay = "Wednesday"; break; case 4: thisDay = "Thursday"; break; case 5: thisDay = "Friday"; break;
                case 6: thisDay = "Saturday"; break;
                }
            var thisMonth = nowDate.getMonth();
            switch(thisMonth){
                case 0: thisMonth = "January"; break; case 1: thisMonth = "February"; break; case 2: thisMonth = "March"; break;
                case 3: thisMonth = "April"; break; case 4: thisMonth = "May"; break; case 5: thisMonth = "June"; break;
                case 6: thisMonth = "July"; break; case 7: thisMonth = "August"; break; case 8: thisMonth = "September"; break;
                case 9: thisMonth = "October"; break; case 10: thisMonth = "November"; break; case 11: thisMonth ="December"; break;
                }
            var thisDate = nowDate.getDate().toString().pad(2,"0");
            var thisYear = nowDate.getFullYear().toString();
            var thisHour = nowDate.getHours().toString().pad(2,"0");
            var thisMinute = nowDate.getMinutes().toString().pad(2,"0");
            var thisSecond = nowDate.getSeconds().toString().pad(2,"0");
            document.getElementById("serverTime").innerHTML = thisDay+", "+thisMonth+" "+thisDate+", "+thisYear+" "+thisHour+":"+thisMinute+":"+thisSecond;
            } var serverTimeDisplay = setInterval("getST()",1000);
    </script>
    ^_^

    If anyone knows of a website that can offer ColdFusion help that isn't controlled by neurotic, pedantic jerks* (stackoverflow.com), please PM me with a link.
    *
    The neurotic, pedantic jerks are not the owners; just the people who are in control of the "popularity contest".

  • #2
    Regular Coder
    Join Date
    Apr 2012
    Location
    St. Louis, MO
    Posts
    985
    Thanks
    7
    Thanked 101 Times in 101 Posts
    Guess I should have provided a bit more info.

    Gets server time in GMT, converts to local time (.toLocaleString()).

    May not work if server does not respond well to HEAD requests.

    I did it this way because while FF and IE will take the raw Date object and display it identically, Chrome adds info to the end; this will be uniform across all three.
    ^_^

    If anyone knows of a website that can offer ColdFusion help that isn't controlled by neurotic, pedantic jerks* (stackoverflow.com), please PM me with a link.
    *
    The neurotic, pedantic jerks are not the owners; just the people who are in control of the "popularity contest".

  • #3
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,932
    Thanks
    56
    Thanked 552 Times in 549 Posts
    cool.

    But I was getting NaN for the nowDate variable in IE and "invalid date object" in FF. I changed that line to:
    Code:
    var nowDate = new Date(date.toString());
    (toLocaleString() is notoriously hokey in its application across regions)
    and it works fine in all three browsers you metioned

    toUTCString() seems to be problem-free as well.

  • #4
    Regular Coder
    Join Date
    Apr 2012
    Location
    St. Louis, MO
    Posts
    985
    Thanks
    7
    Thanked 101 Times in 101 Posts
    Well, I wanted to display the local time based upon server time. But I suppose you could get the servers timezone and offset from that for actual server time. But getTimezoneOffset() returns minutes, and does not indicate + or -. And not everyone understands GMT/UTC.
    ^_^

    If anyone knows of a website that can offer ColdFusion help that isn't controlled by neurotic, pedantic jerks* (stackoverflow.com), please PM me with a link.
    *
    The neurotic, pedantic jerks are not the owners; just the people who are in control of the "popularity contest".

  • #5
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,932
    Thanks
    56
    Thanked 552 Times in 549 Posts
    for comparison's sake I ran this code:
    Code:
    var d = new Date();
    document.getElementById("time").innerHTML="toString(): "+d.toString()+"<br>toLocaleString(): "+d.toLocaleString()+"<br>toUTCString(): "+d.toUTCString();
    
    var nowLDate = new Date(d.toLocaleString());
    var thisLocaleDay = nowLDate.getDay();
    document.getElementById("time").innerHTML+="<br>toLocaleString().getDay: "+thisLocaleDay;
    var nowSDate = new Date(d.toString());
    var thisSDay = nowSDate.getDay();
    document.getElementById("time").innerHTML+="<br>toString().getDay: "+thisSDay;
    in the three browsers. these are the outputs:

    Chrome 21:
    tostring(): Tue Sep 11 2012 08:28:33 GMT-0600 (Hora est. de América Central)
    toLocaleString(): Tue Sep 11 2012 08:28:33 GMT-0600 (Hora est. de América Central)
    toUTCString(): Tue, 11 Sep 2012 14:28:33 GMT
    toLocaleString().getDay: 2
    toString().getDay: 2

    IE 8:
    tostring(): Tue Sep 11 08:29:01 CST 2012
    toLocaleString(): Martes, 11 de Septiembre de 2012 08:29:01 a.m.
    toUTCString(): Tue, 11 Sep 2012 14:29:01 UTC
    toLocaleString().getDay: NaN
    toString().getDay: 2

    FF 15:
    tostring(): Tue Sep 11 2012 08:29:19 GMT-0600
    toLocaleString(): Martes, 11 de Septiembre de 2012 08:29:19 a.m.
    toUTCString(): Tue, 11 Sep 2012 14:29:19 GMT
    toLocaleString().getDay: NaN
    toString().getDay: 2

    I don't know that much about the date object, but I guess that the problem is that IE and FF output the LocaleString correctly (in Spanish, because I am in Central America) but then can't get the day from that string. Like I say, I think it's a cool piece of code, but you have to be careful with manipulating LocaleString unless you know that all your users are in the same locale.


  •  

    LinkBacks (?)


    Posting Permissions

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