jClocksGMT是一款基于格林威治标准时间(GMT)的jQuery模拟时钟插件。你可以调整时区的偏移值来显示相应地区的时间,还能够自动转换夏令时时间。它的特点还有:
- 模拟时钟。
- 电子时钟。
- 可以显示日期。
- 提供5种不同的时钟皮肤。
- 可自定义时间格式。
- 可自定义日期格式。
- 可以基于格林威治标准时间进行时区偏移。
- 可以自定义CSS样式。
- 可以使用自己的时钟皮肤。
使用方法
使用该时钟插件需要在页面中引入jQuery、jquery.rotate.js和jClocksGMT.js文件。
<script src="js/jquery.min.js"></script> <script src="js/jquery.rotate.js"></script> <script src="js/jClocksGMT.js"></script>
HTML结构
可以使用一个<div>
容器作为时钟的容器。
<div id="clock_hou"></div>
初始化插件
在页面DOM元素加载完毕之后,可以通过jClocksGMT()
方法来初始化该时钟插件。
$('#clock_hou').jClocksGMT({ title: 'Houston, TX, USA', offset: '-6', skin: 2 });
配置参数
该时钟插件的可用配置参数如下:
title
:所在时区的名称。默认为:'Greenwich, England'
。offset
:设置GMT偏移,例如:+5.5,-4,0等。默认为0。dst
:设置为夏令时时间。默认为true。digital
:是否显示为电子时钟。默认值为true。analog
:是否显示为模拟时钟。默认值为true。timeformat
:时间格式,默认值为:'hh:mm A'
。date
:是否显示日期。默认值为false。dateformat
:日期格式。默认值为:'MM/DD/YYYY'
。angleSec
:秒针的开始角度。默认值为0。angleMin
:分针的开始角度。默认值为0。angleHour
:时针的开始角度。默认值为0。skin
:时钟的皮肤。默认值为1。
时区偏移值
时区偏移值的使用方法是在offset
参数之后指定相应的数值。例如中国北京的时区为东8区:GMT+8,则设置为offset:+8
。
偏移值 | 地区 |
GMT-12 | Eniwetok(埃尼威托克岛) |
GMT-11 | Samoa(萨摩亚) |
GMT-10 | Hawaii(夏威夷) |
GMT-9 | Alaska(阿拉斯加) |
GMT-8 | PST, Pacific US(太平洋标准时间) |
GMT-7 | MST, Mountain US(美国芒廷时间) |
GMT-6 | CST, Central US(美国中部时间) |
GMT-5 | EST, Eastern US(美国东部时间) |
GMT-4 | Atlantic, Canada(大西洋,加拿大) |
GMT-3 | Brazilia, Buenos Aries(巴西利亚,布宜诺斯艾利斯) |
GMT-2 | Mid-Atlantic(大西洋中部时间) |
GMT-1 | Cape Verdes |
GMT 0 | Greenwich Mean Time(格林威治标准时间) |
GMT+1 | Berlin, Rome(柏林,罗马 ) |
GMT+2 | Israel, Cairo(以色列,开罗) |
GMT+3 | Moscow, Kuwait(莫斯科,科威特) |
GMT+4 | Abu Dhabi, Muscat(阿布扎比【阿拉伯联合酋长国首都】,马斯喀特【阿曼首都】) |
GMT+5 | Islamabad, Karachi(伊斯兰堡【巴基斯坦首都】, 卡拉奇) |
GMT+6 | Almaty, Dhaka(阿拉木图,达卡【孟加拉国首都】) |
GMT+7 | Bangkok, Jakarta(曼谷,雅加达) |
GMT+8 | Hong Kong, Beijing(香港,北京) |
GMT+9 | Tokyo, Osaka(东京,大阪) |
GMT+10 | Sydney, Melbourne, Guam(悉尼、墨尔本、关岛) |
GMT+11 | Magadan, Soloman Is(马加丹,所罗门群岛) |
GMT+12 | Fiji, Wellington, Auckland(斐济,威灵顿【新西兰首都】,新西兰) |
更多的地区时区可以查看:http://www.timeanddate.com/time/zone/。使用当前的时区偏移来搜索地区,如果单签的时区为夏令时,偏移值要减1。
时间格式
格式 | 示例 | 描述 |
HH | 12 | 24小时格式的小时时间,2位数,不够时前面补0 |
hh | 06 | 12小时格式的小时时间,2位数,不够时前面补0 |
H | 15 | 24小时格式的小时时间,不带前导0 |
h | 7 | 12小时格式的小时时间,不带前导0 |
mm | 30 | 2位数的分钟时间,不够位数时前面补0 |
m | 25 | 1位数的分钟时间,不带前导0 |
ss | 35 | 2位数的秒时间,不够位数时前面补0 |
s | 20 | 1位数的秒时间,不带前导0 |
a | pm | 小写的am或pm |
A | PM | 大小的AM或PM |
SSS | 095 | 带前导0的毫秒数 |
S | 95 | 不带前导0的毫秒数 |
日期格式
格式 | 示例 | 描述 |
YYYY | 2016 | 4位数年份 |
YY | 16 | 2位数的年份 |
MMMM | April | 完整的月份名称 |
MMM | Apr | 简写的月份名称 |
MM | 04 | 带前导0的月份 |
M | 4 | 不带前导0的月份 |
DDDD | Friday | 一周中各天的完整名称 |
DDD | Fri | 一周中各天的简写名称 |
DD | 01 | 带前导0的天数 |
D | 1 | 不带前导0的天数 |
jClocksGMT时钟插件的github地址为:https://github.com/mcmastermind/jClocksGMT