js动态显示当前日期，时间跟星期代码
日期：2014-05-16 浏览次数：20499 次
js动态显示当前日期，时间和星期代码
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[i])}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>
设定时间
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
