各位开发者大家好！今天，我很高兴分享我最近完成的一个项目：倒计时器。这个项目是学习和练习 JavaScript 的好方法，特别是在时间操作和 DOM 更新领域。无论您是想为活动、产品发布建立倒计时，还是只是一个有趣的计时器，这个项目都是一个完美的开始。
倒计时器允许用户设置目标日期和时间，它会不断倒计时天、小时、分钟和秒，直到那一刻到来。计时器实时更新，提供视觉吸引力和响应式设计。该项目非常适合想要提高创建动态和交互式 Web 应用程序技能的开发人员。
以下是项目结构的快速浏览：
Countdown-Timer/ ├── index.html ├── style.css └── script.js
要开始该项目，请按照以下步骤操作：
克隆存储库：
git clone https://github.com/abhishekgurjar-in/Countdown-Timer.git
打开项目目录:
cd Countdown-Timer
运行项目:
index.html 文件包含网页的结构，包括倒计时显示和简单的标题。以下是 HTML 代码片段：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Countdown Timer</title>
<link rel="stylesheet" href="./style.css" />
</head>
<body>
<div class="main">
<div class="overlay">
<div class="header">
<h1>Countdown Timer</h1>
</div>
<div class="title">We are coming soon</div>
<div class="title" id="end-date">4 July 2025 10:00 PM</div>
<div class="col">
<div>
<input type="text" readonly value="0" />
<br />
<label>Days</label>
</div>
<div>
<input type="text" readonly value="0" />
<br />
<label>Hours</label>
</div>
<div>
<input type="text" readonly value="0" />
<br />
<label>Minutes</label>
</div>
<div>
<input type="text" readonly value="0" />
<br />
<label>Seconds</label>
</div>
</div>
<div class="footer">
<p>Made with ❤️ by Abhishek Gurjar</p>
</div>
</div>
</div>
<script src="./script.js"></script>
</body>
</html>
style.css 文件包含确保网页具有视觉吸引力的样式，并包括针对不同屏幕尺寸的响应能力。以下是一些关键样式：
* {
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: "Poppins", sans-serif;
}
.main {
width: 100%;
height: 100vh;
background: url(./images/bg.jpg);
background-size: cover;
}
.overlay {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
color: white;
background-color: rgba(0, 0, 0, 0.7);
}
.title {
color: white;
text-align: center;
font-size: 2.5rem;
padding: 25px;
}
.col {
margin-top: 10px;
width: 1000px;
color: white;
justify-content: center;
display: flex;
}
.col div {
width: 250px;
text-align: center;
}
input {
background-color: rgba(255, 255, 255, 0.9);
border-color: transparent;
border-radius: 5px;
height: 50px;
text-align: center;
font-size: 20px;
}
.header {
margin: 40px;
text-align: center;
}
.footer {
margin: 300px;
text-align: center;
}
script.js 文件管理倒计时逻辑，每秒更新一次显示。以下是 JavaScript 代码片段：
const endDate = "4 July 2025 10:00 PM";
document.getElementById("end-date").innerText = endDate;
const input = document.querySelectorAll("input");
function countDown() {
const end = new Date(endDate);
const now = new Date();
const diff = (end - now) / 1000;
if (diff < 0) return;
input[0].value = Math.floor(diff / 3600 / 24);
input[1].value = Math.floor(diff / 3600) % 24;
input[2].value = Math.floor(diff / 60) % 60;
input[3].value = Math.floor(diff) % 60;
}
countDown();
setInterval(countDown, 1000);
您可以在此处查看倒计时器的现场演示。
构建这个倒计时器是一次宝贵的学习经历，它让我能够探索 JavaScript 在时间操作和 DOM 交互方面的功能。我希望这个项目能够激励您创建自己的动态和交互式应用程序。请随意探索代码、对其进行自定义并在您自己的项目中使用它。快乐编码！
这个项目的灵感来自于对各种活动的简单有效的倒计时工具的需求。
以上是建立一个倒计时器网站的详细内容。更多信息请关注PHP中文网其他相关文章！
