<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
.box {
width: 300px;
height: 50px;
margin: 10px auto;
box-sizing: border-box;
text-align: center;
line-height: 48px;
border: 1px solid #333;
}
.text {
color: red;
letter-spacing: 3px;
}
</style>
<body>
<div class="box">
距离开抢还剩：<span class="text">00:00:00</span>
</div>
<script>
let boxText = document.querySelector('.box .text'),
nowTime = +new Date(),
tarTime = +new Date('2021/07/28 15:19:00');
console.log(nowTime);
timer = null;
// 计算时间差
const zero = val => {
val = +val;
return val < 10 ? '0' + val : val;
}
const computed = function computed() {
let diffTime = tarTime - nowTime;
if (diffTime <= 0) {
boxText.innerHTML = '00:00:00';
clearInterval(timer);
/* timer = null; */
return;
}
//倒计时中
let hours = Math.floor(diffTime / 3600000);
diffTime = diffTime - hours * 3600000;
let minutes = Math.floor(diffTime / 60000);
diffTime = diffTime - minutes * 60000;
let seconds = Math.floor(diffTime / 1000);
boxText.innerHTML = `${zero(hours)}:${zero(minutes)}:${zero(seconds)}`
}
//获取服务器时间
const querySeverTime = function querySeverTime() {
return new Promise(resolve => {
let xhr = new XMLHttpRequest;
xhr.open('HEAD', './data.json');
xhr.onreadystatechange = () => {
let { status, readyState } = xhr;
if (status >= 200 && status < 400) {
if (readyState === 2) {
let time = new Date(xhr.getResponseHeader('date'));
resolve(+time);
}
}
};
xhr.send();
})
};
//第一次加载页面获取服务器时间:赋值给全局的nowTime & 渲染一次
querySeverTime().then(value => {
nowTime = value;
computed();
//每隔一秒钟
timer = setInterval(() => {
nowTime += 1000;
computed();
}, 1000)
})
</script>
</body>
</html>
