js 获取服务器时间实现倒计时,不是你们想象的那样哦

时间:2021-10-11 17:03:36
<script type="text/javascript" language="JavaScript">  
var NowTime;
function GetRTime(){     
    var EndTime= new Date("July 15 12:00:00 2013"); //截止时间 加载页面从服务获取  
    var nMS =EndTime.getTime() - NowTime.getTime();     
    var nD =Math.floor(nMS/(1000 * 60 * 60 * 24));     
    var nH=Math.floor(nMS/(1000*60*60)) % 24;     
    var nM=Math.floor(nMS/(1000*60)) % 60;     
    var nS=Math.floor(nMS/1000) % 60; 
var nU=Math.floor(nMS/100)%10;
    if(nD>= 0){     
     document.getElementById("RemainD").innerHTML=nD;     
     document.getElementById("RemainH").innerHTML=nH;     
     document.getElementById("RemainM").innerHTML=nM;     
     document.getElementById("RemainS").innerHTML=nS;   
 document.getElementById("RemainU").innerHTML=nU;  
    }     
    else {     
          
    }     
    NowTime = new Date(NowTime.valueOf() + 100);  
    setTimeout("GetRTime()",100);     
}  
window.onload=function(){  
NowTime=new Date("July 13 12:00:00 2013");// 服务器当前时间加载页面从服务器获取
GetRTime();  
document.getElementById("nowdate1").innerHTML=NowTime;  
document.getElementById("nowdate2").innerHTML=new Date();  
}    
</script>   

  <div>服务器当前时间:  <span id="nowdate1">XXX</span></div>  
  <div>本地机当前时间:  <span id="nowdate2">XXX</span></div>  
  <div id="CountMsg">倒计时:  <strong id="RemainD">XX</strong>天<strong id="RemainH">XX</strong>时<strong id="RemainM">XX</strong>分<strong id="RemainS">XX</strong>秒</div>  <strong id="RemainU">XX</strong>毫秒</div>  


以上代码可以实现倒计时功能,但是在不同浏览器下执行一段时间后时间就会逐渐拉大,各位可以复制在html文件中执行一下

7 个解决方案

#1


setTimeout 每10分钟,修复一次 服务器时间

ajax 请求服务器,返回服务器当前时间

#2


<script type="text/javascript" language="JavaScript">
    var NowTime,i=0;
    var EndTime= new Date("July 15 12:00:00 2013").getTime(); //截止时间 加载页面从服务获取
    function GetRTime(){
        i++;
        var nMS =EndTime - NowTime.getTime();
        var nD =Math.floor(nMS/(1000 * 60 * 60 * 24));
        var nH=Math.floor(nMS/(1000*60*60)) % 24;
        var nM=Math.floor(nMS/(1000*60)) % 60;
        var nS=Math.floor(nMS/1000) % 60;
        var nU=Math.floor(nMS/100)%10;
        if(nD>= 0){
            document.getElementById("RemainD").innerHTML=nD;
            document.getElementById("RemainH").innerHTML=nH;
            document.getElementById("RemainM").innerHTML=nM;
            document.getElementById("RemainS").innerHTML=nS;
            document.getElementById("RemainU").innerHTML=nU;
            document.getElementById("numb").innerHTML=i;
        }
        NowTime = new Date(NowTime.valueOf() + 100);
        setTimeout("GetRTime()",100);
    }
    window.onload=function(){
        NowTime=new Date("July 13 12:00:00 2013");// 服务器当前时间加载页面从服务器获取
        GetRTime();
        document.getElementById("nowdate1").innerHTML=NowTime;
        document.getElementById("nowdate2").innerHTML=new Date();
    }
</script>
<div>服务器当前时间:  <span id="nowdate1">XXX</span></div>
<div>本地机当前时间:  <span id="nowdate2">XXX</span></div>
<div id="CountMsg">倒计时:  <strong id="RemainD">XX</strong>天<strong id="RemainH">XX</strong>时<strong id="RemainM">XX</strong>分<strong id="RemainS">XX</strong>秒</div>  <strong id="RemainU">XX</strong>毫秒</div>
运算<span id="numb">0</span>次
原因在于定时执行不同浏览器不一样,虽然你定100毫秒执行一次,有些浏览器在一秒内可能执行了12次。你这不算真正的获取真实时间,只能说是定时累加时间,所以不同浏览器执行次数不一样才会慢慢增加差距。如果都是获取真实服务器时间就不可能会有2秒以上的差距。

#3


亲,这思路有点不可靠,不能用时间累加的方法做。

