} window.baidu_time=function(obj)//"city":"北京","time":1292290756579} { new clock(obj.time);//北京时间 document.getElementById("spnTime").innerHTML=dateDiff(obj.time,new Date()); } function dateDiff(d,d1) { if(typeof(d)=='string' || typeof(d)=='number') { d = new Date(d); }
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
.rot
{
/**
transform: rotate(40deg);
-o-transform: rotate(40deg);
-webkit-transform: rotate(40deg);
-moz-transform: rotate(40deg);
IE则需要用到一个复杂的滤镜DXImageTransform.Microsoft.Matrix。它一共接受五个参数，前四个参数需要自行计算三角函数，然后分别写成M11 = cos(rotation),M12 = -sin(rotation),M21 = sin(rotation),M22 = cos(rotation)，其中的rotation表示旋转角度，如果顺时针旋转7.5度，则rotation就为7.5；第五个参数 SizingMethod表示重绘方式，'auto expand'代表自动扩展到新的边界。
filter: progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=0.7660444431189777, M12=-0.6427876096865394, M21=0.6427876096865398, M22=0.7660444431189779);
*/
cursor: pointer;
position: absolute;
}
</style>
</head>
<body>
<span style="position: absolute; top: 25px; left: 200px;"><span id="spnTime"></span></span>
<div style="position: absolute; top: 185px; left: 200px;">
北京时间：<span id="times"></span>
<div style="position: absolute; top: 15px; left:0px;" id="cbg">
<img id="clock" src="http://bjtime.cn/clock.gif"/>
</div><div style="position: absolute; top: 20px; left: 43px; height:80px; width:80px;" id="runClock">
<img class="rot" id="Hour" src="http://bjtime.cn/shi.gif">
<img class="rot" id="Minute" src="http://bjtime.cn/fen.gif">
<img class="rot" id="Second" src="http://bjtime.cn/miao.gif">
</div></div><div style="position: absolute; top: 55px; left: 200px;">
本地时间：<span id="times1"></span>
<div style="position: absolute; top: 15px; left:0px;" id="cbg1">
<img id="clock1" src="http://bjtime.cn/clock.gif"/>
</div><div style="position: absolute; top: 20px; left: 43px; height:80px; width:80px;" id="runClock1">
<img class="rot" id="Hour1" src="http://bjtime.cn/shi.gif">
<img class="rot" id="Minute1" src="http://bjtime.cn/fen.gif">
<img class="rot" id="Second1" src="http://bjtime.cn/miao.gif">
</div></div></body>
<script type="text/javascript" >
function clock(initTime,index)
{
this.time = initTime || new Date();
if(typeof(this.time)=='string' || typeof(this.time)=='number')
{
this.time = new Date(this.time);
}
this.index=index||"";
this.hr=this.mr=this.sr=this.h=this.m=this.s=0;
this.hour=this.minute=this.second=null;
this.isIE=!!document.all;
this.times=null;
this.init();
}
clock.prototype.init=function()
{
var obj=this;
obj.s=this.time.getSeconds();
obj.m=this.time.getMinutes();
obj.h=this.time.getHours();
obj.hour=document.getElementById("Hour"+this.index);
obj.minute=document.getElementById("Minute"+this.index);
obj.second=document.getElementById("Second"+this.index);
obj.times = document.getElementById("times"+this.index);
if(obj.isIE)
{
document.getElementById("runClock"+this.index).style.left ="4px";
}
obj.sr = obj.s*6;
obj.mr = Math.round((obj.m+obj.s/60)*6);
obj.hr = Math.round((obj.h+(obj.m/60))*30)%360;
if(obj.isIE)
{
var m1=Math.cos(obj.degToRad(obj.hr));
var m2=Math.sin(obj.degToRad(obj.hr));
obj.hour.style.cssText = "filter: progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11="+m1+", M12="+(0-m2)+", M21="+m2+", M22="+m1+");";
obj.hour.style.top = 40 - (obj.hour.offsetHeight/2);
obj.hour.style.left = 40 - (obj.hour.offsetWidth/2);
m1=Math.cos(obj.degToRad(obj.mr));
m2=Math.sin(obj.degToRad(obj.mr));
obj.minute.style.cssText = "filter: progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11="+m1+", M12="+(0-m2)+", M21="+m2+", M22="+m1+");";
obj.minute.style.top = 40 - (obj.minute.offsetHeight/2);
obj.minute.style.left = 40 - (obj.minute.offsetWidth/2);
m1=Math.cos(obj.degToRad(obj.sr));
m2=Math.sin(obj.degToRad(obj.sr));
obj.second.style.cssText = "filter: progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11="+m1+", M12="+(0-m2)+", M21="+m2+", M22="+m1+");";
obj.second.style.top = 40 - (obj.second.offsetHeight/2);
obj.second.style.left = 40 - (obj.second.offsetWidth/2);
}else
{
obj.hour.style.cssText =" transform: rotate("+obj.hr+"deg); -o-transform: rotate("+obj.hr+"deg);-webkit-transform: rotate("+obj.hr+"deg);-moz-transform: rotate("+obj.hr+"deg);";
obj.minute.style.cssText =" transform: rotate("+obj.mr+"deg); -o-transform: rotate("+obj.mr+"deg);-webkit-transform: rotate("+obj.mr+"deg);-moz-transform: rotate("+obj.mr+"deg);";
obj.second.style.cssText =" transform: rotate("+obj.sr+"deg); -o-transform: rotate("+obj.sr+"deg);-webkit-transform: rotate("+obj.sr+"deg);-moz-transform: rotate("+obj.sr+"deg);";
}
obj.times.innerHTML = (obj.h<10?"0"+obj.h:obj.h)+"时"+(obj.m<10?"0"+obj.m:obj.m)+"分"+(obj.s<10?"0"+obj.s:obj.s)+"秒";
setInterval(function(){ obj.runClock();},1000);
};
clock.prototype.runClock=function()
{
var obj=this;
var m1=m2=0;
obj.sr+=6;
if(obj.isIE)
{
m1=Math.cos(obj.degToRad(obj.sr));
m2=Math.sin(obj.degToRad(obj.sr));
obj.second.style.cssText = "filter: progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11="+m1+", M12="+(0-m2)+", M21="+m2+", M22="+m1+");";
obj.second.style.top = 40 - (obj.second.offsetHeight/2);
obj.second.style.left = 40 - (obj.second.offsetWidth/2);
}else{
obj.second.style.cssText =" transform: rotate("+obj.sr+"deg); -o-transform: rotate("+obj.sr+"deg);-webkit-transform: rotate("+obj.sr+"deg);-moz-transform: rotate("+obj.sr+"deg);";
}
if(obj.sr>=360)
{
obj.sr=0;
}
if(obj.sr%60==0)
{
obj.mr++;
if(obj.mr>=360)
{
obj.mr=0;
}
if(obj.isIE)
{
m1=Math.cos(obj.degToRad(obj.mr));
m2=Math.sin(obj.degToRad(obj.mr));
obj.minute.style.cssText = "filter: progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11="+m1+", M12="+ (0-m2)+", M21="+m2+", M22="+m1+");";
obj.minute.style.top = 40 - (obj.minute.offsetHeight/2);
obj.minute.style.left = 40 - (obj.minute.offsetWidth/2);
}else{
obj.minute.style.cssText =" transform: rotate("+obj.mr+"deg); -o-transform: rotate("+obj.mr+"deg);-webkit-transform: rotate("+obj.mr+"deg);-moz-transform: rotate("+obj.mr+"deg);";
}
if(obj.mr%12==0)
{
obj.hr++;
if(obj.hr==360){obj.hr=0;}
if(obj.isIE)
{
m1=Math.cos(obj.degToRad(obj.hr));
m2=Math.sin(obj.degToRad(obj.hr));
obj.hour.style.cssText = "filter: progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11="+m1+", M12="+ (0-m2)+", M21="+m2+", M22="+m1+");";
obj.hour.style.top = 40 - (obj.hour.offsetHeight/2);
obj.hour.style.left = 40 - (obj.hour.offsetWidth/2);
}else{
obj.hour.style.cssText =" transform: rotate("+obj.hr+"deg); -o-transform: rotate("+obj.hr+"deg);-webkit-transform: rotate("+obj.hr+"deg);-moz-transform: rotate("+obj.hr+"deg);";
}
}
}
obj.s++;
if(obj.s==60){
obj.s=0;
obj.m++;
if(obj.m==60){
obj.m=0;
obj.h++;
if(obj.h==24){
obj.h=0;
}
}
}
obj.times.innerHTML = (obj.h<10?"0"+obj.h:obj.h)+"时"+(obj.m<10?"0"+obj.m:obj.m)+"分"+(obj.s<10?"0"+obj.s:obj.s)+"秒";
};clock.prototype.degToRad=function(x) { return ( x/(360/(2*Math.PI))); };function getBeijingTime(src)
{ var s = document.createElement('script');
s.type='text/javascript';
s.charset='gb2312'; //'gb2312';
s.src = src;
document.getElementsByTagName('head')[0].appendChild(s);
}
window.baidu_time=function(obj)//"city":"北京","time":1292290756579}
{
new clock(obj.time);//北京时间
document.getElementById("spnTime").innerHTML=dateDiff(obj.time,new Date());
}
function dateDiff(d,d1)
{
if(typeof(d)=='string' || typeof(d)=='number')
{
d = new Date(d);
}
d=d1-d;
var q=d>0 ;
if(!q){
d=-d;
}
var r=[];
var t=0;
if(d>(1000 * 60 * 60 * 24))
{
t=Math.floor(d/(1000 * 60 * 60 * 24));
r.push(t+"天");
d%=(1000 * 60 * 60 * 24);
}
if(d>(1000 * 60 * 60))
{
t=Math.floor(d/(1000 * 60 * 60 ));
r.push(t+"小时");
d%=(1000 * 60 * 60);
}
if(d>(1000 * 60 ))
{
t=Math.floor(d/(1000 * 60 ));
r.push(t+"分");
d%=(1000 * 60);
}
if(d>1000)
{
t=Math.round(d/1000);
r.push(t+"秒");
}
if(r.length==0)
{
return "你的时间是准确的北京时间";
}else{
return "你的时间比北京时间"+(q?"快":"慢")+"了"+r.join("")+"！ 请校准！";
}
}
getBeijingTime("http://open.baidu.com/app?module=beijingtime&t="+Math.random());
new clock(new Date(),1);// 本地时间
</script>
</html>