倒计时抢购案例

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<body>

距离抢购还剩: 00小时00分钟00秒

</div>

// 获取的当前日期不能是客户端的时间

// 想从服务器获取时间需要发送 AJAX 请求，在响应头信息中包含了服务器的时间

// 减少时间差，请求方式为 HEAD, AJAX状态为2 获取响应头中的时间信息

// 每隔一秒中都需要重新计算时间差，应该在第一次获取时间上自动减去一秒，

// 如果页面刷新,程序需要重新计算此时还需要重新获取服务器时间

let target = new Date('2021/08/05 14:06:20'),

now = new Date(),

timer = null;

function queryServeTime(callback){

let xhr = new XMLHttpRequest;

xhr.open('HEAD','./data.json');

xhr.onreadystatechange = () => {

if(xhr.status === 200 && xhr.readyState === 2){

let time = xhr.getResponseHeader('date'); // Thu, 05 Aug 2021 04:20:49 GMT

// console.log(new Date(time));// Thu Aug 05 2021 12:21:19 GMT+0800 (中国标准时间)

callback && callback(new Date(time));

}

xhr.send(null);

}

function computed(){

let spanTime = target - now;

if(spanTime <= 0){

// 到达抢购时间

clearInterval(timer);

box.innerHTML = "开抢吧！！！";

return;

}

// 没到抢购时间，计算时间差

let hours = Math.floor(spanTime/(60 *60 * 1000));

spanTime = spanTime - hours * 60 * 60 * 1000;

let minutes = Math.floor(spanTime/(60 * 1000));

spanTime = spanTime - minutes * 60 * 1000;

let seconds = Math.floor(spanTime/1000);

hours = hours < 10 ? "0" + hours : hours;

minutes = minutes < 10 ? "0" + minutes : minutes;

seconds = seconds < 10 ? "0" + seconds : seconds;

box.innerHTML = `距离抢购还剩: ${hours}小时${minutes}分钟${seconds}秒`;

}

queryServeTime(time =>{

// 获取到服务器时间后触发的事情

// console.log(time);

now = time;

// 开始计算时间差

computed();

// 每间隔1秒中,在现有时间上加上1秒，然后重新计算时间差

timer = setInterval(() => {

now = new Date(now.valueOf() + 1000);

computed();

}, 1000);

})

</script>

</body>

</html>

posted @ 2021-08-05 14:11 13522679763-任国强阅读(34) 评论(0) 收藏举报

刷新页面返回顶部

Eric

倒计时抢购案例

公告