jQuery 選擇城市，顯示對應的即時時區時間

因客戶須要，咱們CRM系統中，jQuery 弄個時區插件

如圖：

 HTML:

<div id="cityDate">
                <i class="P_arrow"></i>
                <h3>
                    <span class="P_n">世界時鐘：</span>
                    <span class="P_c">a</span>
                    <span class="P_d">07月21日 週五 16:33:22</span>
                    <span class="P_w">&nbsp;</span>
                    <span class="P_t">&nbsp;</span>
                </h3>
                <div class="timeSelect M_scrollBar">
                    <dd>阿布賈,尼日利亞</dd>

                </div>
                <script language="javascript">
                    $(function(){
                        //全部城市和時間靜態輸出
                        var cityID = 170; //初始城市，中國，北京
                        var showZone = $.showZone(cityID);
                        $("#cityDate .timeSelect dd").live('click',function(e){
                            cityID = $(this).attr("cityID");
                            $.showZone(cityID);
                        });
                    });
                </script>
            </div>

jQuery:

// 時區城市
//$(function(){
//全部城市和時間靜態輸出
//var cityID = 170;    //中國，北京
//var showZone = $.showZone(cityID);
//$("#cityDate .timeSelect dd").live('click',function(e){
//    cityID = $(this).attr("cityID");
//    $.showZone(cityID);
// });
//});
(function ($) {
    $.extend({
        "showZone": function (id) {

            var city = new Array(['安道爾 · 安道爾','A','1'],['阿爾及利亞 · 阿爾及爾','A','2'],['阿爾巴尼亞 · 地拉那','A','3'],['奧地利 · 維也納','A','4'],['澳洲 · 伯斯','H','5'],['澳洲 · 達爾文','I1','6'],['澳洲 · 布里斯本','K','7'],['澳洲 · 墨爾本','K','8'],['澳洲 · 昆士蘭','K','9'],['澳洲 · 悉尼','K','10'],['澳洲 · 阿得雷德','K1','11'],['阿聯酋 · 阿布達比','D','12'],['阿聯酋 · 杜拜','D','13'],['阿曼 · 馬斯喀特','D','14'],['阿富汗 · 喀布爾','D1','15'],['阿根廷 · 布宜洛斯艾利斯','P','16'],['阿拉斯加 · 安克雷奇','V','17'],['埃尼威托克','Y','18'],['埃及 · 開羅','B','19'],['埃塞俄比亞','C','20'],['比利時 · 布魯塞爾','A','21'],['波蘭 · 華沙','A','22'],['波札那 · 嘉柏隆','B','23'],['保加利亞 · 索非亞','B','24'],['巴基斯坦 · 伊斯蘭堡','E','25'],['巴基斯坦 · 喀拉蚩','E','26'],['巴西 · 巴西利亞','P','27'],['巴西 · 里約熱內盧','P','28'],['巴巴多斯 · 布里奇敦','Q','29'],['巴布亞新畿內亞','K','30'],['百慕達 · 哈密爾頓','Q','31'],['玻利維亞 · 拉巴斯','Q','32'],['巴拉圭 · 亞松森','Q','33'],['巴哈馬 · 拿騷','R','34'],['巴拿馬 · 巴拿馬城','R','35'],['冰島 · 雷克雅未克','Z','36'],['北韓 · 平壤','I','37'],['德國 · 柏林','A','38'],['丹麥 · 哥本哈根','A','39'],['德國 · 法蘭克福','A','40'],['德國 · 漢堡','A','41'],['達累斯薩拉姆','C','42'],['多米尼加共和國','Q','43'],['多米尼克 · 羅索','Q','44'],['俄羅斯 · 莫斯科','C','45'],['厄瓜多爾 · 基多','R','46'],['法國 · 里昂','A','47'],['法國 · 巴黎','A','48'],['芬蘭 · 赫爾辛基','B','49'],['佛得角 · 普拉亞','N','50'],['菲律賓 · 馬尼拉','H','51'],['斐濟 · 蘇瓦','M','52'],['剛果 · 布拉柴維爾','A','53'],['哥倫比亞 · 波哥大','R','54'],['古巴 · 哈瓦那','R','55'],['哥斯達黎加 · 聖荷塞','S','56'],['甘比爾羣島','V','57'],['荷蘭 · 阿姆斯特丹','A','58'],['荷蘭 · 羅索','A','59'],['荷屬安的列斯羣島','Q','60'],['洪都拉斯 · 特古西加爾巴','S','61'],['惠森迪島','K','62'],['捷克 · 布拉格','A','63'],['津巴布韋 · 哈拉雷','B','64'],['柬浦寨 · 金邊','G','65'],['基裏巴斯共和國','M2','66'],['加拿大 · 紐芬蘭省','P1','67'],['加拿大 · 新斯科舍','Q','68'],['加拿大 · 蒙特利爾','R','69'],['加拿大 · 渥太華','R','70'],['加拿大 · 多倫多','R','71'],['加拿大 · 溫尼伯','S','72'],['加拿大 · 埃德蒙頓','T','73'],['加拿大 · 溫哥華','U','74'],['加納 · 阿克拉','Z','75'],['喀密隆 · 雅溫得','A','76'],['科威特 · 科威特','C','77'],['肯雅 · 奈洛比','C','78'],['盧森堡','A','79'],['黎巴嫩 · 貝魯特','B','80'],['羅馬尼亞 · 布加勒斯特','B','81'],['美國 · 馬里蘭','R','82'],['美國 · 新澤西','R','83'],['美國 · 紐約','R','84'],['美國 · 費城','R','85'],['美國 · 華盛頓','R','86'],['美國 · 芝加哥','S','87'],['美國 · 亞特蘭大','R','88'],['美國 · 波士頓','R','89'],['美國 · 達拉斯','S','90'],['美國 · 休斯敦','S','91'],['美國 · 威斯康辛','S','92'],['美國 · 蒙大拿','T','93'],['美國 · 新墨西哥','T','94'],['美國 · 聖迭戈','T','95'],['美國 · 加利福尼亞','U','96'],['美國 · 拉斯維加斯','U','97'],['美國 · 洛杉機','U','98'],['美國 · 三藩市','U','99'],['美國 · 西雅圖','U','100'],['美國 · 夏威夷','W','101'],['美國 · 檀香山','W','102'],['馬來西亞 · 吉隆坡','H','103'],['孟加拉 · 達卡','F','104'],['緬甸','F1','105'],['祕魯 · 利馬','R','106'],['摩洛哥 · 卡薩布蘭卡','Z','107'],['摩洛哥 · 拉巴特','Z','108'],['莫爾茲比港','K','109'],['墨西哥 · 墨西哥城','S','110'],['尼日利亞 · 阿布賈','A','111'],['挪威 · 奧斯陸','A','112'],['南非 · 開普敦','B','113'],['南非 · 約翰尼斯堡','B','114'],['南韓 · 漢城/首爾','I','115'],['葡萄牙 · 里斯本','Z','116'],['瑞士 · 伯恩','A','117'],['瑞典 · 斯德哥爾摩','A','118'],['瑞士 · 蘇黎世','A','119'],['日本 · 扎幌','I','120'],['日本 · 東京','I','121'],['日本 · 大阪','I','122'],['蘇丹 · 喀土木','B','123'],['尚比亞 · 路沙卡','B','124'],['塞普路斯 · 尼古西亞','B','125'],['沙特阿拉伯 · 利雅德','C','126'],['斯里蘭卡 · 可倫坡','F','127'],['薩摩亞','M1','128'],['聖多明各','Q','129'],['薩爾瓦多 · 聖薩爾瓦多','S','130'],['塞內加爾 · 達喀爾','Z','131'],['斯里巴加灣','H','132'],['土耳其 · 伊斯坦布爾','B','133'],['坦桑尼亞','C','134'],['泰國 · 曼谷','G','135'],['泰國 · 布吉','G','136'],['特林達迪島','O','137'],['烏干達 · 坎帕拉','C','138'],['烏拉圭 · 蒙得維的亞','P','139'],['威廉斯塔德','Q','140'],['危地馬拉 · 危地馬拉城','S','141'],['汶萊','H','142'],['西班牙 · 巴塞隆納','A','143'],['匈牙利 · 布達佩斯','A','144'],['西班牙 · 馬德里','A','145'],['希臘 · 雅典','B','146'],['新加坡','H','147'],['新西蘭 · 威靈頓','M','148'],['新喀里多尼亞 · 努美阿','L','149'],['新西蘭 · 奧克蘭','M','150'],['意大利 · 米蘭','A','151'],['意大利 · 羅馬','A','152'],['以色列 · 耶路撒冷','B','153'],['亞的斯亞貝巴','C','154'],['也門 · 薩那','C','155'],['伊朗 · 德克蘭','C1','156'],['印度 · 孟買','E1','157'],['印度 · 加爾各答','E1','158'],['印度 · 新德里','E1','159'],['越南 · 河內','G','160'],['印尼 · 雅加達','G','161'],['牙買加 · 金斯敦','R','162'],['英國 · 阿伯丁','Z','163'],['英國 · 愛丁堡','Z','164'],['英國 · 格拉斯哥','Z','165'],['英國 · 利物浦','Z','166'],['英國 · 倫敦','Z','167'],['英國 · 曼徹斯特','Z','168'],['英國 · 紐卡素','Z','169'],['中國 · 北京','H','170'],['中國 · 重慶','H','171'],['中國 · 廣州','H','172'],['中國 · 哈爾濱','H','173'],['中國 · 香港','H','174'],['中國 · 澳門','H','175'],['中國 · 南京','H','176'],['中國 · 上海','H','177'],['中國 · 臺北','H','178'],['中國 · 烏魯木齊','H','179'],['中途島','X','180'],['智利 · 聖地亞哥','Q','181']);

            var zone = new Array(['A','1'],['B','2'],['C','3'],['C1','3.5'],['D','4'],['D1','4.5'],['E','5'],['E1','5.5'],['F','6'],['F1','6.5'],['G','7'],['H','8'],['I','9'],['I1','9.5'],['K','10'],['K1','10.5'],['L','11'],['M','12'],['M1','12.5'],['M2','13'],['N','-1'],['O','-2'],['P','-3'],['P1','-3.5'],['Q','-4'],['R','-5'],['S','-6'],['T','-7'],['U','-8'],['V','-9'],['W','-10'],['X','-11'],['Y','-12'],['Z','0']);

            //HTML輸出
            var cityHtml = "";
            for(var i=0;i<city.length;i++){
                cityHtml += "<dd cityID='" + city[i][2] + "'>" + city[i][0] + "</dd>";
            }
            $("#cityDate .timeSelect").html( cityHtml );    //列表輸出城市

            //獲得日期
            function getLocalTime(cityZoneNum) {
                //if (typeof cityZoneNum !== 'number') return;
                var d = new Date();
                var len = d.getTime();
                var offset = d.getTimezoneOffset() * 60000;
                var utcTime = len + offset;

                var dZone = new Date(utcTime + 3600000 * cityZoneNum);

                var vYear = dZone.getFullYear();
                var vMon = dZone.getMonth() + 1;
                var vDay = dZone.getDate();
                var h = dZone.getHours();
                var m = dZone.getMinutes();
                var se = dZone.getSeconds();

                var P_d = (vMon<10 ? "0" + vMon : vMon)+"月"+(vDay<10 ? "0"+ vDay : vDay)+"日";
                var P_w = "周" + "日一二三四五六".split("")[dZone.getDay()];
                var P_t = (h<10 ? "0"+ h : h)+":"+(m<10 ? "0" + m : m)+":"+(se<10 ? "0" +se : se);

                //輸出時間日期
                var $P_d = $("#cityDate h3 .P_d");
                var $P_w = $("#cityDate h3 .P_w");
                var $P_t = $("#cityDate h3 .P_t");
                $P_d.text(P_d);
                $P_w.text(P_w);
                $P_t.text(P_t);
            }

            //選擇城市
            var $P_c = $("#cityDate .P_c");
            var $dd = $("#cityDate .timeSelect dd");
            for(var i=0;i<city.length;i++){

                if( city[i][2] == id ){
                    $P_c.text( city[i][0] );    //默認及所選城市輸出

                    for(var j=0;j<zone.length;j++){
                        if( zone[j][0] == city[i][1] ){
                            var zoneID = zone[j][1];
                            var timeDo = window.setInterval(function(){
                                getLocalTime(zoneID);
                            },1000);

                            //點擊選項的同時，結束以前定時器
                            $dd.live('click',function(e){
                                window.clearInterval(timeDo);
                                //$("#cityDate h3 .P_d, #cityDate h3 .P_w, #cityDate h3 .P_t").text("---");
                            });
                        }
                    }
                    return false;
                }else{
                    $P_c.html( "<em style='color:red'>no this cityID</em>" );
                }
            }
        }
    });
})(jQuery);

 

 

.