因客户需要,我们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日 周五 ::</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 = ; //初始城市,中国,北京
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',''],['阿尔及利亚 · 阿尔及尔','A',''],['阿尔巴尼亚 · 地拉那','A',''],['奥地利 · 维也纳','A',''],['澳洲 · 伯斯','H',''],['澳洲 · 达尔文','I1',''],['澳洲 · 布里斯本','K',''],['澳洲 · 墨尔本','K',''],['澳洲 · 昆士兰','K',''],['澳洲 · 悉尼','K',''],['澳洲 · 阿得雷德','K1',''],['阿联酋 · 阿布达比','D',''],['阿联酋 · 杜拜','D',''],['阿曼 · 马斯喀特','D',''],['阿富汗 · 喀布尔','D1',''],['阿根廷 · 布宜洛斯艾利斯','P',''],['阿拉斯加 · 安克雷奇','V',''],['埃尼威托克','Y',''],['埃及 · 开罗','B',''],['埃塞俄比亚','C',''],['比利时 · 布鲁塞尔','A',''],['波兰 · 华沙','A',''],['波札那 · 嘉柏隆','B',''],['保加利亚 · 索非亚','B',''],['巴基斯坦 · 伊斯兰堡','E',''],['巴基斯坦 · 喀拉蚩','E',''],['巴西 · 巴西利亚','P',''],['巴西 · 里约热内卢','P',''],['巴巴多斯 · 布里奇敦','Q',''],['巴布亚新畿内亚','K',''],['百慕达 · 哈密尔顿','Q',''],['玻利维亚 · 拉巴斯','Q',''],['巴拉圭 · 亚松森','Q',''],['巴哈马 · 拿骚','R',''],['巴拿马 · 巴拿马城','R',''],['冰岛 · 雷克雅未克','Z',''],['北韩 · 平壤','I',''],['德国 · 柏林','A',''],['丹麦 · 哥本哈根','A',''],['德国 · 法兰克福','A',''],['德国 · 汉堡','A',''],['达累斯萨拉姆','C',''],['多米尼加共和国','Q',''],['多米尼克 · 罗索','Q',''],['俄罗斯 · 莫斯科','C',''],['厄瓜多尔 · 基多','R',''],['法国 · 里昂','A',''],['法国 · 巴黎','A',''],['芬兰 · 赫尔辛基','B',''],['佛得角 · 普拉亚','N',''],['菲律宾 · 马尼拉','H',''],['斐济 · 苏瓦','M',''],['刚果 · 布拉柴维尔','A',''],['哥伦比亚 · 波哥大','R',''],['古巴 · 哈瓦那','R',''],['哥斯达黎加 · 圣荷塞','S',''],['甘比尔群岛','V',''],['荷兰 · 阿姆斯特丹','A',''],['荷兰 · 罗索','A',''],['荷属安的列斯群岛','Q',''],['洪都拉斯 · 特古西加尔巴','S',''],['惠森迪岛','K',''],['捷克 · 布拉格','A',''],['津巴布韦 · 哈拉雷','B',''],['柬浦寨 · 金边','G',''],['基里巴斯共和国','M2',''],['加拿大 · 纽芬兰省','P1',''],['加拿大 · 新斯科舍','Q',''],['加拿大 · 蒙特利尔','R',''],['加拿大 · 渥太华','R',''],['加拿大 · 多伦多','R',''],['加拿大 · 温尼伯','S',''],['加拿大 · 埃德蒙顿','T',''],['加拿大 · 温哥华','U',''],['加纳 · 阿克拉','Z',''],['喀密隆 · 雅温得','A',''],['科威特 · 科威特','C',''],['肯雅 · 奈洛比','C',''],['卢森堡','A',''],['黎巴嫩 · 贝鲁特','B',''],['罗马尼亚 · 布加勒斯特','B',''],['美国 · 马里兰','R',''],['美国 · 新泽西','R',''],['美国 · 纽约','R',''],['美国 · 费城','R',''],['美国 · 华盛顿','R',''],['美国 · 芝加哥','S',''],['美国 · 亚特兰大','R',''],['美国 · 波士顿','R',''],['美国 · 达拉斯','S',''],['美国 · 休斯敦','S',''],['美国 · 威斯康辛','S',''],['美国 · 蒙大拿','T',''],['美国 · 新墨西哥','T',''],['美国 · 圣迭戈','T',''],['美国 · 加利福尼亚','U',''],['美国 · 拉斯维加斯','U',''],['美国 · 洛杉机','U',''],['美国 · 三藩市','U',''],['美国 · 西雅图','U',''],['美国 · 夏威夷','W',''],['美国 · 檀香山','W',''],['马来西亚 · 吉隆坡','H',''],['孟加拉 · 达卡','F',''],['缅甸','F1',''],['秘鲁 · 利马','R',''],['摩洛哥 · 卡萨布兰卡','Z',''],['摩洛哥 · 拉巴特','Z',''],['莫尔兹比港','K',''],['墨西哥 · 墨西哥城','S',''],['尼日利亚 · 阿布贾','A',''],['挪威 · 奥斯陆','A',''],['南非 · 开普敦','B',''],['南非 · 约翰尼斯堡','B',''],['南韩 · 汉城/首尔','I',''],['葡萄牙 · 里斯本','Z',''],['瑞士 · 伯恩','A',''],['瑞典 · 斯德哥尔摩','A',''],['瑞士 · 苏黎世','A',''],['日本 · 扎幌','I',''],['日本 · 东京','I',''],['日本 · 大坂','I',''],['苏丹 · 喀土木','B',''],['尚比亚 · 路沙卡','B',''],['塞普路斯 · 尼古西亚','B',''],['沙特阿拉伯 · 利雅德','C',''],['斯里兰卡 · 可伦坡','F',''],['萨摩亚','M1',''],['圣多明各','Q',''],['萨尔瓦多 · 圣萨尔瓦多','S',''],['塞内加尔 · 达喀尔','Z',''],['斯里巴加湾','H',''],['土耳其 · 伊斯坦布尔','B',''],['坦桑尼亚','C',''],['泰国 · 曼谷','G',''],['泰国 · 布吉','G',''],['特林达迪岛','O',''],['乌干达 · 坎帕拉','C',''],['乌拉圭 · 蒙得维的亚','P',''],['威廉斯塔德','Q',''],['危地马拉 · 危地马拉城','S',''],['汶莱','H',''],['西班牙 · 巴塞隆纳','A',''],['匈牙利 · 布达佩斯','A',''],['西班牙 · 马德里','A',''],['希腊 · 雅典','B',''],['新加坡','H',''],['新西兰 · 威灵顿','M',''],['新喀里多尼亚 · 努美阿','L',''],['新西兰 · 奥克兰','M',''],['意大利 · 米兰','A',''],['意大利 · 罗马','A',''],['以色列 · 耶路撒冷','B',''],['亚的斯亚贝巴','C',''],['也门 · 萨那','C',''],['伊朗 · 德克兰','C1',''],['印度 · 孟买','E1',''],['印度 · 加尔各答','E1',''],['印度 · 新德里','E1',''],['越南 · 河内','G',''],['印尼 · 雅加达','G',''],['牙买加 · 金斯敦','R',''],['英国 · 阿伯丁','Z',''],['英国 · 爱丁堡','Z',''],['英国 · 格拉斯哥','Z',''],['英国 · 利物浦','Z',''],['英国 · 伦敦','Z',''],['英国 · 曼彻斯特','Z',''],['英国 · 纽卡素','Z',''],['中国 · 北京','H',''],['中国 · 重庆','H',''],['中国 · 广州','H',''],['中国 · 哈尔滨','H',''],['中国 · 香港','H',''],['中国 · 澳门','H',''],['中国 · 南京','H',''],['中国 · 上海','H',''],['中国 · 台北','H',''],['中国 · 乌鲁木齐','H',''],['中途岛','X',''],['智利 · 圣地亚哥','Q','']); var zone = new Array(['A',''],['B',''],['C',''],['C1','3.5'],['D',''],['D1','4.5'],['E',''],['E1','5.5'],['F',''],['F1','6.5'],['G',''],['H',''],['I',''],['I1','9.5'],['K',''],['K1','10.5'],['L',''],['M',''],['M1','12.5'],['M2',''],['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','']); //HTML输出
var cityHtml = "";
for(var i=;i<city.length;i++){
cityHtml += "<dd cityID='" + city[i][] + "'>" + city[i][] + "</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() * ;
var utcTime = len + offset; var dZone = new Date(utcTime + * cityZoneNum); var vYear = dZone.getFullYear();
var vMon = dZone.getMonth() + ;
var vDay = dZone.getDate();
var h = dZone.getHours();
var m = dZone.getMinutes();
var se = dZone.getSeconds(); var P_d = (vMon< ? "" + vMon : vMon)+"月"+(vDay< ? ""+ vDay : vDay)+"日";
var P_w = "周" + "日一二三四五六".split("")[dZone.getDay()];
var P_t = (h< ? ""+ h : h)+":"+(m< ? "" + m : m)+":"+(se< ? "" +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=;i<city.length;i++){ if( city[i][] == id ){
$P_c.text( city[i][] ); //默认及所选城市输出 for(var j=;j<zone.length;j++){
if( zone[j][] == city[i][] ){
var zoneID = zone[j][];
var timeDo = window.setInterval(function(){
getLocalTime(zoneID);
},); //点击选项的同时,结束之前定时器
$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);

.

												

jQuery 选择城市,显示对应的即时时区时间的更多相关文章

  1. jQuery 根据城市时区,选择对应的即时时间

    我们的CRM系统中,下面是用jQuery 做了个时区小插件 如图: // 时区城市//$(function(){//所有城市和时间静态输出//var cityID = 170; //中国,北京//va ...

  2. 基于jquery的城市选择插件

    城市选择插件的难度不是很大,主要是对dom节点的操作.而我写的这个插件相对功能比较简答,没有加入省市联动. 上代码好了,参照代码的注释应该比较好理解. /* *基于jquery的城市选择插件 *aut ...

  3. jquery实现输入框聚焦,键盘上下键选择城市

    在最近有个项目中 需要实现当文本框聚焦的时候,可以键盘上下键选择内容,按enter键的时候,把内容传到输入框中,如图所示: 实现代码如下: /** *输入框聚焦,键盘上下键选择城市 */ ;(func ...

  4. h5手机端下拉选择城市

    <!doctype html><html>    <head>            <meta http-equiv="Content-Type& ...

  5. 美团HD(5)-选择城市

    DJSelectCityViewController.m #import "DJSelectCityViewController.h" #import "DJConsta ...

  6. jquery实现仿select列表的即时搜索及拼音搜索

    这里提到select,其实不是select,而是用<li><input>标签去仿造一个select,以实现对已有“option”的快速检索功能. 以<input>标 ...

  7. jQuery选择什么版本 1.x? 2.x? 3.x?

    类似标题:jQuery选择什么版本?jquery一般用什么版本?jquery ie8兼容版本.jquery什么版本稳定? 目前jQuery有三个大版本:1.x:兼容ie678,使用最为广泛的,官方只做 ...

  8. Jquery控制滚动显示欢迎字幕v2

    Jquery控制滚动显示欢迎字幕v2: 之前做的那个比较适合测试环境,但要套入到网站中,有两个按钮在那摆着,还是不太好看.后面对代码进行了修改,如下: 参考代码: <html> <h ...

  9. Jquery实现滚动显示欢迎字幕效果

    Jquery控制滚动显示欢迎字幕: 参考代码: <!DOCTYPE html> <html> <head> <title>Colin Marquee W ...

随机推荐

  1. 流程控制之if判断,while循环,for循环

    if判断? 什么是if判断? 判断一个条件如果成立则做...不成立则... 为什么要有判断? 让计算机像人一样具备判断的能力 如何用if判断 if 条件1: code1    code2    cod ...

  2. jdk1.8 HashMap的keySet方法详解

    我在看HashMap源码的时候有一个问题让我产生了兴趣,那就是HashMap的keySet方法,没有调用HashMap的有关数据的任何方法就能获取到map的所有的键,他是怎么做到的,然后我就通过模拟k ...

  3. http://python.jobbole.com/85056/ 简单 12 步理解 Python 装饰器,https://www.cnblogs.com/deeper/p/7482958.html另一篇文章

    好吧,我标题党了.作为 Python 教师,我发现理解装饰器是学生们从接触后就一直纠结的问题.那是因为装饰器确实难以理解!想弄明白装饰器,需要理解一些函数式编程概念,并且要对Python中函数定义和函 ...

  4. codeforces9A

    Die Roll CodeForces - 9A Yakko,Wakko和Dot,世界著名的狂欢三宝,哈哈,不知道你是否看过这个动画片. 某一天,过年了,他们决定暂定卡通表演,并去某些地方旅游一下.Y ...

  5. docker --Dockerfile--一些语法

    环境更换 环境变量(与声明的ENV声明),也可以在特定指令作为变量用来被解释 Dockerfile.转义也被处理,从字面上包含类似于变量的语法. 环境变量Dockerfile用 $variable_n ...

  6. BZOJ5249 九省联考2018IIIDX(线段树+贪心)

    显然这形成了一个树形结构.考虑这样一种贪心:按照曲目顺序,每次取消其父亲的预留,并选择当前可选择(保证其子树有合法选择且满足预留)的最大值,然后对其子树预留出大于等于他的一些值.这个做法显然是正确的. ...

  7. HDU4287-STL模拟水题

    一场2012天津网络预选赛的题,签到题. 但是还是写了三四十分钟,C++和STL太不熟悉了,总是编译错误不知道怎么解决. 一开始用的Char [] 后来改成了string,STL和string搭配起来 ...

  8. startSSL 申请免费的SSL证书

    打开网址https://www.startssl.com/?app=12,选择Sign-up注册. 输入个人注册信息 需注意以下几点:(1)地址必须详细,否则你会收到这样的邮件: Please pro ...

  9. 自学Aruba5.1-Aruba 基于角色(role)的策略管理(重点)

    点击返回:自学Aruba之路 自学Aruba5.1-Aruba 基于角色(role)的策略管理(重点) 1. 角色Role介绍 在ArubaOS中,用户(User)指的是已经完成连接,并获取到IP地址 ...

  10. 自学Zabbix7.1 IT services

    自学Zabbix7.1 IT services 1. 概念IT Services 服务器或者某项服务.业务的可用率,不懂技术的上级领导会过问最近服务器可用率如何.所有api的状况怎么样?通常一些技术人 ...