JS倒计时页面代码(要求读取服务器时间)

首先、这个页面只需显示如:离XXX还有:1天13:12:23.需显示为倒计时递减。其次,设定倒计时结束为某一时刻,打开页面显示的是<strong>当前服务器时间</str... 首先、这个页面只需显示如:离XXX还有:1天 13:12:23.需显示为倒计时递减。其次,设定倒计时结束为某一时刻,打开页面显示的是 <strong>当前服务器时间</strong>与设定时间的差值、而不是本机时间与设定时间的差值。其实最终的目的只是让N台时间设置不一样的电脑打开该页面显示的倒计时都是一致倒计的。 展开
 我来答
曹晓山11
2015-06-18 · 知道合伙人互联网行家
曹晓山11
知道合伙人互联网行家
采纳数:3033 获赞数:52066
毕业南阳理工学院计算机科学与技术专业,本科学位。互联网行业从业3年工作经验,读过编程类相关书籍多本。

向TA提问 私信TA
展开全部

用JavaScript获取服务器时间,然后做页面倒计时的程序代码如下:

<!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>  
设定时间:2015年06月18日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(2015,06,18,00,00,00);  </script>  
</body> 
</html>

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

百度网友5f5ab10
2012-11-08 · 超过32用户采纳过TA的回答
知道答主
回答量:134
采纳率:0%
帮助的人:68万
展开全部
倒计时显示可以用ajax实现
<strong>当前服务器时间</strong>与设定时间的差值 先获取当前服务器时间,差值用设定时间减去这个当前服务器时间即可
至于你说的“最终的目的只是让N台时间设置不一样的电脑打开该页面显示的倒计时都是一致倒计的”,这个因为你服务器的时间不管在什么电脑打开都是一样的,js获取的是你的服务器时间,而不是本地电脑的时间,所以这个你无需考虑 在任何电脑打开都是一样的,而不论这个电脑的当地时间设置如何。
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
奈羽续基
2013-05-02 · TA获得超过3752个赞
知道大有可为答主
回答量:3157
采纳率:28%
帮助的人:207万
展开全部
首先、这个页面只需显示如:离XXX还有:1天
13:12:23.需显示为倒计时递减。其次,设定倒计时结束为某一时刻,打开页面显示的是
当前服务器时间 与设定时间的差值、而不是本机时间与设定时间的差值。其实最终的目的只是让N台时间设置不一样的电脑打开该页面显示的倒计时都是一致倒计的。
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
收起 更多回答(1)
推荐律师服务: 若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询

为你推荐:

下载百度知道APP,抢鲜体验
使用百度知道APP,立即抢鲜体验。你的手机镜头里或许有别人想知道的答案。
扫描二维码下载
×

类别

我们会通过消息、邮箱等方式尽快将举报结果通知您。

说明

0/200

提交
取消

辅 助

模 式