因客户需要,我们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. ESXi虚拟机出现关机时卡住的问题处理

    1. ESXi在日常使用时经常会遇到机器卡住的情况 这种情况下GUI的方式无从下手, 需要从cli的方式处理 我记得之前写过一个 但是不知道放哪里去了. 再重新写一下. 直接按照图处理 2. 然后xs ...

  2. CRM模块

  3. gitbook 简单使用

    gitbook 简单使用 之前由于公司培训过使用 gitbook,当时也没有进行安装使用.当时就感觉就是 markdown 语法,加上我本来就是使用 markdown 进行写博客之类.再加上这个东西本 ...

  4. adminlte前端框架从入门到精通

    第一 下载 admintle的下载地址为: https://github.com/almasaeed2010/AdminLTE/releases 参考实例文件代码: 例如:AdminLTE-2.4.3 ...

  5. visual studio 和 sql server 的激活密钥序列号

    VS2010: YCFHQ-9DWCY-DKV88-T2TMH-G7BHP VS2013: BWG7X-J98B3-W34RT-33B3R-JVYW9 VS2015: 专业版:HMGNV-WCYXV- ...

  6. zabbix2.2 - FromDual.MySQL.check" became not supported

    升级zabbix后发现zabbix server日志中多个实例报错如下: 27974:20171227:113001.724 item "实例name:FromDual.MySQL.chec ...

  7. Lodop设置文本项行间距、字间距

    LODOP给文本项ADD_PRINT_TEXT设置字间距.行间距,可以在打印设计页面,右键属性里设置,然后在打印设计生成代码,也可以直接写代码.LineSpacing行间距.LetterSpacing ...

  8. JavaScript实现两小时倒计时

    [构思] 因为只需要的是两小时,所以时间直接写死,然后通过setInterval每1000ms对时间进行减1操作 前期未考虑到当时分秒小于10的状态,所以后面又加上了一个checkTime()来进行限 ...

  9. 洛谷 P1076 寻宝 解题报告

    P1076 寻宝 题目描述 传说很遥远的藏宝楼顶层藏着诱人的宝藏.小明历尽千辛万苦终于找到传说中的这个藏宝楼,藏宝楼的门口竖着一个木板,上面写有几个大字:寻宝说明书.说明书的内容如下: 藏宝楼共有\( ...

  10. cf860E Arkady and A Nobody-men (树剖)

    容易得出,如果我们按照深度一层一层地做,做完一层后,这层某个点的答案就是它的祖先们的子树大小(统计大小时不包括树根) 由于我太菜了不会别的方法,虽然N是5e5的,还是只好用一个树剖(树状数组降常数)水 ...