javascript商品抢购倒计时

Posted 2020-09-26

完整商品抢购倒计时

抢购倒计时是不能使用本地时间的new Date()的，不然每个人看到的时间是不统一，所以得使用服务器的时间作为初始值

思路：

1、时间统一使用服务器时间（获取服务器时间方法多种），再让本地时间和服务器时间有一个差值（偏移量）来确定让每一台电脑的时间都是统一

2、使用开始时间、结束时间与本地时间相减，获取到时间差，再加是偏移量（这里的时间都转换成时间戳进行计算）

js部分：

//获取服务器时间 start -->

var xhr = new XMLHttpRequest();

if(!xhr){

　　xhr = new ActiveXObject(‘Microsoft.XMLHTTP‘);

} 

xhr.open(‘get‘,‘/‘,false);

xhr.setRequestHeader(‘If-Modified-Since‘,‘q‘);

xhr.send();

var timerstr = xhr.getResponseHeader(‘Date‘);

var serverTime = new Date(timerstr);

var dateTime = new Date();

//获取服务器时间 end -->

//定义函数

function gtime(){

　　var nowTime = new Date();

　　var difference = dataTime.getTime() - serverTime.getTime();　　//本地时间与服务时间的偏移量

　　var startTime = new Date(‘2017/06/01 19:00:00‘) 　　//时间是后台给的一个时间戳，然后转换成new Date输出的格式 

　　var endTime = new Date(‘2017/06/30 19:00:00‘) 　　//时间是后台给的一个时间戳，然后转换成new Date输出的格式 

　　var leftTime = parseInt((startTime.getTime() - nowTime.getTime() + difference))/1000

　　var onTime = parseInt((endTime.getTime() - nowTime.getTime() + difference))/1000

 

　　var d = parseInt(leftTime/3600/24);

　　var h = parseInt((leftTime/3600)%24);

　　var m = parseInt((leftTime/60)%60);

　　var s = parseInt(leftTime%60);

　　

　　var d2 = parseInt(onTime/3600/24);

　　var h2 = parseInt((onTime/3600)%24);

　　var m2 = parseInt((onTime/60)%60);

　　var s2 = parseInt(onTime%60);

 

　　if(leftTime > 0){

　　　　document.getElementById("LeftTime").innerhtml = "距离活动开始还有：" + ‘ ‘ + "<span>" + d + "</span>天<span>" + h + "</span>小时<span>" + m + "</span>分<span>" + s + "</span>秒";

　　}else if(onTime > 0){

　　　　document.getElementById("LeftTime").innerHTML = "距离活动结束还有：" + ‘ ‘ + "<span>" + d2 + "</span>天<span>" + h2 + "</span>小时<span>" + m2 + "</span>分<span>" + s2 + "</span>秒";

　　}else if(onTime < 0){

　　　　document.getElementById("LeftTime").innerHTML = "活动已结束，请继续关注我们的动态";

　　　　clearInterval(beginTime);

　　}

}

gTime();

var beginTime = setInterval(getTime,1000)

 

//html部分

<div id="LeftTime"></div>