jquery.jclock.js using different time zone offsets

http://en.wikipedia.org/wiki/Coordinated_Universal_Time
http://en.wikipedia.org/wiki/ISO_8601
http://en.wikipedia.org/wiki/List_of_UTC_time_offsets
http://msdn.microsoft.com/zh-cn/library/microsoft.sqlserver.notificationservices.timezone.utcoffset(v=sql.90).aspx

jQuery jclock code:

/*
* jQuery jclock - Clock plugin - v 2.4.0
* http://plugins.jquery.com/project/jclock
*
* Copyright (c) 2007-2013 Doug Sparling <http://www.dougsparling.com>
* Licensed under the MIT License:
* http://www.opensource.org/licenses/mit-license.php
*/
(function($) {
 
  $.fn.jclock = function(options) {
    var version = '2.3.4';
 
    // options
    var opts = $.extend({}, $.fn.jclock.defaults, options);
         
    return this.each(function() {
      $this = $(this);
      $this.timerID = null;
      $this.running = false;
 
      // Record keeping for seeded clock
      $this.increment = 0;
      $this.lastCalled = new Date().getTime();
 
      var o = $.meta ? $.extend({}, opts, $this.data()) : opts;
 
      $this.format = o.format;
      $this.utc = o.utc;
      // deprecate utc_offset (v 2.2.0)
      $this.utcOffset = (o.utc_offset != null) ? o.utc_offset : o.utcOffset;
      $this.seedTime = o.seedTime;
      $this.timeout = o.timeout;
 
      $this.css({
        fontFamily: o.fontFamily,
        fontSize: o.fontSize,
        backgroundColor: o.background,
        color: o.foreground
      });
 
      // %a
      $this.daysAbbrvNames = new Array(7);
      $this.daysAbbrvNames[0] = "Sun";
      $this.daysAbbrvNames[1] = "Mon";
      $this.daysAbbrvNames[2] = "Tue";
      $this.daysAbbrvNames[3] = "Wed";
      $this.daysAbbrvNames[4] = "Thu";
      $this.daysAbbrvNames[5] = "Fri";
      $this.daysAbbrvNames[6] = "Sat";
 
      // %A
      $this.daysFullNames = new Array(7);
      $this.daysFullNames[0] = "Sunday";
      $this.daysFullNames[1] = "Monday";
      $this.daysFullNames[2] = "Tuesday";
      $this.daysFullNames[3] = "Wednesday";
      $this.daysFullNames[4] = "Thursday";
      $this.daysFullNames[5] = "Friday";
      $this.daysFullNames[6] = "Saturday";
 
      // %b
      $this.monthsAbbrvNames = new Array(12);
      $this.monthsAbbrvNames[0] = "Jan";
      $this.monthsAbbrvNames[1] = "Feb";
      $this.monthsAbbrvNames[2] = "Mar";
      $this.monthsAbbrvNames[3] = "Apr";
      $this.monthsAbbrvNames[4] = "May";
      $this.monthsAbbrvNames[5] = "Jun";
      $this.monthsAbbrvNames[6] = "Jul";
      $this.monthsAbbrvNames[7] = "Aug";
      $this.monthsAbbrvNames[8] = "Sep";
      $this.monthsAbbrvNames[9] = "Oct";
      $this.monthsAbbrvNames[10] = "Nov";
      $this.monthsAbbrvNames[11] = "Dec";
 
      // %B
      $this.monthsFullNames = new Array(12);
      $this.monthsFullNames[0] = "January";
      $this.monthsFullNames[1] = "February";
      $this.monthsFullNames[2] = "March";
      $this.monthsFullNames[3] = "April";
      $this.monthsFullNames[4] = "May";
      $this.monthsFullNames[5] = "June";
      $this.monthsFullNames[6] = "July";
      $this.monthsFullNames[7] = "August";
      $this.monthsFullNames[8] = "September";
      $this.monthsFullNames[9] = "October";
      $this.monthsFullNames[10] = "November";
      $this.monthsFullNames[11] = "December";
 
      $.fn.jclock.startClock($this);
 
    });
  };
       
  $.fn.jclock.startClock = function(el) {
    $.fn.jclock.stopClock(el);
    $.fn.jclock.displayTime(el);
  }
 
  $.fn.jclock.stopClock = function(el) {
    if(el.running) {
      clearTimeout(el.timerID);
    }
    el.running = false;
  }
 
  /* if the frequency is "once every minute" then we have to make sure this happens
   * when the minute changes. */  
  // got this idea from digiclock http://www.radoslavdimov.com/jquery-plugins/jquery-plugin-digiclock/
  function getDelay(timeout) {
      if (timeout == 60000) {
          var now = new Date();
          timeout = 60000 - now.getSeconds() * 1000; // number of seconds before the next minute
      }
      return timeout;
  }
  
  $.fn.jclock.displayTime = function(el) {
    var time = $.fn.jclock.currentTime(el);
    var formatted_time = $.fn.jclock.formatTime(time, el);
    el.attr('currentTime', time.getTime())
    el.html(formatted_time);
    el.timerID = setTimeout(function(){$.fn.jclock.displayTime(el)}, getDelay(el.timeout));
  }

  $.fn.jclock.currentTime = function(el) {
    if(typeof(el.seedTime) == 'undefined') {
      // Seed time not being used, use current time
      var now = new Date();
    } else {
      // Otherwise, use seed time with increment
      el.increment += new Date().getTime() - el.lastCalled;
      var now = new Date(el.seedTime + el.increment);
      el.lastCalled = new Date().getTime();
    }
 
    if(el.utc == true) {
      var localTime = now.getTime();
      var localOffset = now.getTimezoneOffset() * 60000;
      var utc = localTime + localOffset;
      var utcTime = utc + (3600000 * el.utcOffset);
      var now = new Date(utcTime);
    }

    return now
  }
 
  $.fn.jclock.formatTime = function(time, el) {
 
    var timeNow = "";
    var i = 0;
    var index = 0;
    while ((index = el.format.indexOf("%", i)) != -1) {
      timeNow += el.format.substring(i, index);
      index++;
 
      // modifier flag
      //switch (el.format.charAt(index++)) {
      //}
      
      var property = $.fn.jclock.getProperty(time, el, el.format.charAt(index));
      index++;
      
      //switch (switchCase) {
      //}
 
      timeNow += property;
      i = index
    }
 
    timeNow += el.format.substring(i);
    return timeNow;
  };
 
  $.fn.jclock.getProperty = function(dateObject, el, property) {
 
    switch (property) {
      case "a": // abbrv day names
          return (el.daysAbbrvNames[dateObject.getDay()]);
      case "A": // full day names
          return (el.daysFullNames[dateObject.getDay()]);
      case "b": // abbrv month names
          return (el.monthsAbbrvNames[dateObject.getMonth()]);
      case "B": // full month names
          return (el.monthsFullNames[dateObject.getMonth()]);
      case "d": // day 01-31
          return ((dateObject.getDate() < 10) ? "0" : "") + dateObject.getDate();
      case "H": // hour as a decimal number using a 24-hour clock (range 00 to 23)
          return ((dateObject.getHours() < 10) ? "0" : "") + dateObject.getHours();
      case "I": // hour as a decimal number using a 12-hour clock (range 01 to 12)
          var hours = (dateObject.getHours() % 12 || 12);
          return ((hours < 10) ? "0" : "") + hours;
      case "l": // hour as a decimal number using a 12-hour clock (range 1 to 12)
          var hours = (dateObject.getHours() % 12 || 12);
          //return ((hours < 10) ? "0" : "") + hours;
          return hours;
      case "m": // month number
          return (((dateObject.getMonth() + 1) < 10) ? "0" : "") + (dateObject.getMonth() + 1);
      case "M": // minute as a decimal number
          return ((dateObject.getMinutes() < 10) ? "0" : "") + dateObject.getMinutes();
      case "p": // either `am' or `pm' according to the given time value,
          // or the corresponding strings for the current locale
          return (dateObject.getHours() < 12 ? "am" : "pm");
      case "P": // either `AM' or `PM' according to the given time value,
          return (dateObject.getHours() < 12 ? "AM" : "PM");
      case "S": // second as a decimal number
          return ((dateObject.getSeconds() < 10) ? "0" : "") + dateObject.getSeconds();
      case "y": // two-digit year
          return dateObject.getFullYear().toString().substring(2);
      case "Y": // full year
          return (dateObject.getFullYear());
      case "%":
          return "%";
    }
 
  }
       
  // plugin defaults (24-hour)
  $.fn.jclock.defaults = {
    format: '%H:%M:%S',
    utcOffset: 0,
    utc: false,
    fontFamily: '',
    fontSize: '',
    foreground: '',
    background: '',
    seedTime: undefined,
    timeout: 1000 // 1000 = one second, 60000 = one minute
  };
 
})(jQuery);

