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 Coder
    Join Date
    Mar 2013
    Posts
    13
    Thanks
    1
    Thanked 0 Times in 0 Posts

    In Drop Down World Clock..How to display the chennai location time.

    Hi,

    In my application Drop down list is having list of locations.But i want add "Chennai" location to the down list.I added the chennai location to the drop down but it's not showing proper time. Because compare to GMT Time chennai time is 5 : 30 hours difference. but it displays half an hour slow. If i take 6 instead of 5:30 it displays half an hour fast.it is not considering minutes. Please help me any one on this. Thanks is advance.
    My code is below.Please let me know where i need to change the below code for displaying chennai location time.

    Code:
    <div style = "text-align: center;">
    <form name="where">
    <select name="city" size="1" onchange="updateclock(this);">
    <option value="" selected>Local time</option>
    <option value="0">London GMT</option>
    <option value="+2">Amsterdam</option>
    <option value="7">Bangkok</option>
    <option value="-3">Buenos Aires</option>
    <option value="-5">Chicago</option>
    <option value="+2">Dordrecht</option>
    <option value="12">Fiji</option>
    <option value="-10">Hawaii</option>
    <option value="8">Hong Kong</option>
    <option value="-4">New York</option>
    <option value="+8">Perth</option>
    <option value="2">Rome</option>
    <option value="-7">San Francisco</option>
    <option value="11">Sydney</option>
    <option value="9">Tokyo</option>
    <Option value="5:30">Chennai</option>
    </select>
    
    <script language="JavaScript">
    
    /*
    Drop Down World Clock- By JavaScript Kit (http://www.javascriptkit.com)
    Portions of code by Kurt @ http://www.btinternet.com/~kurt.grigg/javascript
    This credit notice must stay intact
    */
    
    if (document.all||document.getElementById)
    document.write('<span id="worldclock" style="font:bold 16px Arial;"></span><br>')
    
    zone=0;
    isitlocal=true;
    ampm='';
    
    function updateclock(z){
    zone=z.options[z.selectedIndex].value;
    isitlocal=(z.options[0].selected)?true:false;
    }
    
    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;
    if (hr < 0) hr+=24;
    if (hr > 23) hr-=24;
    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=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>
    
    <!--Place holder for NS4 only-->
    <ilayer id="worldclockns" width=100% height=35><layer id="worldclockns2" width=100% height=35 left=0 top=0 style="font:bold 16px Arial;"></layer></ilayer>
    </form>
    Last edited by VIPStephan; 03-19-2013 at 07:08 PM. Reason: added code BB tags

  • #2
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,731
    Thanks
    202
    Thanked 2,508 Times in 2,486 Posts
    When posting here please help us to help you by making it easier to copy, test and debug your scripts by following the posting guidelines and wrapping your code in CODE tags. It should be obvious why this is necessary. This means use the octothorpe or # button on the toolbar. You can (and should) edit your previous post.

    Please do not double-post. That is clealy prohibited in the forum rules.

    You should note that this is very old code. document.layers and document.all are long obsolete. All modern browsers support document.getElementById().
    Netscape 4 passed away 10 years ago. I do not understand why the maths is so complicated.

    <script language=javascript> is long deprecated and obsolete. 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.

    The code does not lend itself to fractions of an hour (30 minutes). I would suggest setting Chennai to option value 5, then testing if the text of the selected option is "Chennai", if so add 30 minutes to the calculated time. You could do the same with other locations that use 30 minute differences, e.g. Tehran and Caracas.

    Something like this:-


    Code:
    <html>
    <head>
    </head>
    <body>
    
    <select name="city" id = "city" onchange="updateclock()">
    <option value="" selected>Local time in ...</option>
    <option value = 0>London GMT</option>
    <option value = 2 >Amsterdam</option>
    <option value = 7>Bangkok</option>
    <option value = -3>Buenos Aires</option>
    <option value = -5>Chicago</option>
    <option value = 12>Fiji</option>
    <option value= -10>Hawaii</option>
    <option value = 8>Hong Kong</option>
    <option value = -4>New York</option>
    <option value = 8>Perth</option>
    <option value = 3>Rome</option>
    <option value = 7>San Francisco</option>
    <option value = 11>Sydney</option>
    <option value =12>Tokyo</option>
    <option value = 5>Chennai</option>
    </select>
    
    <br><br>
    <span id = "theTime"></span>
    
    <script type="text/javascript">
    
    function updateclock() {
    
    var theTime = new Date();
    
    var val = Number(document.getElementById("city").value);
    var si = document.getElementById("city").selectedIndex;
    var txt = document.getElementById("city").options[si].text; 
    
    var hrs = theTime.getUTCHours();
    var mins = theTime.getUTCMinutes();
    
    hrs = hrs + val;
    if (hrs < 0) {hrs = hrs + 24}
    if (hrs > 23) {hrs = hrs - 24}
    if (txt == "Chennai") {mins = mins + 30}
    if (mins > 59) {
    mins = mins - 60;
    hrs = hrs + 1;
    }
    if (hrs <10) {hrs = "0" + hrs}
    if (mins <10) {mins = "0" + mins}
    
    
    document.getElementById("theTime").innerHTML = "The time in " + txt + " is now " + hrs + ":" + mins;
    
    }	
    </script>
    
    
    </body>
    </html>
    Obviously this takes no account of daylight saving time (DST) if that is applicable and in force in the relevant location.


    All advice is supplied packaged by intellectual weight, and not by volume. Contents may settle slightly in transit.
    Last edited by Philip M; 03-19-2013 at 10:58 AM.

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • #3
    New Coder
    Join Date
    Mar 2013
    Posts
    13
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Hi Philip,

    It's working fine. Thanks for your brisk response on this.

    Thanks,
    Ashok

  • #4
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,731
    Thanks
    202
    Thanked 2,508 Times in 2,486 Posts
    Here is an improved version which makes some allowance for DayLight Saving Time. Assuming you knew the dates when DST is in operation in each country you could of course build this in to the script.


    Code:
    <html>
    <head>
    </head>
    <body>
    
    <form id = "myform">
    
    <select name = "city" id ="city" onchange="showCityTime()">
    <option value="" selected>Local time in ...</option>
    <option value = 0>London UK</option>
    <option value = 1 >Amsterdam NL</option>
    <option value = 7>Bangkok</option>
    <option value = -3>Buenos Aires</option>
    <option value = -5>Caracas</option>
    <option value = 5>Chennai</option>
    <option value = -6>Chicago USA</option>
    <option value = 12>Fiji</option>
    <option value= -10>Hawaii</option>
    <option value = 8>Hong Kong</option>
    <option value = -5>New York USA</option>
    <option value = 4>Moscow</option>
    <option value = 8>Perth WA</option>
    <option value = 2>Rome</option>
    <option value = -8>San Francisco USA</option>
    <option value = 10>Sydney NSW</option>
    <option value = 9>Tokyo</option>
    <option value = 11>Vladivostok</option>
    </select>
    
    &nbsp &nbsp Is Daylight Saving Time currently in operaton in that location?  Yes <input type = "radio" name = "rad1" id = "butn1" onclick = "showCityTime()"> No <input type = "radio" name = "rad1" id = "butn2" onclick = "showCityTime()">
    
    <br><br>
    <span id = "theTime"></span>
    
    </form>
    
    <script type="text/javascript">
    
    function showCityTime() {
    
    var theTime = new Date();
    var val = Number(document.getElementById("city").value);
    var si = document.getElementById("city").selectedIndex;
    var txt = document.getElementById("city").options[si].text; 
    
    if (si !=0) {  // a city has been selected
    
    var dst = 0;
    if (document.getElementById("butn1").checked) {
    dst = 1;  // add one hour Daylight Saving Time
    }
    
    var hrs = theTime.getUTCHours();
    var mins = theTime.getUTCMinutes();
    hrs = hrs + val + dst;
    
    if (txt == "Chennai") {mins = mins + 30}
    if (txt == "Caracas") {mins = mins + 30}
    
    if (mins > 59) {
    mins = mins - 60;
    hrs = hrs + 1;
    }
    
    if (hrs < 0) {hrs = hrs + 24}
    if (hrs > 23) {hrs = hrs - 24}
    
    if (hrs <10) {hrs = "0" + hrs}
    if (mins <10) {mins = "0" + mins}
    
    document.getElementById("theTime").innerHTML = "The time in " + txt + " is now " + hrs + ":" + mins;
    
    }
    
    }	
    </script>
    
    
    </body>
    </html>
    Last edited by Philip M; 03-21-2013 at 07:59 AM. Reason: Correction

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.


  •  

    Posting Permissions

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