使用原生技术构建倒计时时钟：一步步解析过程与实施步骤

2024-02-21 02:03:27

简介

倒计时时钟是一种常见的元素，用于显示一个特定时间点的剩余时间。它广泛应用于各种场景，例如网站上的促销活动、大型活动的倒计时、游戏中的关卡计时等等。

我们将在本文中使用原生技术来构建一个倒计时时钟。这意味着我们将使用JavaScript、HTML和CSS，而不会使用任何现成的库或框架。这样做的好处是，你可以完全控制时钟的各个方面，并根据自己的需求进行定制。

HTML结构

<!DOCTYPE html>
<html>
<head>
  
</head>
<body>
  <div id="countdown-container">
    <div id="countdown-display">
      <span id="days"></span>天
      <span id="hours"></span>时
      <span id="minutes"></span>分
      <span id="seconds"></span>秒
    </div>
    <div id="countdown-controls">
      <button id="start-button">开始</button>
      <button id="pause-button">暂停</button>
      <button id="reset-button">重置</button>
    </div>
  </div>

  <script src="script.js"></script>
</body>
</html>

CSS样式

body {
  font-family: sans-serif;
  text-align: center;
}

#countdown-container {
  width: 400px;
  margin: 0 auto;
  padding: 20px;
  border: 1px solid black;
  border-radius: 5px;
}

#countdown-display {
  font-size: 36px;
  font-weight: bold;
}

#countdown-controls {
  margin-top: 20px;
}

button {
  padding: 10px 20px;
  border: 1px solid black;
  border-radius: 5px;
  background-color: #f4f4f4;
  cursor: pointer;
}

button:hover {
  background-color: #e8e8e8;
}

#start-button {
  margin-right: 10px;
}

#pause-button {
  margin-right: 10px;
}

#reset-button {
  background-color: #ff0000;
}

JavaScript脚本

// 获取元素
const daysElement = document.getElementById("days");
const hoursElement = document.getElementById("hours");
const minutesElement = document.getElementById("minutes");
const secondsElement = document.getElementById("seconds");
const startButton = document.getElementById("start-button");
const pauseButton = document.getElementById("pause-button");
const resetButton = document.getElementById("reset-button");

// 设置倒计时目标时间
const targetDate = new Date("2023-01-01T00:00:00Z");

// 设置倒计时变量
let countdownActive = false;
let timeLeft = targetDate - new Date();

// 更新倒计时显示
function updateTime() {
  if (timeLeft < 0) {
    // 时间已到
    clearInterval(updateInterval);
    daysElement.textContent = "0";
    hoursElement.textContent = "0";
    minutesElement.textContent = "0";
    secondsElement.textContent = "0";
    return;
  }

  // 计算剩余天数、小时、分钟和秒数
  const days = Math.floor(timeLeft / (1000 * 60 * 60 * 24));
  const hours = Math.floor((timeLeft % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
  const minutes = Math.floor((timeLeft % (1000 * 60 * 60)) / (1000 * 60));
  const seconds = Math.floor((timeLeft % (1000 * 60)) / 1000);

  // 更新显示
  daysElement.textContent = days;
  hoursElement.textContent = hours;
  minutesElement.textContent = minutes;
  secondsElement.textContent = seconds;

  // 更新倒计时变量
  timeLeft -= 1000;
}

// 启动倒计时
function startCountdown() {
  if (!countdownActive) {
    countdownActive = true;
    updateInterval = setInterval(updateTime, 1000);
    startButton.disabled = true;
  }
}

// 暂停倒计时
function pauseCountdown() {
  if (countdownActive) {
    countdownActive = false;
    clearInterval(updateInterval);
    startButton.disabled = false;
  }
}

// 重置倒计时
function resetCountdown() {
  countdownActive = false;
  clearInterval(updateInterval);
  startButton.disabled = false;
  timeLeft = targetDate - new Date();
  updateTime();
}

// 绑定事件监听器
startButton.addEventListener("click", startCountdown);
pauseButton.addEventListener("click", pauseCountdown);
resetButton.addEventListener("click", resetCountdown);

// 启动倒计时
startCountdown();