倒计时抢购案例实现
let countdownModule = (function () {
let textBox = document.querySelector('.text'),
serverTime = 0,
targetTime = +new Date('2020/12/05 16:00:00'),
timer = null;
// 获取服务器时间
const queryServerTime = function queryServerTime() {
return new Promise(resolve => {
let xhr = new XMLHttpRequest;
xhr.open('HEAD', '/');
/*
HEAD方法和GET方法一样，知识不返回豹纹的主体部分，用于确认URI的有效性及资源更新的日期时间等。
具体来说：1、判断类型； 2、查看响应中的状态码，看对象是否存在（响应：请求执行成功了，但无数据返回）； 3、测试资源是否被修改过
HEAD方法和GET方法的区别： GET方法有实体，HEAD方法无实体。
*/
xhr.onreadystatechange = () => {
if ((xhr.status >= 200 && xhr.status < 300) && xhr.readyState === 2) {
let time = xhr.getResponseHeader('Date');
// 获取的时间是格林尼治时间 -> 变为北京时间
resolve(+new Date(time));
}
};
xhr.send(null);
});
};
// 倒计时计算
const supplyZero = function supplyZero(val) {
val = +val || 0;
return val < 10 ? `0${val}` : val;
};
const computed = function computed() {
let diff = targetTime - serverTime,
hours = 0,
minutes = 0,
seconds = 0;
if (diff <= 0) {
// 到达抢购时间了
textBox.innerHTML = '00:00:00';
clearInterval(timer);
return;
}
// 没到时间则计算即可
hours = Math.floor(diff / (1000 * 60 * 60));
diff = diff - hours * 1000 * 60 * 60;
minutes = Math.floor(diff / (1000 * 60));
diff = diff - minutes * 1000 * 60;
seconds = Math.floor(diff / 1000);
textBox.innerHTML = `${supplyZero(hours)}:${supplyZero(minutes)}:${supplyZero(seconds)}`;
};
return {
async init() {
serverTime = await queryServerTime();
computed();
// 设置定时器
timer = setInterval(() => {
serverTime += 1000;
computed();
}, 1000);
}
};
})();