首页 > 代码库 > javascript商品抢购倒计时
javascript商品抢购倒计时
完整商品抢购倒计时
抢购倒计时是不能使用本地时间的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>
javascript商品抢购倒计时