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 7 of 7
  1. #1
    New to the CF scene
    Join Date
    Jun 2010
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    World Clock - Add day to the output

    Hi,
    JS newbie here. Could someone please let me know how I would output the day as well in this world clock example?

    Thanks in advance.

  • #2
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,917
    Thanks
    203
    Thanked 2,531 Times in 2,509 Posts
    As the day/date will change depending on the timezone (0100 Tuesday in UK is 2000 Monday in EST), you would need to use server-side scripting to do this.

    All advice is supplied packaged by intellectual weight, and not by volume. Contents may settle slightly in transit.

  • #3
    New to the CF scene
    Join Date
    Jun 2010
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I managed to added in the day using the below code. Thanks to W3C for the tutorial.
    Code:
    <form name="worldclock">
     
    <select name="city" size="1" onchange="UpdateClock(this);"> 
        <option value="" selected="selected" disabled="disabled">Select a destination</option>
        <option value="" disabled="disabled">-----------------------------</option>
        <option value="0">London GMT</option> 
        <option value="1">Rome</option>
        <option value="7">Bangkok</option>
        <option value="8">Hong Kong</option>
        <option value="9">Tokyo</option> 
        <option value="10">Sydney</option>
        <option value="12">Fiji</option>
        <option value="-10">Hawaii</option>
        <option value="-8">San Francisco</option> 
        <option value="-5">New York</option>
        <option value="-3">Buenos Aires</option>
    </select>
     
    <script language="javascript">
     
    if (document.all || document.getElementById)
        
        // print out the results
        document.write('<br /><br /><span id="worldclock" style="font: bold 16px Arial;"></span><br />')
     
        zone = 0; // set the local time
        isitlocal = true; // display local time by default
        ampm = '';
     
    //--------------------------------------------------
    //    UpdateClock
    //    Updates the clock results based on the selected 
    //    option
    //--------------------------------------------------
    function UpdateClock(z) {
        zone = z.options[z.selectedIndex].value;
        isitlocal = (z.options[0].selected)?true:false;
    }
     
    //--------------------------------------------------
    //    WorldClock
    //    Calculates the difference and current time 
    //    based on the <option> value=""
    //-------------------------------------------------
    function WorldClock() {
        now = new Date();
        
        ofst = now.getTimezoneOffset()/60;
        secs = now.getSeconds();
        sec = -1.57 + Math.PI*secs/30;
        mins = now.getMinutes();
        min = -1.57 + Math.PI*mins/30;
        hr = (isitlocal)?now.getHours():(now.getHours() + parseInt(ofst)) + parseInt(zone);
        hrs = -1.575 + Math.PI*hr/6+Math.PI*parseInt(now.getMinutes())/360;
        
        var newday = 0;
        if (hr < 0) {hr += 24; newday = -1;}
        if (hr > 23) {hr -= 24; newday = 1;}
    
        	// start of getting date data
    	var mydate= new Date();
    	mydate.setDate(mydate.getDate()+newday);
    
    	var weekday=new Array(7);
    	weekday[0]="Sunday";
    	weekday[1]="Monday";
    	weekday[2]="Tuesday";
    	weekday[3]="Wednesday";
    	weekday[4]="Thursday";
    	weekday[5]="Friday";
    	weekday[6]="Saturday";
    
        ampm = (hr > 11) ? "PM" : "AM";
        statusampm = ampm.toLowerCase();
     
        hr2 = hr;
        if (hr2 == 0) hr2 = 12; 
        (hr2 < 13) ? hr2 : hr2 %= 12;
        if (hr2 < 10) hr2 = "0" + hr2
        
        var finaltime = weekday[mydate.getDay()] + ' ' + hr2 + ':' + ((mins < 10) ? "0" + mins : mins) + ':' + ((secs < 10) ? "0" + secs : secs) + ' ' + statusampm;
     
            if (document.all)
                worldclock.innerHTML=finaltime
                
            else if (document.getElementById)
                document.getElementById("worldclock").innerHTML = finaltime
                    
            else if (document.layers) {
                document.worldclockns.document.worldclockns2.document.write(finaltime)
                document.worldclockns.document.worldclockns2.document.close()
            }
     
    setTimeout('WorldClock()',1000);
     
    }
     
    window.onload = WorldClock
     
    //-->
    </script>
    </form>
    Last edited by NaRzY; 06-22-2010 at 07:55 AM.

  • #4
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,917
    Thanks
    203
    Thanked 2,531 Times in 2,509 Posts
    Yes, that adds the day name nicely. Showing the date is harder!

    <script language=javascript> is long deprecated and obsolete. Use <script type = "text/javascript"> instead. The <!-- and //--> comment (hiding) tags have not been necessary since IE3 (i.e. since September 1997). If you see these in some published script it is a warning that you are looking at ancient and perhaps unreliable code.

    All modern browsers support document.getElementById(); None support document.layers.

    You should bear in mind that the times shown do not take account of Daylight Saving Time (where applicable). So quite a few city times are one hour out.

    There are other problems as well. It is not a good idea to give your form the name "worldclock" and have a <span> with the same id.
    function UpdateClock(z) does not call UpDateClock();
    window.onload = WorldClock crashes the browser by setting multiple setTimouts.
    Last edited by Philip M; 06-22-2010 at 09:05 AM.

  • #5
    New to the CF scene
    Join Date
    Jun 2010
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I changed the form name and name it works in all browsers. Thanks.
    Last edited by NaRzY; 06-23-2010 at 12:02 AM.

  • #6
    New to the CF scene
    Join Date
    Jun 2010
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Next issue - how can I get this to handle time zones with decimals? i.e. 4 hours 30 minutes behind GMT?

  • #7
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,917
    Thanks
    203
    Thanked 2,531 Times in 2,509 Posts
    Quote Originally Posted by NaRzY View Post
    Next issue - how can I get this to handle time zones with decimals? i.e. 4 hours 30 minutes behind GMT?
    I have not tested this fully, but it seems to work.

    Code:
    <option value="4.5">Delhi</option>
    
    ofst = now.getTimezoneOffset()/60; //time difference between Greenwich Mean Time (GMT) and local time, in minutes.
    secs = now.getSeconds();
    mins = now.getMinutes();
    hr = (isitlocal)?now.getHours():(now.getHours() + parseInt(ofst)) + parseInt(zone);
    if (Math.abs(zone%1) == .5) {mins = mins + 30};
    if (mins>59) {mins = mins -60; hr = hr + 1}
    
    //hrs = -1.575 + Math.PI*hr/6+Math.PI*parseInt(now.getMinutes())/360;  // does nothing!
    There is still the Daylight Saving Time problem though. All the times are based on GMT but DST is in operation here in the UK. It is possible to detect whether DST is used in a particular country, but not whether it is actually in operation on the particular date. (Dates when DST apply vary from country to country). See:- http://www.timeanddate.com/time/dst2010.html

    You could test whether the date today lies within a date range (28th March 2010 to 31st Ocober 2010 - the dates when DST applies in Europe) with:-

    Code:
    <script type="text/javascript">
    function dateWithin(beginDate,endDate) {
    var today = new Date()
    var b,e,c; 
    b = Date.parse(beginDate); 
    e = Date.parse(endDate); 
    c = Date.parse(today); 
    if((c <= e && c >= b)) { return true } 
    else {
    return false;
    } 
    }
    
    alert(dateWithin('02/28/2010','09/31/2010'));  // months are 0-11
    
    </script>
    Last edited by Philip M; 06-23-2010 at 09:58 AM.


  •  

    Posting Permissions

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