當前位置：軟件學堂 > 資訊首頁 > 網絡編程 > 編程其他 > JS代碼實現全球的時間查看表

JS代碼實現全球的時間查看表

2012/11/6 13:08:53作者：佚名來源：網絡

移動端

【實例名稱】

JS代碼實現全球的時間查看表

【實例描述】

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

【實例代碼】

 
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>標題頁-學無憂（www.yzddtk.cn）</title>
</head>
<body bgcolor="#cccccc" OnLoad="getTime(timezone, 0)">
<script language="JavaScript">
var timerRunning = false;               
var timezone = "格林尼治標準時間";
var adjust = 0;
function getTime(tzone, diff)           
//獲取指定時區的時間
{
    if (timerRunning) {
    clearTimeout(updatetime);
    timerRunning = false; 
    }
    gmtOffset=eval(diff+adjust);       
//此處設置時區差別
    timezone = tzone;
    checkDateTime();
}
function checkDateTime () {
var today = new Date();                     
//獲取當前時間
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();  
//當前計算機上的時間和UTC 之間相差的分鐘數
yourOffset = yourOffset + adjust;
if ((((month == 4) && (date > 20)) || month > 4) && 
(month < 11 || ((month == 10) &&
day < 30))) adjust -= 60;
ourDifference = eval(gmtOffset - yourOffset);   
//根據本地時間和前面獲取的與utc之間的差別
var half = eval(ourDifference % 60);            
//取60的余,剩下的是分鐘數
ourDifference = Math.round(ourDifference / 60);
//獲取間隔的小時數
hour = eval(hour - ourDifference);             
//用本地小時-間隔的小時
var m = new Array("",
"1","2","3",
"4","5","6",
"7","8","9",
"10","11","12");              
//月份數組                     
var leap = eval(year % 4);        
//判斷閏年的變量(不太精確)
if ((half == -30) || (half == 30)) minute += 30;
if (minute > 59) minute -= 60, hour++; 
//當超過60分鐘時,小時數增加
if (minute < 0) minute += 60, hour--; 
//當小于60分鐘時,小時數減少
if (hour > 23) hour -= 24, date += 1;  
//當超過24小時時,天數加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 --;    
 //如果小時數小于0,則天數減1
if ((date == 32) && (month == 12)) month = m[1], date = 1, year++; 
//當超過一年時
if (date == 32) date = 1, month++;   
//當超過一月時
if ((date < 1) && (month == 1)) month= m[12], date = 31, year--;
//當前月份為1月份時,如果天數小于1,則轉到12月份
if (date < 1) date = 31, month --;   
//日子小于1時,月份減1
if (((month == 4) || (month == 6) ||  
//一月30天的設置
(month== 9) || (month == 11)) && (date == 31)) date = 30;
if ((month == 2) && (date > 28)) date = 29;  
//2月份的設置
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;   
//顯示兩位數的時間
dateTime = " " + dateTime;
dateTime += ((minute < 10) ? ":0" : ":") + minute; 
//顯示兩位數的分鐘
dateTime += ((second < 10) ? ":0" : ":") + second; 
//顯示兩位數的秒
dateTime += (hour >= 12) ? "下午, " : "上午, ";    
//顯示漢字:上午和下午
dateTime += year + "年" + month + "月" + date + "日" ; 
//顯示年月日
document.clock.zonetime.value = dateTime;           
//顯示所選時區的時間
document.clock.zonename.value = timezone;           
//顯示選擇的時區
updatetime=setTimeout("checkDateTime()", 1000);     
//定時更新時間-每隔1秒
timerRunning = true;
}
</script>
 <br>
      <form name=clock>
    <input type=text name=zonetime size=28>
       <br>
      <br>
         <b>當前選擇的地區</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>
 

 
【運行效果】

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

【難點剖析】

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

【源碼下載】

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

標簽：時間

上一篇：PhotoShop調出照片紫紅色效果調色教程
下一篇：JS實現無刷新定時取數據

相關文章

熱門軟件/ 推薦游戲/ 手機軟件

資訊分類

Dreamweaver Flash DIV+CSS 編程其他

推薦教程

精品軟件推薦

360安全衛士

訊飛輸入法

欧美一级一极性活片免费观看,欧美一级艳片欧美精品,欧美一级性爱大片,欧美一级囗交视频视频,欧美一级特黄录像视频