纯JS的基于静态站点服务器时间

稿件来源: 互联网   撰稿作者: 太阳光   发表日期: 2010-04-01   阅读次数: 92   查看权限: 游客查看

纯JS的基于静态站点服务器时间

  <style>
 table{
 border-collapse:collapse; border:2px solid outset;
 background:#F0EFE2;
 padding:10px;
 font-size:14px;font-family:Arial;

 }
img{vertical-align:middle;margin:0px;}
#ad{ background:#016CA4;}
th{
  background:#35528E url([img]http://www.dhooo.com/web/images/caption.jpg[/img]) repeat-y 100% 0; 
 color:#fff;padding:10px;
 margin:1px;
 }
#web,#locale{
 border:2px solid inset;background:#000;
 color: #00FFFF;font-weight:bold;
 }
#diff{color:red}
 </style>
 <body>
 <table border=0 cellspacing="3" cellpadding="5" align=center>
<th colspan='4' align="left"><div> <span style="color:#FFCC33">◆ </span>爱无忧,爱果果,爱JavaScript</div></caption>
 <tr><td colspan='4' id="ad" align=right><img src="http://img.alimama.cn/a/2008-10-26/109733430002081026005231.gif" align=right></td></tr>
 <tr><td rowspan='4' style="width:10px;overflow:hidden;backgound:url()">
 <img src="http://bbs.51js.com/images/avatars/16.gif" border=0 align=right></td>
 <td><img src="http://bbs.51js.com/images/smilies/time.gif" /> 无忧服务器的时间:</td><td id='web'><div>loading...</div></td></tr>
 <tr><td><img src="http://bbs.51js.com/images/smilies/time.gif" /> 大哥您本地的时间:</td><td id="locale">loading...</td></tr>
 <tr><td>离2010年还有</td><td id="ooxx">&nbsp;</td></tr>
 <tr><td>伪标准时差</td><td id="diff">&nbsp;</td></tr>
</table>
 </body>
 <script type="text/javascript">
$=function (id){return document.getElementById(id)}

if(document.all){
    window.XMLHttpRequest=function(){
        var $=['Microsoft.XMLHTTP','Msxml2.XMLHTTP'];
  for(var i=0;i<$.length;i++){try{return new ActiveXObject($[i])}catch(e){}};
    };
}
webDate=function(fn){
       var QQ=new XMLHttpRequest();
       QQ.onreadystatechange=function(){QQ.readyState==4&&(fn(new Date(QQ.getResponseHeader('Date'))))};
       QQ.open('HEAD', '/?_='+(-new Date));
       QQ.send(null);
}
window.time=new Date();
targetTime=new Date('2010/1/1');

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){
  $('web').innerHTML=time2String(time=webTime);
 })
 $('locale').innerHTML=time2String(new Date);
 $('diff').innerHTML=Math.abs(new Date()-time-1000)+'毫秒'
 $('ooxx').innerHTML=int2time(targetTime-time);
},1000)

 </script>
</html>
 

关键词: 服务器,javascrip,时间   编辑时间: 2010-04-03 11:08:57

  • 感到高兴

    0

    高兴
  • 感到支持

    0

    支持
  • 感到搞笑

    0

    搞笑
  • 感到不解

    0

    不解
  • 感到谎言

    0

    谎言
  • 感到枪稿

    0

    枪稿
  • 感到震惊

    0

    震惊
  • 感到无奈

    0

    无奈
  • 感到无聊

    0

    无聊
  • 感到反对

    0

    反对
  • 感到愤怒

    0

    愤怒
0%(0)
0%(0)
共有0 条评论 发言请遵守【相关规定

网友评论

会员头像
发 表同步腾讯微博    验证码:  点击更新请先登陆
  • 暂无评论
关闭模块文章图片 article Pictrue
  • 我的妈妈爸爸
  • 基于koa2+mysql+vue2.0+Element阳光内容管理系统
  • 代码覆盖率工具 Istanbul 入门教程
  • 全栈工程师的武器——MEAN
  • 9款超炫的 CSS3 复选框(Checkbox)
  • 微信开发在线翻译功能
  • CSS3那些不为人知的高级属性
  • 给easyui的datebox添加清空事件
  • flash写字效果
  • kendoUI系列教程之DropDownList下拉菜单
  • kendoUI系列教程之datetimepicker日期时间选择
  • kendoUI系列教程之datepicker日期选择
  • kendoUI系列教程之combobox下拉列表框
  • kendoUI系列教程之colorpicker
  • kendoUI系列教程之calendar日历表
  • kendoUI系列教程之autocomplete自动补齐