jquery.jclock.js using different time zone offsets
39638 ワード
http://en.wikipedia.org/wiki/Coordinated_Universal_Time http://en.wikipedia.org/wiki/ISO_8601 http://en.wikipedia.org/wiki/List_of_UTC_time_オフセット http://msdn.microsoft.com/zh-cn/library/microsoft.sqlserver.notificationservices.timezone.utcoffset(v=sql.90).aspx
jQuery jclock code:
jQuery jclock code:
1 /*
2 * jQuery jclock - Clock plugin - v 2.4.0
3 * http://plugins.jquery.com/project/jclock
4 *
5 * Copyright (c) 2007-2013 Doug Sparling <http://www.dougsparling.com>
6 * Licensed under the MIT License:
7 * http://www.opensource.org/licenses/mit-license.php
8 */
9 (function($) {
10
11 $.fn.jclock = function(options) {
12 var version = '2.3.4';
13
14 // options
15 var opts = $.extend({}, $.fn.jclock.defaults, options);
16
17 return this.each(function() {
18 $this = $(this);
19 $this.timerID = null;
20 $this.running = false;
21
22 // Record keeping for seeded clock
23 $this.increment = 0;
24 $this.lastCalled = new Date().getTime();
25
26 var o = $.meta ? $.extend({}, opts, $this.data()) : opts;
27
28 $this.format = o.format;
29 $this.utc = o.utc;
30 // deprecate utc_offset (v 2.2.0)
31 $this.utcOffset = (o.utc_offset != null) ? o.utc_offset : o.utcOffset;
32 $this.seedTime = o.seedTime;
33 $this.timeout = o.timeout;
34
35 $this.css({
36 fontFamily: o.fontFamily,
37 fontSize: o.fontSize,
38 backgroundColor: o.background,
39 color: o.foreground
40 });
41
42 // %a
43 $this.daysAbbrvNames = new Array(7);
44 $this.daysAbbrvNames[0] = "Sun";
45 $this.daysAbbrvNames[1] = "Mon";
46 $this.daysAbbrvNames[2] = "Tue";
47 $this.daysAbbrvNames[3] = "Wed";
48 $this.daysAbbrvNames[4] = "Thu";
49 $this.daysAbbrvNames[5] = "Fri";
50 $this.daysAbbrvNames[6] = "Sat";
51
52 // %A
53 $this.daysFullNames = new Array(7);
54 $this.daysFullNames[0] = "Sunday";
55 $this.daysFullNames[1] = "Monday";
56 $this.daysFullNames[2] = "Tuesday";
57 $this.daysFullNames[3] = "Wednesday";
58 $this.daysFullNames[4] = "Thursday";
59 $this.daysFullNames[5] = "Friday";
60 $this.daysFullNames[6] = "Saturday";
61
62 // %b
63 $this.monthsAbbrvNames = new Array(12);
64 $this.monthsAbbrvNames[0] = "Jan";
65 $this.monthsAbbrvNames[1] = "Feb";
66 $this.monthsAbbrvNames[2] = "Mar";
67 $this.monthsAbbrvNames[3] = "Apr";
68 $this.monthsAbbrvNames[4] = "May";
69 $this.monthsAbbrvNames[5] = "Jun";
70 $this.monthsAbbrvNames[6] = "Jul";
71 $this.monthsAbbrvNames[7] = "Aug";
72 $this.monthsAbbrvNames[8] = "Sep";
73 $this.monthsAbbrvNames[9] = "Oct";
74 $this.monthsAbbrvNames[10] = "Nov";
75 $this.monthsAbbrvNames[11] = "Dec";
76
77 // %B
78 $this.monthsFullNames = new Array(12);
79 $this.monthsFullNames[0] = "January";
80 $this.monthsFullNames[1] = "February";
81 $this.monthsFullNames[2] = "March";
82 $this.monthsFullNames[3] = "April";
83 $this.monthsFullNames[4] = "May";
84 $this.monthsFullNames[5] = "June";
85 $this.monthsFullNames[6] = "July";
86 $this.monthsFullNames[7] = "August";
87 $this.monthsFullNames[8] = "September";
88 $this.monthsFullNames[9] = "October";
89 $this.monthsFullNames[10] = "November";
90 $this.monthsFullNames[11] = "December";
91
92 $.fn.jclock.startClock($this);
93
94 });
95 };
96
97 $.fn.jclock.startClock = function(el) {
98 $.fn.jclock.stopClock(el);
99 $.fn.jclock.displayTime(el);
100 }
101
102 $.fn.jclock.stopClock = function(el) {
103 if(el.running) {
104 clearTimeout(el.timerID);
105 }
106 el.running = false;
107 }
108
109 /* if the frequency is "once every minute" then we have to make sure this happens
110 * when the minute changes. */
111 // got this idea from digiclock http://www.radoslavdimov.com/jquery-plugins/jquery-plugin-digiclock/
112 function getDelay(timeout) {
113 if (timeout == 60000) {
114 var now = new Date();
115 timeout = 60000 - now.getSeconds() * 1000; // number of seconds before the next minute
116 }
117 return timeout;
118 }
119
120 $.fn.jclock.displayTime = function(el) {
121 var time = $.fn.jclock.currentTime(el);
122 var formatted_time = $.fn.jclock.formatTime(time, el);
123 el.attr('currentTime', time.getTime())
124 el.html(formatted_time);
125 el.timerID = setTimeout(function(){$.fn.jclock.displayTime(el)}, getDelay(el.timeout));
126 }
127
128 $.fn.jclock.currentTime = function(el) {
129 if(typeof(el.seedTime) == 'undefined') {
130 // Seed time not being used, use current time
131 var now = new Date();
132 } else {
133 // Otherwise, use seed time with increment
134 el.increment += new Date().getTime() - el.lastCalled;
135 var now = new Date(el.seedTime + el.increment);
136 el.lastCalled = new Date().getTime();
137 }
138
139 if(el.utc == true) {
140 var localTime = now.getTime();
141 var localOffset = now.getTimezoneOffset() * 60000;
142 var utc = localTime + localOffset;
143 var utcTime = utc + (3600000 * el.utcOffset);
144 var now = new Date(utcTime);
145 }
146
147 return now
148 }
149
150 $.fn.jclock.formatTime = function(time, el) {
151
152 var timeNow = "";
153 var i = 0;
154 var index = 0;
155 while ((index = el.format.indexOf("%", i)) != -1) {
156 timeNow += el.format.substring(i, index);
157 index++;
158
159 // modifier flag
160 //switch (el.format.charAt(index++)) {
161 //}
162
163 var property = $.fn.jclock.getProperty(time, el, el.format.charAt(index));
164 index++;
165
166 //switch (switchCase) {
167 //}
168
169 timeNow += property;
170 i = index
171 }
172
173 timeNow += el.format.substring(i);
174 return timeNow;
175 };
176
177 $.fn.jclock.getProperty = function(dateObject, el, property) {
178
179 switch (property) {
180 case "a": // abbrv day names
181 return (el.daysAbbrvNames[dateObject.getDay()]);
182 case "A": // full day names
183 return (el.daysFullNames[dateObject.getDay()]);
184 case "b": // abbrv month names
185 return (el.monthsAbbrvNames[dateObject.getMonth()]);
186 case "B": // full month names
187 return (el.monthsFullNames[dateObject.getMonth()]);
188 case "d": // day 01-31
189 return ((dateObject.getDate() < 10) ? "0" : "") + dateObject.getDate();
190 case "H": // hour as a decimal number using a 24-hour clock (range 00 to 23)
191 return ((dateObject.getHours() < 10) ? "0" : "") + dateObject.getHours();
192 case "I": // hour as a decimal number using a 12-hour clock (range 01 to 12)
193 var hours = (dateObject.getHours() % 12 || 12);
194 return ((hours < 10) ? "0" : "") + hours;
195 case "l": // hour as a decimal number using a 12-hour clock (range 1 to 12)
196 var hours = (dateObject.getHours() % 12 || 12);
197 //return ((hours < 10) ? "0" : "") + hours;
198 return hours;
199 case "m": // month number
200 return (((dateObject.getMonth() + 1) < 10) ? "0" : "") + (dateObject.getMonth() + 1);
201 case "M": // minute as a decimal number
202 return ((dateObject.getMinutes() < 10) ? "0" : "") + dateObject.getMinutes();
203 case "p": // either `am' or `pm' according to the given time value,
204 // or the corresponding strings for the current locale
205 return (dateObject.getHours() < 12 ? "am" : "pm");
206 case "P": // either `AM' or `PM' according to the given time value,
207 return (dateObject.getHours() < 12 ? "AM" : "PM");
208 case "S": // second as a decimal number
209 return ((dateObject.getSeconds() < 10) ? "0" : "") + dateObject.getSeconds();
210 case "y": // two-digit year
211 return dateObject.getFullYear().toString().substring(2);
212 case "Y": // full year
213 return (dateObject.getFullYear());
214 case "%":
215 return "%";
216 }
217
218 }
219
220 // plugin defaults (24-hour)
221 $.fn.jclock.defaults = {
222 format: '%H:%M:%S',
223 utcOffset: 0,
224 utc: false,
225 fontFamily: '',
226 fontSize: '',
227 foreground: '',
228 background: '',
229 seedTime: undefined,
230 timeout: 1000 // 1000 = one second, 60000 = one minute
231 };
232
233 })(jQuery);
使い方: 1 <html>
2 <head>
3 <title>jclock - multiple clocks using different time zone offsets</title>
4
5 <script type="text/javascript" src="jquery-1.3.1.min.js"></script>
6 <script type="text/javascript" src="jquery.jclock.js"></script>
7
8 <script type="text/javascript">
9 $(function($) {
10 var optionsEST = {
11 utc: true,
12 utcOffset: -5
13 }
14 $('#jclock1').jclock(optionsEST);
15
16 var optionsCST = {
17 utc: true,
18 utcOffset: -6
19 }
20 $('#jclock2').jclock(optionsCST);
21
22 var optionsIndia = {
23 utc: true,
24 utcOffset: 5.5,
25
26 }
27 $('#jclock3').jclock(optionsIndia);
28
29 var optionsBeijing = {
30 utc: true,
31 utcOffset: 8,
32 format: '%I:%M:%S %p',//12 , 24
33 fontFamily: 'Verdana, Times New Roman',
34 fontSize: '20px',
35 foreground: 'yellow',
36 background: 'red'
37
38 }
39 $('#jclock4').jclock(optionsBeijing );
40
41
42 });
43 </script>
44
45 </head>
46
47 <body>
48
49 <p>EST: <span id="jclock1"></span></p>
50
51 <p>CST: <span id="jclock2"></span></p>
52
53 <p>India: <span id="jclock3"></span></p>
54
55 <p>beijing: <span id="jclock4"></span></p>
56
57
58 </body>
59 </html>