最新消息:Rockyxia Web技术博客全新改版,响应式布局满足各种设备各种尺寸的访问需求。

分享一个js获取服务器时间,然后做倒计时的程序

Javascript rockyxia 14703浏览 0评论

正文直接开始

我们经常在网上看到那些商城里有限时抢购和秒杀一类的倒计时,今天我来分享一个用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=utf-8"/>  
<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>

设定时间:2012年12月31日0时0分0秒

服务器时间:<span id='web'>loading...</span>

本地时间:<span id="locale">loading...</span>

倒计时时间:<span id="time">loading...</span>

<script type="text/javascript" charset="utf-8">  targetTime=new Date(2012,12,31,00,00,00);  </script>

原理其实也是很简单的,用xmlhttp来获取服务器上的时间,后台用js做倒计时显示到页面上,这个在本地运行不一定能成功,最好是在服务器上运行!

使用过程中遇到什么问题,大家都可以在这里跟我咨询!

转载请注明:Rockyxia Web技术博客 » 分享一个js获取服务器时间,然后做倒计时的程序
感谢阅读,如果您发现文章中有表述不准确,欢迎提出来,也欢迎交流相关问题,你可以去这里进行一对一问答交流。

(本篇完)