它能显示 年月日，时分秒，星期 。。。
用法：
JS代码：
<script src="jquery.epiclock.js" type="text/javascript"></script>
$(function(){
$('#epiClock').epiclock({ format : ' Y年F月j日 G:i:s D' }); //绑定
$.epiclock(); //开始运行
});
html代码：
<div id="epiClock"></div>
演示：
http://cssrain.cn/demo/epiclock/demo.html
本篇文章来源于 cssrain.cn 原文链接：http://www.cssrain.cn/article.asp?id=1324
js:
/**
* epiClock 2.0 - Create Epic Clocks Easily
*
* Copyright (c) 2008 Eric Garside (http://eric.garside.name)
* Dual licensed under:
* MIT: http://www.opensource.org/licenses/mit-license.php
* GPLv3: http://www.opensource.org/licenses/gpl-3.0.html
*/
// Manager States
var EC_HALT = 'disable',
EC_RUN = 'enable',
EC_KILL = 'destroy',
// Clock Types
EC_CLOCK = 0,
EC_COUNTDOWN = 1,
EC_COUNTUP = 2,
EC_ROLLOVER = 3,
EC_EXPIRE = 4,
EC_LOOP = 5,
EC_STOPWATCH = 6,
EC_HOLDUP = 7;
;(function($){
var defaults = {
epiClock: {
offset: {
hours: 0,
minutes: 0,
seconds: 0,
days: 0,
years: 0
},
arbitrary: {
days: 0,
years: 0
},
display: {
years: true,
military: false
},
gmt: false,
target: null,
onTimer: null,
onKill: null,
onRender: function(v,val){v.html(val)},
format: null,
frame: {},
dead: false,
displace: 0,
modifier: 0,
variance: 0,
daysadded: 0,
paused: 0,
tolerance: 0,
selfLoc: -1,
mode: EC_CLOCK
},
formats: [
'F j, Y, g:i:s a', // EC_CLOCK
'V{d} x{h} i{m} s{s}', // EC_COUNTDOWN
'Q{y} K{d} x{h} i{m} s{s}', // EC_COUNTUP
'V{d} x{h} i{m} s{s}', // EC_ROLLOVER
'x{h} i{m} s{s}', // EC_EXPIRE
'i{m} s{s}', // EC_LOOP
'x{h} i{m} s{s}', // EC_STOPWATCH
'Q{y} K{d} x{h} i{m} s{s}' // EC_HOLDUP
]
},
// The current mode the clock manager is in
current = null,
// The interval timer for the clock
loop = null,
// The clocks we're managing
clocks = [];
/**
* jQuery Entry Point - Clock Manager
*
* Provides an interface for the user to pause, destroy, or resume/start all clocks.
*/
$.epiclock = function(mode, precision){
mode = mode || EC_RUN;
precision = precision || 5e2;
if (mode == current) return;
switch (mode){
case EC_KILL:
$.each(clocks, function(){
this.removeData('epiClock');
})
clocks = [];
case EC_HALT:
if (loop){
clearInterval(loop);
loop = null;
}
current = mode;
break;
case EC_RUN:
if (!loop){
cycleClocks();
loop = setInterval(cycleClocks, precision);
}
current = mode;
break;
}
return this;
}
function cycleClocks(){
$.each(clocks, function(i){
this.data('epiClock').render();
})
}
/**
* jQuery Entry Point
*
* Creates the clock displays
*/
$.fn.epiclock = function(options){
switch (options){
case 'destroy':
return this.each(function(){
var jQ = $(this);
if (jQ.data('epiClock') instanceof epiClock)
jQ.data('epiClock').kill();
})
case 'disable':
return this.each(function(){
var jQ = $(this);
if (jQ.data('epiClock') instanceof epiClock)
jQ.data('epiClock').pause();
})
case 'enable':
return this.each(function(){
var jQ = $(this);
if (jQ.data('epiClock') instanceof epiClock)
jQ.data('epiClock').resume();
})
default:
options = $.extend(true, {}, defaults.epiClock, options);
break;
}
this.each(function(){
var object = $(this),
format = (options.format || defaults.formats[options.mode]).split(''),
isBuffering = false,
label = '<label class="epiClock"></label>',
span = '<span class="epiClock"></span>',
buffer = '',
clock = new epiClock(options, object);
object.data('epiClock', clock);
$.each(format, function(){
x = this+'';
switch (x){
case ' ':
if (!isBuffering)
$(span).addClass('ecSpacer').appendTo(object);
else buffer += x;
break;
case '{':
isBuffering = true;
break;
case '}':
isBuffering = false;
$(label).html(buffer).appendTo(object);
buffer = '';
break;
default:
// If we're buffering, this is label text
if (isBuffering) buffer += x;
// If it's a special character, it will be span updated
else if (Date.prototype[x] || clock[x]) {
clock.frame[x] = $(span).attr('ref', x).appendTo(object);
}
// If it's anything else, it's a single char label seperator
else
$(label).addClass('ecSeparator').html(x).appendTo(object);
break;
}
});
clock.selfLoc = clocks.push(object) - 1;
})
return this;
}
function epiClock(options, element){
if (this instanceof epiClock)
return this.init(options, element);
else return new epiClock(options, element);
}
epiClock.prototype = {
Q: function() { return this.arbitrary.years },
E: function() { return this.arbitrary.days },
e: function() { return this.arbitrary.days.pad(0) },
zero: new Date(0),
pause: function(){
if (this.dead) return;
this.paused = new Date().valueOf();
this.dead = true;
},
resume: function(){
if (!this.dead) return;
if (this.mode == EC_STOPWATCH)
this.displace += (this.paused - new Date().valueOf());
this.paused = 0;
this.dead = false;
},
kill: function(){
// Remove and Renumber Clocks Array
clocks.splice(this.selfLoc,1);
$.each(clocks, function(i){this.data('epiClock').selfLoc = i});
// Call on kill, set dead
if ($.isFunction(this.onKill)) this.onKill();
this.dead = true;
},
init: function(options, element){
if (options.mode < EC_CLOCK || options.mode > EC_HOLDUP)
throw new Exception( 'Invalid Clock Mode.' );
var clock = this;
$.each(options, function(k, v){
clock[k] = v;
});
switch (this.mode){
case EC_LOOP:
case EC_EXPIRE:
this.target = this.target || new Date();
case EC_COUNTDOWN:
case EC_ROLLOVER:
this.modifier = -1;
this.variance = 1;
break;
case EC_STOPWATCH:
this.displace += -1 * new Date().valueOf();
return;
case EC_HOLDUP:
this.variance = -1;
this.modifier = 1;
break;
default:
this.modifier = 1;
this.variance = 0;
break;
}
if (this.gmt)
this.normalize();
switch (true){
case this.target instanceof Date:
this.target = this.target.valueOf();
break;
case typeof this.target == 'string':
this.target = new Date(this.target).valueOf();
break;
}
this.displace += this.modifier * this.calculateOffset();
},
calculateOffset: function(offset){
offset = offset || this.offset;
return (
offset.years * 3157056e4 +
offset.days * 864e5 +
offset.hours * 36e5 +
offset.minutes * 6e4 +
(this.variance + offset.seconds) * 1e3
);
},
normalize: function(){
this.displace += new Date().getTimezoneOffset()*6e4;
},
render: function(){
if (!this.tick()) return;
var clock = this,
time = (this.mode == EC_HOLDUP) ? this.zero : this.now;
$.each(this.frame, function(k,v){
var val = ($.isFunction(time[k]) ? time[k]() : clock[k]()) + '';
if (v.data('last') != val) clock.onRender(v, val);
v.data('last', val)
})
},
tick: function(){
if (this.dead) return false;
var now = new Date().valueOf() + this.displace;
switch (this.mode){
case EC_HOLDUP:
if (this.target < now) this.mode = EC_COUNTUP;
case EC_COUNTUP:
now -= this.target;
break;
case EC_ROLLOVER:
if (now > this.target) now = now - this.target;
else now = this.target - now;
break;
case EC_COUNTDOWN:
case EC_EXPIRE:
case EC_LOOP:
now = this.target - now;
if (now < this.tolerance) return this.timerEnd();
break;
}
this.now = new Date(now);
var days = this.now.V();
if (days <= this.daysadded) return true;
this.daysadded = days;
this.arbitrary.days += days;
if (this.arbitrary.days < 365) return true;
this.arbitrary.years += Math.floor(this.arbitrary.days/365.4 % 365.4);
this.arbitrary.days = Math.floor(this.arbitrary.days % 365.4);
return true;
},
timerEnd: function(){
if ($.isFunction(this.onTimer)) this.onTimer();
switch (this.mode){
case EC_COUNTDOWN:
case EC_EXPIRE:
this.kill();
break;
case EC_LOOP:
this.displace += this.modifier * this.calculateOffset();
return this.render();
case EC_ROLLOVER:
this.mode = EC_COUNTUP;
return true;
}
this.now = new Date(0);
return true;
}
};
$.extend(String.prototype, {
pad: function(s,l){ l=l||2; return this.length < l ? new Array(1+l-this.length).join(s) + this : this },
rpad: function(s,l){ l=l||2; return this.length < l ? this + new Array(1+l-this.length).join(s) : this }
})
$.extend(Number.prototype, {
pad: function(s,l){ return (this+'').pad(s,l) },
rpad: function(s,l){ return (this+'').rpad(s,l) }
})
/** Prototype the Date function **/
$.extend(Date.prototype, {
// Assistance Definitions
modCalc: function(mod1,mod2){return (Math.floor(Math.floor(this.valueOf()/1e3)/mod1)%mod2)},
months: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'],
days: ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'],
suffix: [null, 'st', 'nd', 'rd'],
// Timer Functions
V: function(){return this.modCalc(864e2,1e5)}, // Days
v: function(){return this.V().pad(0)}, // Paded Days
K: function(){return this.V()%365}, // Days Offset for Years
k: function(){return this.K().pad(0)}, // Padded Offset Days
X: function(){return this.modCalc(36e2,24)}, // Hours
x: function(){return this.X().pad(0)}, // Padded Hours
// Day
d: function() { return this.getDate().pad('0') },
D: function() { return this.days[this.getDay()].substring(0,3) },
j: function() { return this.getDate() },
l: function() { return this.days[this.getDay()] },
N: function() { return this.getDay() + 1 },
S: function() { return this.suffix[this.getDate()] || 'th' },
w: function() { return this.getDay() },
z: function() { return Math.round((this-this.f())/864e5) },
// Week
W: function() { return Math.ceil(((((this-this.f())/864e5) + this.f().w())/7)) },
// Month
F: function() { return this.months[this.getMonth()]; },
m: function() { return (this.getMonth()+1).pad(0) },
M: function() { return this.months[this.getMonth()].substring(0,3) },
n: function() { return this.getMonth() + 1 },
// Year
L: function() { var Y = this.Y(); return Y%4 ? false : Y%100 ? true : Y%400 ? false : true },
f: function() { return new Date(this.getFullYear(),0,1) },
Y: function() { return this.getFullYear() },
y: function() { return ('' + this.getFullYear()).substr(2) },
// Time
a: function() { return this.getHours() < 12 ? 'am' : 'pm' },
A: function() { return this.a().toUpperCase() },
B: function() { return Math.floor((((this.getHours()) * 36e5) + (this.getMinutes() * 6e4) + (this.getSeconds() * 1e3))/864e2).pad(0,3) },
g: function() { return this.getHours()%12 || 12 },
G: function() { return this.getHours() },
h: function() { return this.g().pad('0') },
H: function() { return this.getHours().pad('0') },
i: function() { return this.getMinutes().pad(0) },
s: function() { return this.getSeconds().pad('0') },
u: function() { return this.getTime()%1000 },
// Timezone
O: function() { var t = this.getTimezoneOffset() / 60; return (t >= 0 ? '+' : '-') + Math.abs(t).pad(0).rpad(0,4) },
P: function() { var t = this.O(); return t.substr(0,3) + ':' + t.substr(3)},
Z: function() { return this.getTimezoneOffset() * 60;},
// Full Date/Time
c: function() { return this.Y()+'-'+this.m()+'-'+this.d()+'T'+this.H()+':'+this.i()+':'+this.s()+this.P()},
r: function() { return this.toString() },
U: function() { return this.getTime() / 1000 }
});
})(jQuery);
html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="http://www.cssrain.cn/demo/jquery-ui-tab/jquery-1.3.1.js" type="text/javascript"></script>
<script src="jquery.epiclock.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
$('#epiClock').epiclock({ format : ' Y年F月j日 G:i:s D' }); //绑定
$.epiclock(); //开始运行
});
</script>
</head>
<body>
<div id="epiClock"></div>
</body>
</html>
浙公网安备 33010602011771号