<!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>
<style>
body {
margin: 100px 100px;
}
span {
display: inline-block;
width: 40px;
height: 40px;
background-color: red;
color: #fff;
line-height: 40px;
text-align: center;
}
</style>
<script>
window.addEventListener(‘load‘, function() {
var d = document.querySelector(‘.day‘);
var h = document.querySelector(‘.hours‘);
var m = document.querySelector(‘.minutes‘);
var s = document.querySelector(‘.seconds‘);
var innerTime = new Date(‘2021-6-23 18:00‘);
getDate();
setInterval(getDate, 1000);
// 获取时间
function getDate() {
var time = Date.now();
var newTime = (innerTime - time) / 1000;
var day = parseInt(newTime / 60 / 60 / 24);
day = day < 10 ? ‘0‘ + day : day;
d.innerHTML = day;
// 计算小时
var hours = parseInt(newTime / 60 / 60 % 24);
hours = hours < 10 ? ‘0‘ + hours : hours;
h.innerHTML = hours;
// 计算分钟
var minutes = parseInt(newTime / 60 % 60);
minutes = minutes < 10 ? ‘0‘ + minutes : minutes;
m.innerHTML = minutes;
// 计算秒数
var seconds = parseInt(newTime % 60);
seconds = seconds < 10 ? ‘0‘ + seconds : seconds;
s.innerHTML = seconds;
}
});
</script>
</head>
<body>
<span class="day">1</span>
<span class="hours">1</span>
<span class="minutes">1</span>
<span class="seconds">1</span>
</body>
</html>