用法：

<html>
<head>
  <title>jclock - multiple clocks using different time zone offsets</title>

  <script type="text/javascript" src="jquery-1.3.1.min.js"></script>
  <script type="text/javascript" src="jquery.jclock.js"></script>

  <script type="text/javascript">
    $(function($) {
      var optionsEST = {
        utc: true,
        utcOffset: -5
      }
      $('#jclock1').jclock(optionsEST);

      var optionsCST = {
        utc: true,
        utcOffset: -6
      }
      $('#jclock2').jclock(optionsCST);

      var optionsIndia = {
        utc: true,
        utcOffset: 5.5，
        
      }
      $('#jclock3').jclock(optionsIndia);
      
        var optionsBeijing = {                
        utc: true,
        utcOffset: 8,
        format: '%I:%M:%S %p',//12小時,默認24小時
         fontFamily: 'Verdana, Times New Roman',
        fontSize: '20px',
        foreground: 'yellow',
        background: 'red'

      }
      $('#jclock4').jclock(optionsBeijing );


    });
  </script>

</head>

<body>

<p>EST: <span id="jclock1"></span></p>

<p>CST: <span id="jclock2"></span></p>

<p>India: <span id="jclock3"></span></p>

<p>beijing: <span id="jclock4"></span></p>


</body>
</html>

