jquery.jclock.js using different time zone offsets

Recommended for you: Get network issues from WhatsUp Gold. Not end users.

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 <>
  6 * Licensed under the MIT License:
  7 *  
  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  
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);

Usage:

 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 hours,The default 24 hours
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>

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download

Posted by Julie at November 21, 2013 - 6:59 PM