//01 倒计时(从客户端获取时间)
var mysetInterval=setInterval(function countTime(){
//获取当前时间
var date = new Date();
var now = date.getTime();
//设置截止时间
var endDate = new Date("2018-5-14 18:36:00");
var end = endDate.getTime();
//时间差
var leftTime = end-now;
if(leftTime<=0){
d=0;
h=0;
m=0;
s=0;
clearInterval(mysetInterval);
}else{
//定义变量 d,h,m,s保存倒计时的时间
var d,h,m,s;
if (leftTime>=0) {
d = Math.floor(leftTime/1000/60/60/24);
h = Math.floor(leftTime/1000/60/60%24);
m = Math.floor(leftTime/1000/60%60);
s = Math.floor(leftTime/1000%60);
}
function checkTime(i){
if(i<10){
i="0"+i;
}
return i;
}
//将倒计时赋值到div中
document.getElementById("d").innerHTML =checkTime(d);
document.getElementById("h").innerHTML =checkTime(h);
document.getElementById("m").innerHTML =checkTime(m);
document.getElementById("s").innerHTML =checkTime(s);
}
//递归每秒调用countTime方法,显示动态时间效果
// setTimeout(countTime,1000);
console.log("1"); //测试看程序是否会停止;
}
,1000);
02服务器端获取未完善有bug
获取服务器端时间的方法,这样的话,只要服务器端时间正确,客户端的系统时间不会影响倒计时,但因为要获取服务器时间,所以页面要放到服务器上才能验证哦~代码如下:
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="utf-8">
- <title>服务器倒计时</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>
- 设定时间:2016年1月31日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(2016,1,31,00,00,00);
- </script>
- </body>
- </html>