目录
效果图
思路
借鉴了GitHub上新年倒计时的实现方法,同时给‘new year countdown’做了一个视觉变换的效果(也是用JS实现的)
1.HTML部分
<!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>倒计时</title>
</head>
<body>
<div class="background">New Year Countdown
<div id="countdown" class="countdown">
<div class="time">
<h2 id="days">00</h2>
<small>days</small>
</div>
<div class="time">
<h2 id="hours">00</h2>
<small>hours</small>
</div>
<div class="time">
<h2 id="minutes">00</h2>
<small>minutes</small>
</div>
<div class="time">
<h2 id="seconds">00</h2>
<small>seconds</small>
</div>
<div id="year" class="year"></div>
</div></div>
</body>
</html>
2.CSS部分
body {
margin: 0;
padding: 0;
height: 200vh;
overflow-x: hidden;
background-repeat: repeat;
}
.background {
background-image: url("thumb_1680_0_20201028105748891.jpg");
background-size: cover;
background-position: 50% 50%;
position: absolute;
top: 0;
height: 200vh;
font: 500 150px '';
padding-top: 800px;
line-height: 100px;
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
position: relative;
text-align: center;
overflow: hidden;
}
.background::before {
content: '';
background-size: cover;
background-image: inherit;
background-position: 50% 50%;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
z-index: -99;
}
.year {
font-size: 200px;
z-index: -1;
opacity: 0.2;
position: relative;
top: 250px;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
}
.countdown {
display: block;
width: 100%;
height: 300px;
z-index: 9999;
position: relative;
top: 100px;
-webkit-text-fill-color: rgb(171, 109, 177);
}
.time {
display: block;
margin: 100px;
height: 30px;
font-size: 55px;
float: left;
padding-left: 50px;
}
.time h2 {
margin: 0 0 5px;
}
3.JS部分
const background = document.querySelector(".background")
document.addEventListener('scroll', () => {
const scrollY = window.scrollY
if (scrollY !== 0) {
background.style.backgroundPosition = `calc(50% + ${scrollY}px) calc(50% + ${scrollY}px)`
} else {
background.style.backgroundPosition = ''
}
})
const days = document.getElementById('days');
const hours = document.getElementById('hours');
const minutes = document.getElementById('minutes');
const seconds = document.getElementById('seconds');
const countdown = document.getElementById('countdown');
const year = document.getElementById('year');
const loading = document.getElementById('loading');
const currentYear = new Date().getFullYear();
const newYearTime = new Date(`January 01 ${currentYear + 1} 00:00:00`);
year.innerText = currentYear + 1;
function updateCountdown() {
const currentTime = new Date();
const diff = newYearTime - currentTime;
const d = Math.floor(diff / 1000 / 60 / 60 / 24);
const h = Math.floor(diff / 1000 / 60 / 60) % 24;
const m = Math.floor(diff / 1000 / 60) % 60;
const s = Math.floor(diff / 1000) % 60;
days.innerHTML = d;
hours.innerHTML = h < 10 ? '0' + h : h;
minutes.innerHTML = m < 10 ? '0' + m : m;
seconds.innerHTML = s < 10 ? '0' + s : s;
}
setInterval(updateCountdown, 1000);