JS代碼實現(xiàn)全球的時間查看表

2012/11/6 13:08:53作者：佚名來源：網(wǎng)絡(luò)

移動端

【實例名稱】

【實例描述】

在賓館的大堂經(jīng)?？吹饺蚋鞯氐囊恍r間，這也可用在賓館或航空部門的網(wǎng)頁上，用戶可通過選擇時區(qū)來查看不同地方的時間。

【實例代碼】

 
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>標(biāo)題頁-學(xué)無憂（yzddtk.cn）</title>
</head>
<body bgcolor="#cccccc" OnLoad="getTime(timezone, 0)">
<script language="JavaScript">
var timerRunning = false;               
var timezone = "格林尼治標(biāo)準(zhǔn)時間";
var adjust = 0;
function getTime(tzone, diff)           
//獲取指定時區(qū)的時間
{
    if (timerRunning) {
    clearTimeout(updatetime);
    timerRunning = false; 
    }
    gmtOffset=eval(diff+adjust);       
//此處設(shè)置時區(qū)差別
    timezone = tzone;
    checkDateTime();
}
function checkDateTime () {
var today = new Date();                     
//獲取當(dāng)前時間
var year = today.getYear() + 00;            
//獲取年
var month = today.getMonth()+1;             
//獲取月
var date = today.getDate();                 
//獲取日期
var day = today.getDay();                   
//獲取日
var hour = today.getHours();                
//獲取小時
var minute = today.getMinutes();           
 //獲取分
var second = today.getSeconds();            
//獲取秒
var lastSat = date - (day+1);
while (lastSat < 32) lastSat+=7;
if (lastSat > 31) lastSat+=-7;
var firstSat = date - (day+1);
while (firstSat > 0) firstSat+=-7;
if (firstSat < 1) firstSat+=7;
if ((((month == 4) && (date >= firstSat)) || month > 4) && 
(month < 11 || ((month == 10) && day <= lastSat)))
 adjust += 60;
yourOffset = (new Date()).getTimezoneOffset();  
//當(dāng)前計算機(jī)上的時間和UTC 之間相差的分鐘數(shù)
yourOffset = yourOffset + adjust;
if ((((month == 4) && (date > 20)) || month > 4) && 
(month < 11 || ((month == 10) &&
day < 30))) adjust -= 60;
ourDifference = eval(gmtOffset - yourOffset);   
//根據(jù)本地時間和前面獲取的與utc之間的差別
var half = eval(ourDifference % 60);            
//取60的余,剩下的是分鐘數(shù)
ourDifference = Math.round(ourDifference / 60);
//獲取間隔的小時數(shù)
hour = eval(hour - ourDifference);             
//用本地小時-間隔的小時
var m = new Array("",
"1","2","3",
"4","5","6",
"7","8","9",
"10","11","12");              
//月份數(shù)組                     
var leap = eval(year % 4);        
//判斷閏年的變量(不太精確)
if ((half == -30) || (half == 30)) minute += 30;
if (minute > 59) minute -= 60, hour++; 
//當(dāng)超過60分鐘時,小時數(shù)增加
if (minute < 0) minute += 60, hour--; 
//當(dāng)小于60分鐘時,小時數(shù)減少
if (hour > 23) hour -= 24, date += 1;  
//當(dāng)超過24小時時,天數(shù)加1
if (((month == 4) || (month == 6) || 
(month == 9) || (month == 11)) && (date==31)) date = 1, month ++; 
//指定的月為30天,超過30,則月份加1
if (((month == 2) && (date > 28)) && (leap != 0)) date = 1, month ++;
//2月份比較特殊
if ((month == 2) && (date > 29)) date = 1, month++; 
 //非閏年時候的2月份
if (hour < 0) hour += 24, date --;    
 //如果小時數(shù)小于0,則天數(shù)減1
if ((date == 32) && (month == 12)) month = m[1], date = 1, year++; 
//當(dāng)超過一年時
if (date == 32) date = 1, month++;   
//當(dāng)超過一月時
if ((date < 1) && (month == 1)) month= m[12], date = 31, year--;
//當(dāng)前月份為1月份時,如果天數(shù)小于1,則轉(zhuǎn)到12月份
if (date < 1) date = 31, month --;   
//日子小于1時,月份減1
if (((month == 4) || (month == 6) ||  
//一月30天的設(shè)置
(month== 9) || (month == 11)) && (date == 31)) date = 30;
if ((month == 2) && (date > 28)) date = 29;  
//2月份的設(shè)置
if (((month == 2) && (date > 28)) && (leap != 0)) date=28;
for (i=1; i<13; i++) {
if (month == i) {
    month = m[i]; 
    break;
   }
}
var dateTime = hour;
dateTime = ((dateTime < 10) ? "0":"") + dateTime;   
//顯示兩位數(shù)的時間
dateTime = " " + dateTime;
dateTime += ((minute < 10) ? ":0" : ":") + minute; 
//顯示兩位數(shù)的分鐘
dateTime += ((second < 10) ? ":0" : ":") + second; 
//顯示兩位數(shù)的秒
dateTime += (hour >= 12) ? "下午, " : "上午, ";    
//顯示漢字:上午和下午
dateTime += year + "年" + month + "月" + date + "日" ; 
//顯示年月日
document.clock.zonetime.value = dateTime;           
//顯示所選時區(qū)的時間
document.clock.zonename.value = timezone;           
//顯示選擇的時區(qū)
updatetime=setTimeout("checkDateTime()", 1000);     
//定時更新時間-每隔1秒
timerRunning = true;
}
</script>
 <br>
      <form name=clock>
    <input type=text name=zonetime size=28>
       <br>
      <br>
         <b>當(dāng)前選擇的地區(qū)</b><br>
           <input type=text name=zonename size=21>
           <br>
             <br>
           <table border=1 cellpadding=5>
             <tr> 
           <td align=center> 
            <input type=button value="太平洋" 
