jquery时间插件

 

/**
* jquery.timer.js
* 在网页上显示日期和时间控件
* 使用方法:$('#timeDisp').timer();
* @author SuperBoy
* 日期格式说明:
> 
> *yy: 四位年份,如:2009
> *y : 两位年份,如:09
> *mm: 两位月份,不足在前补0,如:02
> *m : 一位月份,不补0,如:02
> *dd: 月份中的日,两位表示,不足补0,如:02
> *d : 月份中的日,不足补0,如:2
> *W : 星期的全称,如:星期一
> *w : 星期的略称,如:周一
> *HH:24小时制小时,不足两位补0,如:08,13
> *H:24小时制,不补0,如:8,13
> *hh: 12小时制,不足两位补0并且会在加上am或pm进行区分,如01:12:20 am
> *h : 12小时制,不补0并且会在加上am或pm进行区分,如1:12:20 am
> *MM:分钟表示,不足两位补0,如:08
> *M:分钟表示,不补0,如:8
> *ss:秒表示,不足两位补0,如:08
> *s:秒表示,不补0,如:8
> *SSS:表示毫秒
> 
*/
(function($) {
function Timer(){
this._defaults = {
     format: "yy-mm-dd W hh:MM:ss",
     morning : "上午",
     afterNoon : "下午",
     weekNames: ['星期日','星期一','星期二','星期三','星期四','星期五','星期六'],
   weekNamesShort: ['周日','周一','周二','周三','周四','周五','周六']
};
$.extend(this._defaults);
}
$.extend(Timer.prototype, {
_settings : {},
_init: function(target, options){
   this._settings["target"] = target;
   if(!options){
    options = this._defaults;
   }
   this._settings["format"] = options["format"]?options["format"]:this._defaults["format"];
   this._settings["morning"] = options["morning"]?options["morning"]:this._defaults["morning"];
   this._settings["afterNoon"] = options["afterNoon"]?options["afterNoon"]:this._defaults["afterNoon"];
   this._settings["weekNames"] = options["weekNames"]?options["weekNames"]:this._defaults["weekNames"];
   this._settings["weekNamesShort"] = options["weekNamesShort"]?options["weekNamesShort"]:this._defaults["weekNamesShort"];

   setInterval('$.timer._setValue()',1);
},
/**
*yy: 四位年份,如:2009
*y : 两位年份,如:09
*mm: 两位月份,不足在前补0,如:02
*m : 一位月份,不补0,如:02
*dd: 月份中的日,两位表示,不足补0,如:02
*d : 月份中的日,不足补0,如:2
*W : 星期的全称,如:星期一
*w : 星期的略称,如:周一
*HH:24小时制小时,不足两位补0,如:08,13
*H:24小时制,不补0,如:8,13
*hh: 12小时制,不足两位补0并且会在加上am或pm进行区分,如01:12:20 am
*h : 12小时制,不补0并且会在加上am或pm进行区分,如1:12:20 am
*MM:分钟表示,不足两位补0,如:08
*M:分钟表示,不补0,如:8
*ss:秒表示,不足两位补0,如:08
*s:秒表示,不补0,如:8
*SSS:表示毫秒
*/
_formatDate : function(date){
   var format = this._settings["format"];
   var dateStr = format;
   var showHour = dateStr.indexOf('h') != -1;
   dateStr = dateStr.replace(/yy/, date.getFullYear());
   dateStr = dateStr.replace(/y/, (date.getYear()).toString().substr(2));
   dateStr = dateStr.replace(/mm/, this._appendZero(date.getMonth(), 2));
   dateStr = dateStr.replace(/m/, date.getMonth());
   dateStr = dateStr.replace(/dd/, this._appendZero(date.getDate(), 2));
   dateStr = dateStr.replace(/d/, date.getDate());
   dateStr = dateStr.replace(/W/, this._settings["weekNames"][date.getDay()]);
   dateStr = dateStr.replace(/w/, this._settings["weekNamesShort"][date.getDay()]);
   // 24小时制
   dateStr = dateStr.replace(/HH/, this._appendZero(date.getHours(), 2));
   dateStr = dateStr.replace(/H/, date.getHours());
   // 12小时制
   dateStr = dateStr.replace(/hh/, this._appendZero(date.getHours()>12?(date.getHours()-12):date.getHours(), 2));
   dateStr = dateStr.replace(/h/, date.getHours()>12?(date.getHours()-12):date.getHours());
   dateStr = dateStr.replace(/MM/, this._appendZero(date.getMinutes(), 2));
   dateStr = dateStr.replace(/M/, date.getMinutes());
   dateStr = dateStr.replace(/ss/, this._appendZero(date.getSeconds(), 2));
   dateStr = dateStr.replace(/s/, date.getSeconds());
   dateStr = dateStr.replace(/SSS/, this._appendZero(date.getMilliseconds(), 3));
   dateStr = dateStr.replace(/SS/, this._appendZero(date.getMilliseconds(), 2));
   dateStr = dateStr.replace(/S/, date.getMilliseconds());
   if(showHour) {
    if(date.getHours() - 12 >=0) {
     dateStr = dateStr + this._settings["afterNoon"];
    } else {
     dateStr = dateStr + this._settings["morning"];
    }
   }
   return dateStr;
},
_appendZero : function(value, length){
   if(value) {
    value = (value).toString();
    if (value.length < length){
     for(var i = 0; i< length - value.length; i++){
      value = "0" + value;
     }
    }
   }
   return value;
},
_setValue: function(){
   var date = new Date();
   var target = this._settings["target"];
   date = this._formatDate(date)
    if(target.nodeName == "INPUT"){
       $(target).val(date);
    } else {
       $(target).text(date);
    }
}
});
$.fn.timer = function(options) {
return this.each(function() {
   $.timer._init(this, options);
});
}

$.timer = new Timer();

})(jQuery);

插件参数：
     format: (String)显示的日期格式
     morning : (String)上午对应的略称，如AM
     afterNoon : (String)下午对应的略称，如PM
     weekNames: (Array) 星期的全称
     weekNamesShort: (Aarray)星期的略称

日期格式说明：

yy: 四位年份,如:2009
y : 两位年份,如:09
mm: 两位月份,不足在前补0,如:02
m : 一位月份,不补0,如:02
dd: 月份中的日,两位表示,不足补0,如:02
d : 月份中的日,不足补0,如:2
W : 星期的全称,如:星期一
w : 星期的略称,如:周一
HH:24小时制小时,不足两位补0,如:08,13
H:24小时制,不补0,如:8,13
hh: 12小时制,不足两位补0并且会在加上am或pm进行区分,如01:12:20 am
h : 12小时制,不补0并且会在加上am或pm进行区分,如1:12:20 am
MM:分钟表示,不足两位补0,如:08
M:分钟表示,不补0,如:8
ss:秒表示,不足两位补0,如:08
s:秒表示,不补0,如:8
SSS:表示毫秒

 

demo.html

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/jquery.timer.js"></script>
<script type="text/javascript">
$(document).ready(function(){
   $('#timer').timer({format: "yy年mm月dd日 W HH:MM:ss.SSS"});
});
</script>
</head>
<body>
<input type="text" >
<div ></div>
</body>
</html>

画面上显示:

2009年10月27日 星期五 12:52:47.896

以上插件，您可以根据自己的想象进行再扩展。