实现动态倒计时功能是Web开发中常见的需求之一，JS是实现这一功能的重要工具之一。下面我会为你详细讲解如何使用JS实现动态倒计时，并提供两个详细的示例说明。
首先需要在HTML页面中添加需要倒计时的元素，可以使用HTML5中的<time>元素来显示时间。在这个例子中，我们将需要倒计时的元素放在<div>标签中。
<div id="countdown">
<time datetime="2022-01-01T00:00:00"></time>
</div>
接下来是JS实现倒计时功能的关键代码。通过使用setInterval()函数每隔一段时间更新时间，然后根据时间计算出天数、小时、分钟和秒数，最后将结果显示在页面上。
// 获取需要倒计时的时间
const countdownDate = new Date("2022-01-01T00:00:00").getTime();
// 更新倒计时的函数
const updateCountdown = () => {
// 获取当前时间
const now = new Date().getTime();
// 计算时间差
const difference = countdownDate - now;
// 计算天数、小时、分钟和秒数
const days = Math.floor(difference / (1000 * 60 * 60 * 24));
const hours = Math.floor((difference % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
const minutes = Math.floor((difference % (1000 * 60 * 60)) / (1000 * 60));
const seconds = Math.floor((difference % (1000 * 60)) / 1000);
// 更新HTML页面
const countdownElement = document.querySelector("#countdown time");
countdownElement.innerHTML = `${days} 天 ${hours} 时 ${minutes} 分 ${seconds} 秒`;
};
// 每隔1秒更新倒计时
setInterval(updateCountdown, 1000);
现在，我们将使用这个倒计时函数来实现一个简单的倒计时页面。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>倒计时页面</title>
</head>
<body>
<div id="countdown">
<time datetime="2022-01-01T00:00:00"></time>
</div>
<script>
const countdownDate = new Date("2022-01-01T00:00:00").getTime();
const updateCountdown = () => {
const now = new Date().getTime();
const difference = countdownDate - now;
const days = Math.floor(difference / (1000 * 60 * 60 * 24));
const hours = Math.floor((difference % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
const minutes = Math.floor((difference % (1000 * 60 * 60)) / (1000 * 60));
const seconds = Math.floor((difference % (1000 * 60)) / 1000);
const countdownElement = document.querySelector("#countdown time");
countdownElement.innerHTML = `${days} 天 ${hours} 时 ${minutes} 分 ${seconds} 秒`;
};
setInterval(updateCountdown, 1000);
</script>
</body>
</html>
这样就可以得到一个简单的页面，显示距离指定日期的倒计时。
接下来，我们将使用这个倒计时函数来实现一个更复杂的倒计时页面。这个页面可以让用户自定义目标日期，并显示倒计时的时间。同时，还可以使用动画效果来让页面更加生动。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>动态倒计时页面</title>
<style>
.countdown-wrapper {
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
background-color: #333;
color: #fff;
font-size: 3rem;
text-shadow: 1px 1px 2px #000000;
}
.counter {
display: flex;
justify-content: center;
align-items: center;
width: 75%;
height: 75%;
background-color: rgba(255, 255, 255, 0.8);
border-radius: 50%;
box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
}
.countdown-element {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-weight: bold;
font-size: 6rem;
text-shadow: 1px 1px 1px #000000;
}
.countdown-label {
font-size: 1.5rem;
text-transform: uppercase;
}
.separator {
font-size: 6rem;
}
.countdown-element + .separator {
flex-basis: 5%;
text-align: center;
}
.countdown-element:first-child + .separator {
display: none;
}
.counter.active {
animation: flash 1s infinite;
}
@keyframes flash {
from, 25%, 50%, 75%, to {
transform: scale(1);
}
10%, 30%, 70%, 90% {
transform: scale(1.1);
}
40%, 60% {
transform: scale(1.2);
}
80% {
transform: scale(0.9);
}
}
</style>
</head>
<body>
<div class="countdown-wrapper">
<div class="counter">
<div class="countdown-element days">
<span class="countdown-time">0</span>
<span class="countdown-label">Days</span>
</div>
<div class="separator">:</div>
<div class="countdown-element hours">
<span class="countdown-time">0</span>
<span class="countdown-label">Hours</span>
</div>
<div class="separator">:</div>
<div class="countdown-element minutes">
<span class="countdown-time">0</span>
<span class="countdown-label">Minutes</span>
</div>
<div class="separator">:</div>
<div class="countdown-element seconds">
<span class="countdown-time">0</span>
<span class="countdown-label">Seconds</span>
</div>
</div>
</div>
<script>
const countdownElements = document.querySelectorAll(".countdown-element");
const countdownTimes = document.querySelectorAll(".countdown-time");
const separatorElements = document.querySelectorAll(".separator");
const counter = document.querySelector(".counter");
const updateCountdown = () => {
const targetDate = new Date(document.getElementById("targetDate").value);
const now = new Date();
const difference = targetDate - now;
const days = Math.floor(difference / (1000 * 60 * 60 * 24));
const hours = Math.floor((difference % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
const minutes = Math.floor((difference % (1000 * 60 * 60)) / (1000 * 60));
const seconds = Math.floor((difference % (1000 * 60)) / 1000);
countdownTimes[0].innerHTML = days < 10 ? "0" + days : days;
countdownTimes[1].innerHTML = hours < 10 ? "0" + hours : hours;
countdownTimes[2].innerHTML = minutes < 10 ? "0" + minutes : minutes;
countdownTimes[3].innerHTML = seconds < 10 ? "0" + seconds : seconds;
};
const flashCounter = () => {
counter.classList.add("active");
setTimeout(() => {
counter.classList.remove("active")
}, 1000);
};
setInterval(() => {
updateCountdown();
flashCounter();
}, 1000);
</script>
</body>
</html>
这样，我们就得到了一个外观非常华丽的动态倒计时页面。用户可以使用页面上的输入框来输入目标日期，并自动开始倒计时。同时，还添加了闪烁的动画效果来吸引用户的注意力。
本文链接：http://task.lmcjl.com/news/10972.html