//开启定时器
var
timer
=
setInterval(function
()
{
//执行请求，获取当前服务端时间并进行相应操作
},
1000)
这个方案对于稍微有点经验的开发人员来说，都知道是不可取的。因为这会给服务器造成无法想象的压力，导致应用崩溃。在这个页面停留一分钟，那么请求就发送了60次，假如此时有100个人在访问这个页面，那么一分钟就有6000条请求，人数如果再增长，这绝对会造成不必要的服务器压力。并且这个方案的倒计时，也会存在很大的误差，因为请求存在延迟，跟你的网络状态也有很大的关系。
方案2：从服务端返回以服务器时间为基准的倒计时时间戳
//开启定时器
//假设请求获取到一个时间戳时间差
dateDiff
var
timer
=
setInterval(function
()
{
//每秒会获取本地时间，这样就算执行的周期不准确
也可以准确的获取时间差
var
countDown
=
endTime
-
(+Date.now())/1000
+
dateDiff
//
倒计时页面渲染
},
1000)
优点：
在页面生命周期中请求一次
准确度高，就算页面打开很久还是保持高准确度
缺点：
由于每秒获取当前时间，假如刻意在倒计时时期内，修改了本地时间将会导致倒计时异常。
最简单的思路：
服务器判断是否过期，未过期就算出剩余秒数，并且另外格式化为2天2小时2分钟形式
把状态及秒数传给html视图
（如果过期） 。。。显示过期
（如果未过期）直接把那个“2天2小时2分钟”echo出来
-------------------------------------------------
如果你想让倒计时动起来的话，
页面写个input，值为剩余秒数， js读取，然后使用定时器setTimeout，一秒一秒的改那个提示
用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=0i<get.lengthi++)
{
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做倒计时显示到页面上，由于获取服务器时间这个在本地运行不一定能成功，最好是在服务器上运行！
欢迎分享，转载请注明来源：夏雨云
微信扫一扫
支付宝扫一扫
评论列表（0条）