因客户需要，我们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"> </span> <span class="P_t"> </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);
.