求高手帮忙写个北京时间的网页闹钟

或者把http://www.420.cn/的源码搞下来，不知为什么我把站上的htm、JS、CSS、SWF什么的都复制下来放在自己的服务器上结果都是显示的客户机时间，而人家显示的是服务器时间，还会有提醒校正时间再设置闹钟。

jquery时钟，有代码和实例，看不懂GOOGLE工具条翻译成中文。

iframe 嵌套
http://bjtime.cn/
上面地址的时钟就可以了

<!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>
<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><div style="position: absolute; top: 185px; left: 200px;">
北京时间：
<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;">
本地时间：
<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;
    var isIE=!!document.all;
    this.mrs=0;
     var obj=this;
    this.init=function()
    {
        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);

        if(isIE)
        {
              document.getElementById("runClock"+this.index).style.left ="4px";
           // hour.parentNode.style.left = parseInt( hour.parentNode.style.left)-20 +"px";
        }
        obj.sr = obj.s*6;
        obj.mr = obj.m*6;
       obj.hr = Math.round((obj.h+(obj.m/60))*30);
         if(isIE)
       {
           var m1=Math.cos(degToRad(obj.hr));
           var m2=Math.sin(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(degToRad(obj.mr));
           m2=Math.sin(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(degToRad(obj.sr));
           m2=Math.sin(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);";
       }

      setInterval(function(){ obj.runClock();},1000);
    };
   this.runClock=function()
   {

       var m1=m2=0;
       obj.sr+=6;
        if(isIE)
       {
           m1=Math.cos(degToRad(obj.sr));
           m2=Math.sin(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;
           obj.mr+=6;
             obj.mrs++;
            if(obj.mr>=360)
            {
                obj.mr=0;
            }
             if(isIE)
                {
                   m1=Math.cos(degToRad(obj.mr));
                   m2=Math.sin(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.mrs==2){
                 obj.hr++;
                 obj.mrs=0;
                 if(obj.hr==360){obj.hr=0;}
                  if(isIE)
                    {
                       m1=Math.cos(degToRad(obj.hr));
                       m2=Math.sin(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.init();
}function degToRad(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);//北京时间
}
getBeijingTime("http://open.baidu.com/app?module=beijingtime&t="+Math.random());
new clock(new Date(),1);// 本地时间
</script>
</html>

LZ，我刚简单看了下那代码，每分钟请求一次北京标准时间（考虑服务器负载问题也可以降低请求频率），并以此为基数触发本地时钟鼓点函数每次步进加1秒（1000MS），如是循环反复，确保分钟级别与北京时间同步。采用JS脚本回调获取标准时间JSON(可跨域)，回调函数(全局)为“baidu_time(json:object)”。FLASH时钟内部设置了双向通讯接口、“setFDF()”、“swfobject.setTime(time:number)”，前者貌似swf加载成功后向HTML容器的JS发送触发信号（又好像是FLASH内部的时钟信号，还步确定），后者用于向FLASH时钟传入时间数据。由此写了个原理样例如下，供你参考。<head>
<meta http-equiv='Content-Type' content='text/html; charset=utf-8'>
<style type="text/css">
*{margin : 0; padding : 0; text-align : center; list-style-type : none}
#clock{position : absolute; left : 430px; top : 100px}
#show {position : absolute; left : 438px; top : 320px; width : 200px; height : 200px}
li{color : #000; height : 30px; font-size :14pt; line-height : 30px; font-family : sans-serif}
</style>
<script type="text/javascript">
function $(o) {
       return 'function' == typeof o ? (window.onload = o) : 'string' == typeof o ?
       /^\./.test(o) && document.getElementsByTagName(o.slice(1)) || document.getElementById(o):o;
}
$.getSWFer = function(o) {
       return ! + '\v1' && ! window.opera && (document[o]||window[o]) || document[o] || window[o];
}
$.getScrpt = function(o) {
       var Oscript = document.createElement('script');
       Oscript.setAttribute('type','text/javascript');
       Oscript.setAttribute('src', o);
       ! + '\v1' && (Oscript.onreadystatechange = function() {
             /(complete|loaded|4)/i.test(Oscript.readyState) && ($('.head')[0].removeChild(Oscript), Oscript = null);
       }) || (Oscript.onload = function() {$('.head')[0].removeChild(Oscript), Oscript = null});
       Oscript.onerror = function() {$('.head')[0].removeChild(Oscript), Oscript = null}
       $('.head')[0].appendChild(Oscript);
}
$(function() {
       var Time, showTime = function(Time) {
              var Y, M, D, W, T, time = new Date(Time);
              var arr = ['<font color=red>日</font>', '一', '二', '三', '四', '五', '<font color=red>六</font>'];
              D = time.getDate();
              Y = time.getFullYear();
              M = time.getMonth()+ 1;
              W = arr[time.getDay()];
              T = (time+'').replace(/^.*(\d{2}):(\d{2}):(\d{2}).*$/g, '$1∶$2∶$3');
              $('show').innerHTML = '<ul><li>' + Y + '年' + M + '月' + D +'日</li><li>星期' + W + '</li><li>' + T + '</li></ul>';
              $.getSWFer('clock').setTime(Time);
       }
       window.baidu_time = function(o) {
              Time = o['time']; showTime(Time);
              typeof Timer == 'undefined' || clearInterval(Timer);
              Timer = setInterval(function(){
                     Time += 1000;
                     showTime(Time);
              }, 1000);
       };
       (function() {
              $.getScrpt('http://open.baidu.com/app?module=beijingtime&t=' + new Date().getTime());
              setTimeout(arguments.callee, 60000);
       })();

})
</script>
</head><object id='clock' classid='clsid:D27CDB6E-AE6D-11cf-96B8-444553540000' width=200 height=200>
<param name='movie' value='http://www.baidu.com/swf/aladdin/clock/clock.swf'>
<param name='menu' value='false'>
<param name='wmode' value='opaque'>
<param name='allowfullscreen' value='false'>
<param name='allowscriptaccess' value='always'>
<embed name='clock' src='http://www.baidu.com/swf/aladdin/clock/clock.swf' quality='high' pluginspage='http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash' type='application/x-shockwave-flash' width=200 height=200 menu='false' allowfullscreen='false' allowscriptaccess='always' wmode='opaque'>
</object>
<div id='show'></div>

BTW：以上代码要保存为“UTF-8”格式HTML；FLASH“clock.swf”可以下载后放到你自己的空间里，路径改为相对；标签OBJECT中SWF标识为“id”，EMBED中的为“name”，写错会无法构造对象句柄。

<!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>
<style type="text/css">
.rot
{
    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>

调试易

求高手帮忙写个北京时间的网页闹钟

解决方案 »