js动态显示当前日期，时间和星期代码

hudeyong926 · 发表于 2013-2-7 15:12:43

js动态客户端显示当前日期，时间和星期代码主要代码如下：
当前时间：<div  id="time"></div>function ShowTime() //显示时间的方法{document.getElementById('time').innerHTML=new Date().toLocaleString()+' 星期'+'日一二三四五六'.charAt(new Date().getDay());//显示服务器时间}setInterval("ShowTime()", "1000");如果你想改变显示时间字体的颜色可以这么做,以红色为例：
把：<div id="time">
修改为
<div id="time" style="color:red;">
<div id="time" style="display:inline;"></div>当然你还可以换为其它颜色，或其它样式都是可以的。

名称：服务器时钟（一次读取，实时显示）
功能：在客户端浏览器上显示服务器端的时间。
原理：
1. 获取服务端的日期时间。
2. 根据客户端浏览器的时间可以得到服务器和客户端的时间差。
3. 服务器的时钟 = 客户端的时钟（变化值）+ 时间差（固定值）
<html xmlns="http://www.w3.org/1999/xhtml" ><head><title></title></head><body>当前时间：<div  id="time"></div><script>var XmlHttp = new ActiveXObject("Microsoft.XmlHttp");//创建XMLHTTP对象XmlHttp.open("HEAD","http://www.beijing-time.org",false);  //从哪个服务器上获取时间XmlHttp.send();  //连接服务器var offset = Date.parse(XmlHttp.getResponseHeader("Date"));//获取标头中的时间offset -= (new Date).getTime(); //获取本地时间与服务器时间的间隔function ShowTime() //显示时间的方法{ var d = new Date;  //获取当前时间                                  d.setTime(d.getTime()+offset); //通过服务器和本地的时间间隔获取当前服务器时间 document.getElementById('time').innerHTML=d.toLocaleString();//显示服务器时间}setInterval("ShowTime()", "1000");</script></body></html>JS获取的是用户客户端时间，只要改变本地时间，相应的也将改变。这点不符合时间操作。正确的是，获取服务器端时间，这样无论你怎么改变本地时间，其不会变。
<!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" xml:lang="en" lang="en">  <head>  <meta http-equiv="Content-Type" content="text/html; charset=gbk"/>  <title>untitled</title>  <script type="text/javascript">    get=function (id){return document.getElementById(id)}    if(document.all){       window.XMLHttpRequest=function(){             var get=['Microsoft.XMLHTTP','Msxml2.XMLHTTP'];             for(var i=0;i<get.length;i++){try{return new ActiveXObject(get)}catch(e){}};       };    }    webDate=function(fn){       var Htime=new XMLHttpRequest();       Htime.onreadystatechange=function(){Htime.readyState==4&&(fn(new Date(Htime.getResponseHeader('Date'))))};       Htime.open('HEAD', '/?_='+(-new Date));       Htime.send(null);    }    window.time=new Date();    targetTime=new Date();    time2String=function (t){             with(t)return [getFullYear(),'年'                ,('0'+(getMonth()+1)).slice(-2),'月'                ,('0'+getDate()).slice(-2),'日 '                ,('0'+getHours()).slice(-2),': '                ,('0'+getMinutes()).slice(-2),': '                ,('0'+getSeconds()).slice(-2)].join('')    }    int2time=function (m){       m-=(D=parseInt(m/86400000))*86400000;       m-=(H=parseInt(m/3600000))*3600000;       S=parseInt((m-=(M=parseInt(m/60000))*60000)/1000);       return D+'天'+H+'小时'+M+'分'+S+'秒'    }    setInterval(function (){       webDate(function (webTime){             get('web').innerHTML=time2String(time=webTime);       })       get('locale').innerHTML=time2String(new Date);       get('time').innerHTML=int2time(targetTime-time);       if ((targetTime-time)<0) {             get('time').innerHTML = 'Game Over';       }    },1000) </script>    </head>  <body>  设定时间：2012年12月31日0时0分0秒<br>  服务器时间:<span id='web'>loading...</span><br>  本地时间:<span id="locale">loading...</span><br>  倒计时时间:<span id="time">loading...</span>  <script type="text/javascript" charset="utf-8">    targetTime=new Date(2012,12,31,00,00,00);  </script>  </body>  </html>

		自动登录	找回密码
密码			立即注册