$.fn.init_cal = function(date,c_id){
		$("#"+c_id).html(cal_content);
		 window.time_span = $("#beijing_time");//标签显示时钟
          //$('#beijing_time').jclock(optionsBeijing );
		 //setTimeout(function(){$("head").append('ge');},10);
        var  zone=8; //设置时区 北京时区
        var isitlocal=true;
		 var oLocal = new Date(); 
		 var off = ( oLocal.getTimezoneOffset() ) * 60 * 1000;
		 var now=new Date();
         var ofst =now.getTimezoneOffset()/60 ;
        var secs=now.getSeconds();
       var sec=-1.57+Math.PI*secs/30;
       var mins=now.getMinutes();
       var min=-1.57+Math.PI*mins/30;
       var hr=(isitlocal)?now.getHours():(now.getHours() + parseInt(ofst)) + parseInt(zone);
		var nian=now.getFullYear();
		var yue=now.getMonth()+1;
		var ri=now.getDate();
		var shi=now.getHours();
		var fen=now.getMinutes();
		var miao=now.getSeconds();
		var d=nian+'-'+yue+'-'+ri+' '+hr+':'+min+':'+sec;	
		 var time=new Date(d).getTime();//取得当前毫秒数//1370173636;//d.getHours();
		// setTimeout(function() { clock(time); },10); //設置時間
        //setTimeout(function(){$("head").append(d);},10);
		//這是一個時鍾
	    setTimeout(function() { clock(time); },10);

		$("#"+c_id).append(detail_dialog);
		var elem_id = 'cal_content';
		generic_cal(date,elem_id);
		record.elem_id = elem_id;
		record.nav_date = date_part(date);
		$("#cal_header>.cal_today_btn").click(function(){
			record.nav_date = date_part(new Date());
			generic_cal(record.nav_date,elem_id);
		});
		$("#day_select .cal_month").each(function(){
			$(this).click(function(){
				record.nav_date.setMonth($(this).attr("m_v"));
				generic_cal(record.nav_date,elem_id);
			});
		});
		$("#prev_btn").click(function(){
			record.nav_date = add_date(record.nav_date,-1,"month");
			generic_cal(record.nav_date,elem_id);
		});
		$("#next_btn").click(function(){
			record.nav_date = add_date(record.nav_date,1,"month");
			generic_cal(record.nav_date,elem_id);
		});
		$("#sel_btn,#cal_year").click(function(){
			templates.mousedown_hide_ele("open_sel_div");
			$("#open_sel_div").show();
		});
		$("#festival_sel").click(function(){
			templates.mousedown_hide_ele("festival_sel_div");
			$("#festival_sel_div").show();
		});
		templates.init_sel_year();
		templates.init_sel_festival();
		$(document).mouseleave(function(ev){
			clearTimeout(pResizeTimer);
			$("#detailDialog").hide();
		});
		$("#"+c_id).mouseleave(function(ev){
			clearTimeout(pResizeTimer);
			$("#detailDialog").hide();
		});
		
	};

　　demo: http://www.dusystem.com/ChineseCalendar.aspx

http://randomibis.com/coolclock/