#4


我的想法是能不能把定时执行与本地时间关联做个校验,就算用户改了本地时间也不会影响倒计时的正常时间,各位大哥在这有没有好的方案或例子

#5


倒计时是不能用 服务器的结束时间作为标志的

首先应该考虑使用相对方式 也就是相对一个起始时间 还剩余多少时间 一般这个剩余时间是相对服务器为准

然后客户端获得了一个剩余时间
那么客户端可以计算出 相对客户端的时间系统到什么时间(几点几分几秒)是一个结束时间

好吧剩下的事情客户端就是计算 当前时间和 结束时间之间的差

#6


首先要获得服务器的当前时间以及结束时间,之后验证服务器当前时间和客户端当前时间的误差,然后用服务器的结束时间减去客户端当前时间再加上误差时间就等于剩余时间了。

#7


还是获取服务器时间与本机时间之间的差值,再进行计时吧,每秒都去服务器请求在当前网络环境下变数太多,每隔一段时间ajax重新获取一次,修复差值就行了
不过没有看到你写ajax获取服务器时间

#1


setTimeout 每10分钟,修复一次 服务器时间

ajax 请求服务器,返回服务器当前时间

#2


<script type="text/javascript" language="JavaScript">
    var NowTime,i=0;
    var EndTime= new Date("July 15 12:00:00 2013").getTime(); //截止时间 加载页面从服务获取
    function GetRTime(){
        i++;
        var nMS =EndTime - NowTime.getTime();
        var nD =Math.floor(nMS/(1000 * 60 * 60 * 24));
        var nH=Math.floor(nMS/(1000*60*60)) % 24;
        var nM=Math.floor(nMS/(1000*60)) % 60;
        var nS=Math.floor(nMS/1000) % 60;
        var nU=Math.floor(nMS/100)%10;
        if(nD>= 0){
            document.getElementById("RemainD").innerHTML=nD;
            document.getElementById("RemainH").innerHTML=nH;
            document.getElementById("RemainM").innerHTML=nM;
            document.getElementById("RemainS").innerHTML=nS;
            document.getElementById("RemainU").innerHTML=nU;
            document.getElementById("numb").innerHTML=i;
        }
        NowTime = new Date(NowTime.valueOf() + 100);
        setTimeout("GetRTime()",100);
    }
    window.onload=function(){
        NowTime=new Date("July 13 12:00:00 2013");// 服务器当前时间加载页面从服务器获取
        GetRTime();
        document.getElementById("nowdate1").innerHTML=NowTime;
        document.getElementById("nowdate2").innerHTML=new Date();
    }
</script>
<div>服务器当前时间:  <span id="nowdate1">XXX</span></div>
<div>本地机当前时间:  <span id="nowdate2">XXX</span></div>
<div id="CountMsg">倒计时:  <strong id="RemainD">XX</strong>天<strong id="RemainH">XX</strong>时<strong id="RemainM">XX</strong>分<strong id="RemainS">XX</strong>秒</div>  <strong id="RemainU">XX</strong>毫秒</div>
运算<span id="numb">0</span>次
原因在于定时执行不同浏览器不一样,虽然你定100毫秒执行一次,有些浏览器在一秒内可能执行了12次。你这不算真正的获取真实时间,只能说是定时累加时间,所以不同浏览器执行次数不一样才会慢慢增加差距。如果都是获取真实服务器时间就不可能会有2秒以上的差距。

#3


亲,这思路有点不可靠,不能用时间累加的方法做。

#4


我的想法是能不能把定时执行与本地时间关联做个校验,就算用户改了本地时间也不会影响倒计时的正常时间,各位大哥在这有没有好的方案或例子

#5


倒计时是不能用 服务器的结束时间作为标志的

首先应该考虑使用相对方式 也就是相对一个起始时间 还剩余多少时间 一般这个剩余时间是相对服务器为准

然后客户端获得了一个剩余时间
那么客户端可以计算出 相对客户端的时间系统到什么时间(几点几分几秒)是一个结束时间

好吧剩下的事情客户端就是计算 当前时间和 结束时间之间的差

#6


首先要获得服务器的当前时间以及结束时间,之后验证服务器当前时间和客户端当前时间的误差,然后用服务器的结束时间减去客户端当前时间再加上误差时间就等于剩余时间了。

#7


还是获取服务器时间与本机时间之间的差值,再进行计时吧,每秒都去服务器请求在当前网络环境下变数太多,每隔一段时间ajax重新获取一次,修复差值就行了
不过没有看到你写ajax获取服务器时间