服务器端传来时间戳,在客户端实现与服务器时间相同的时间读秒,需要引入jquery.min.js,下面直接上代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="w" style="width: 170px;height: 25px;background: #ccc6c6;padding:5px 0 0 5px;border-radius: 2px;"></div>
</body>
<script type="text/javascript" src="/public/admin/lib/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
time('w','1483199990');
}
);
/**
* 读秒函数,此函数会阻塞在其后的函数,SO 这个函数需要放到所有函数最后(此函数最大动态显示到了一个月,会根据润平年判断这个月的天数)
* @id {string} 存放时间的div的id名
* @t {int} timestamp 服务器端传过来的时间戳,如果没有传则自动获取浏览器端的时间
*/
function time(id,t){
setTimeout('time("'+id+','+t+'");',1000);
var dm=date('i',t);
var ds=date('s',t);
var dh=date('H',t);
var dd=date('d',t);
var dmm=date('m',t);
var dy=date('Y',t);
var k= $('#'+id).html();
if(k.length==0){
$('#'+id).html('<span id="y">'+dy+'</span>-<span id="mm">'+dmm+'</span>-<span id="d">'+dd+'</span> <span id="h">'+dh+'</span>:<span id="m">'+dm+'</span>:<span id="s">'+ds+'</span>');
}
var s=$('#s').html();
var m=$('#m').html();
var h=$('#h').html();
var d=$('#d').html();
var mm=$('#mm').html();
var y=$('#y').html();
if(s.length==0){
s=0;
}
if(parseInt(s)==60){
s=0;
rm=parseInt(m)+parseInt(1);
if(rm==60){
rm=0;
rh=parseInt(h)+parseInt(1);
if(rh==24){
rh=0;
rd=parseInt(d)+parseInt(1);
//润平年选择
var big=Array(1,3,5,7,8,10,12);
var small=Array(4,6,9,11);
if(IsPinYer(y)){ //2月29天
if(mm==2){ //2月
if(rd==30){
rd=1;
rmm=parseInt(mm)+parseInt(1);
ry=parseInt(y);
}else{
rmm=parseInt(mm);
ry=parseInt(y);
}
}
if(InArray(mm,big)){
if(rd==32){
rd=1;
rmm=parseInt(mm)+parseInt(1);
if(rmm==13){ //跨年
rmm=1;
ry=parseInt(y)+parseInt(1);
}else {
ry = parseInt(y);
}
}else{
rmm=parseInt(mm);
ry=parseInt(y);
}
}
if(InArray(mm,small)){
if(rd==31){
rd=1;
rmm=parseInt(mm)+parseInt(1);
ry=parseInt(y);
}else{
rmm=parseInt(mm);
ry=parseInt(y);
}
}
}else{ //2月28天
if(mm==2){ //2月
if(rd==29){
rd=1;
rmm=parseInt(mm)+parseInt(1);
ry=parseInt(y);
}else{
rmm=parseInt(mm);
ry=parseInt(y);
}
}
if(InArray(mm,big)){
if(rd==32){
rd=1;
rmm=parseInt(mm)+parseInt(1);
if(rmm==13){ //跨年
rmm=1;
ry=parseInt(y)+parseInt(1);
}else {
ry = parseInt(y);
}
}else{
rmm=parseInt(mm);
ry=parseInt(y);
}
}
if(InArray(mm,small)){
if(rd==31){
rd=1;
rmm=parseInt(mm)+parseInt(1);
ry=parseInt(y);
}else{
rmm=parseInt(mm);
ry=parseInt(y);
}
}
}
}else{
rd=parseInt(d);
rmm=parseInt(mm);
ry=parseInt(y);
}
}else{
rh=parseInt(h);
rd=parseInt(d);
rmm=parseInt(mm);
ry=parseInt(y);
}
}else{
var rm=parseInt(m);
var rh=parseInt(h);
var rd=parseInt(d);
var rmm=parseInt(mm);
var ry=parseInt(y);
}
var v=parseInt(s)+parseInt(1);
$('#'+id).html('<span id="y">'+ry+'</span>-<span id="mm">'+rmm+'</span>-<span id="d">'+rd+'</span> <span id="h">'+rh+'</span>:<span id="m">'+rm+'</span>:<span id="s">'+v+'</span>');
}
function InArray(str,arr){ //判断str是否在arr这个数组中存在
for(var i=0;i<arr.length;i++){
if(arr[i]==str){
return true;
}
}
return false;
}
/**
* 和PHP一样的时间戳格式化函数
* @param {string} format 格式
* @param {int} timestamp 要格式化的时间 默认为当前时间
* @return {string} 格式化的时间字符串
*/
function date(format, timestamp){
var a, jsdate=((timestamp) ? new Date(timestamp*1000) : new Date());
var pad = function(n, c){
if((n = n + "").length < c){
return new Array(++c - n.length).join("0") + n;
} else {
return n;
}
};
var txt_weekdays = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
var txt_ordin = {1:"st", 2:"nd", 3:"rd", 21:"st", 22:"nd", 23:"rd", 31:"st"};
var txt_months = ["", "January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
var f = {
// Day
d: function(){return pad(f.j(), 2)},
D: function(){return f.l().substr(0,3)},
j: function(){return jsdate.getDate()},
l: function(){return txt_weekdays[f.w()]},
N: function(){return f.w() + 1},
S: function(){return txt_ordin[f.j()] ? txt_ordin[f.j()] : 'th'},
w: function(){return jsdate.getDay()},
z: function(){return (jsdate - new Date(jsdate.getFullYear() + "/1/1")) / 864e5 >> 0},
// Week
W: function(){
var a = f.z(), b = 364 + f.L() - a;
var nd2, nd = (new Date(jsdate.getFullYear() + "/1/1").getDay() || 7) - 1;
if(b <= 2 && ((jsdate.getDay() || 7) - 1) <= 2 - b){
return 1;
} else{
if(a <= 2 && nd >= 4 && a >= (6 - nd)){
nd2 = new Date(jsdate.getFullYear() - 1 + "/12/31");
return date("W", Math.round(nd2.getTime()/1000));
} else{
return (1 + (nd <= 3 ? ((a + nd) / 7) : (a - (7 - nd)) / 7) >> 0);
}
}
},
// Month
F: function(){return txt_months[f.n()]},
m: function(){return pad(f.n(), 2)},
M: function(){return f.F().substr(0,3)},
n: function(){return jsdate.getMonth() + 1},
t: function(){
var n;
if( (n = jsdate.getMonth() + 1) == 2 ){
return 28 + f.L();
} else{
if( n & 1 && n < 8 || !(n & 1) && n > 7 ){
return 31;
} else{
return 30;
}
}
},
// Year
L: function(){var y = f.Y();return (!(y & 3) && (y % 1e2 || !(y % 4e2))) ? 1 : 0},
//o not supported yet
Y: function(){return jsdate.getFullYear()},
y: function(){return (jsdate.getFullYear() + "").slice(2)},
// Time
a: function(){return jsdate.getHours() > 11 ? "pm" : "am"},
A: function(){return f.a().toUpperCase()},
B: function(){
// peter paul koch:
var off = (jsdate.getTimezoneOffset() + 60)*60;
var theSeconds = (jsdate.getHours() * 3600) + (jsdate.getMinutes() * 60) + jsdate.getSeconds() + off;
var beat = Math.floor(theSeconds/86.4);
if (beat > 1000) beat -= 1000;
if (beat < 0) beat += 1000;
if ((String(beat)).length == 1) beat = "00"+beat;
if ((String(beat)).length == 2) beat = "0"+beat;
return beat;
},
g: function(){return jsdate.getHours() % 12 || 12},
G: function(){return jsdate.getHours()},
h: function(){return pad(f.g(), 2)},
H: function(){return pad(jsdate.getHours(), 2)},
i: function(){return pad(jsdate.getMinutes(), 2)},
s: function(){return pad(jsdate.getSeconds(), 2)},
//u not supported yet
// Timezone
//e not supported yet
//I not supported yet
O: function(){
var t = pad(Math.abs(jsdate.getTimezoneOffset()/60*100), 4);
if (jsdate.getTimezoneOffset() > 0) t = "-" + t; else t = "+" + t;
return t;
},
P: function(){var O = f.O();return (O.substr(0, 3) + ":" + O.substr(3, 2))},
//T not supported yet
//Z not supported yet
// Full Date/Time
c: function(){return f.Y() + "-" + f.m() + "-" + f.d() + "T" + f.h() + ":" + f.i() + ":" + f.s() + f.P()},
//r not supported yet
U: function(){return Math.round(jsdate.getTime()/1000)}
};
return format.replace(/[\\]?([a-zA-Z])/g, function(t, s){
if( t!=s ){
// escaped
ret = s;
} else if( f[s] ){
// a date function exists
ret = f[s]();
} else{
// nothing special
ret = s;
}
return ret;
});
}
function IsPinYer(yer){ //判断润平年 返回真2月29天
return(0==yer%4 && (yer%100!=0 || yer%100==0));
}
</script>
</html>