Saturday, January 1, 2011

javascript - date and time

The javascript posted below outputs the local time where the computer or client is located. If it is in England, the local time will be the England time. If it is in New York, it will show the New York time. The script also outputs the time in Japan, Singapore, New York, San Francisco, and Hawaii. The data will be passed to HTML in the format formXxx.datesXxx.


The javascript library doesn't give the time in the different zone areas or Coordinated Universal Time (UTC). It does, however, provide the current local time, and the offset for the local zone. Use the object of Date() class and its member fuctions ot get these two data.


UTC = the current local time + local offset
the time in different zone area = UTC + its offset



Below is a working javascript.

<!--
function startClock(){

    // 1. get the local time 
    var d=new Date();


    // getTime() returns mS since 1970.01.01 
    var localTime = d.getTime();


    // 2. find the local time offset  
    //    converting minutes to mS
 

    var localOffset=d.getTimezoneOffset()*60000;
   
    // 3. obtain UTC 

    var utc = localTime + localOffset;


    // 4. get local time's offset


    // local time 
    document.formLoc.datesLoc.value=toDestTime(0,0,1);


    // san francisco time:  UTF-8 
    var offsetSfo = -8;
    document.formSfo.datesSfo.value=toDestTime(offsetSfo,utc,0);
   
    // new york time:  UTF-5 

    var offsetJfk = -5;
    document.formJfk.datesJfk.value=toDestTime(offsetJfk,utc,0);



    // hawaii time:  UTF-10 
    var offsetHnl = -10;
    document.formHnl.datesHnl.value=toDestTime(offsetHnl,utc,0);   

    // japan time:  UTF+9 

    var offsetKix = 9;
    document.formKix.datesKix.value=toDestTime(offsetKix,utc,0);   
   
    // singapore time:  UTF+8 

    var offsetSin = 8;
    document.formSin.datesSin.value=toDestTime(offsetSin,utc,0);
       
    /*  document.write(localTime);  */       
    /*  these debug stuff, cause the form outputs NOT to work???
        even one of these makes it fail to display
        the data in the form! */
   
    setTimeout('startClock()',1000);
}



/*  for local time, set i to 0        */
/*  for destination time, set i to 1. */

function toDestTime(offset,u,i){
    var mS;
    var time;
    if(i==0){
        mS = u + (3600000*offset);  // converting mS to hours 

        time = new Date(mS);        // new object for destination 
   }
    else{
        time = new Date();          // new object for local
    }
    var year=time.getFullYear();
    var month=time.getMonth();
    var day=time.getDay();
    var date=time.getDate();      
    var hour=time.getHours();
    var min=time.getMinutes();
    var sec=time.getSeconds();
    var ampm="  ";
    ampm=fixAmpm(hour);
    hour=fixHour(hour);
    min=fix0(min);
    sec=fix0(sec);
    date=fix0(date);
    day=fixDay(day);
    var time=
    (year+"."+month+"."+date+"   "+day
    +"    "+hour+":"+min+":"+sec+" "+ampm);
    return time;
}
function fixAmpm(h){
    if (h>=12){
        ap="PM";
    }
    else{
        ap="AM";
    }
    return ap;
}
function fix0(n){
    if(n<10){
        n="0"+n;
    }
    return n;
}
function fixHour(h){
    if(h>=13){
        h-=12;
    }
    if(h==0){
        h=12;
    }
    if(h<10){
        h=fix0(h);
    }
    return h;
}
function fixDay(d){
    var dA;
    switch(d){
        case 0:
            dA="SUN";
            break;
        case 1:
            dA="MON";
            break;
        case 2:
            dA="TUE";
            break;
        case 3:
            dA="WED";
            break;
        case 4:
            dA="THR";
            break;
        case 5:
            dA="FRI";
            break;
        case 6:
            dA="SAT"
            break;
        default:
            dA="error";
    }
    return dA;
}
-->



The HTML code below shows the interface for the data (formXxx.datesXxx):


<div class="form">
    <h3>Local Time</h3>
    <form name="formLoc">
        <input type="text" name="datesLoc" size="28">

    </form>
    <h3>Japan</h3>
    <form name="formKix">
        <input type="text" name="datesKix" size="28">
    </form>

No comments:

Post a Comment