onClick="getTime(this.value, +480)" name="button">
           </td>
            <td align=center> 
            <input type=button value="中心" 
onClick="getTime(this.value, +420)" name="button">
          </td>
             <td align=center> 
             <input type=button value="東方" 
onClick="getTime(this.value, +300)" name="button">
                        </td>
                      </tr>
                      <tr> 
          <td align=center> 
  <input type=button value="夏威夷" onClick="
getTime(this.value, +600)" name="button">
          </td>
                        <td align=center> 
        <input type=button value="墨西哥" 
onClick="getTime(this.value, +360)" name="button">
                        </td>
                        <td align=center> 
           <input type=button value="新德里" 
onClick="getTime(this.value, -330)" name="button">
                        </td>
                      </tr>
                      <tr> 
                        <td align=center> 
      <input type=button value="北京" 
onClick="getTime(this.value, -420)" name="button">
                        </td>
                        <td align=center> 
  <input type=button value="東京" 
onClick="getTime(this.value, -540)" name="button">
                        </td>
                        <td align=center> 
    <input type=button value="倫敦" 
onClick="getTime(this.value, +0)" name="button">
                        </td>
                      </tr>
                    </table>
                    </form>
</body>
</html>
 

 
【運行效果】

全球的時間查看表運行效果

【難點剖析】

本例的重點有兩個：格林尼治時間的定義，以及當(dāng)?shù)貢r間與標(biāo)準(zhǔn)時間之間的時間差。全球被劃分為24個時區(qū)，以通過英國格林尼治天文臺的本初子午線為標(biāo)準(zhǔn)，其東西經(jīng)度7．5度的范圍為零時區(qū)，每個時區(qū)中央經(jīng)線上的時間就是各時區(qū)的標(biāo)準(zhǔn)時間。“getTimezoneOffset”方法用來獲取當(dāng)?shù)貢r間與UTC(標(biāo)準(zhǔn)時間)之間的時間差。因為此方法返回的是分鐘數(shù)，所以可以通過“/60”的方式獲取小時數(shù)，然后通過“%60”的方式獲取剩余的分鐘數(shù)。

【源碼下載】

為了JS代碼的準(zhǔn)確性，請點擊：全球的時間查看表進(jìn)行本實例源碼下載

標(biāo)簽： JS代碼時間查看表