使用JavaScript构建在线倒计时应用

1. 简介

在线倒计时应用是常见的一种基于时间管理的工具。它可以为用户提供定时提醒、倒计时和倒计时统计等功能。在本文中，我们将使用JavaScript构建一个在线倒计时应用。

2. 功能列表

在我们开始构建应用之前，让我们列出我们的功能清单：

设置倒计时时间

开始/停止倒计时

暂停/恢复倒计时

重置倒计时

声音提醒

显示倒计时进度条

3. 页面布局

我们将采用HTML、CSS和JavaScript技术来实现在线倒计时应用。首先，我们要设计应用的页面布局。

我们需要一个表单，让用户设置倒计时时间，并且在倒计时开始后，可以暂停或停止倒计时。此外，我们还需要一个进度条来显示倒计时的进度，以及一个声音播放器。

3.1 页面结构

下面是我们应用的基本HTML结构：

<!-- 页面结构 -->
<div id="timer-container">
  <form id="timer-form">
    <label for="minutes">Min:</label>
    <input type="number" id="minutes" value="0" min="0" max="59">
    <label for="seconds">Sec:</label>
    <input type="number" id="seconds" value="0" min="0" max="59">
    <input type="button" id="start-timer" value="Start">
    <input type="button" id="pause-timer" value="Pause">
    <input type="button" id="stop-timer" value="Stop">
  </form>
  <div id="timer-progress"></div>
  <audio id="alarm-sound" src="alarm.mp3"></audio>
</div>

3.2 样式布局

接下来，我们需要应用CSS样式来布局和美化我们的页面。下面是基本的样式：

/* 页面样式 */
body {
  background-color: #f2f2f2;
  font-family: "Open Sans", sans-serif;
  font-size: 16px;
  color: #333;
  margin: 0;
  padding: 0;
}
#timer-container {
  background-color: #fff;
  border-radius: 5px;
  box-shadow: 0 0 10px rgba(0,0,0,0.1);
  margin: 50px auto;
  max-width: 500px;
  padding: 20px;
}
#timer-form {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  margin-bottom: 10px;
}
#timer-form label, #start-timer, #pause-timer, #stop-timer {
  margin-right: 10px
}
#timer-form input[type="number"], #start-timer, #pause-timer, #stop-timer {
  font-size: 1.4rem;
  text-align: center;
}
#start-timer, #pause-timer, #stop-timer {
  background-color: #0a5;
  border: 0;
  border-radius: 4px;
  color: #fff;
  cursor: pointer;
  padding: 8px 12px;
  transition: background-color 0.2s ease-in-out;
}
#start-timer:hover, #pause-timer:hover, #stop-timer:hover {
  background-color: #247059;
}
#start-timer:active, #pause-timer:active, #stop-timer:active {
  background-color: #06302e;
}
#timer-progress {
  background-color: #ddd;
  border-radius: 4px;
  height: 10px;
  margin-bottom: 20px;
  overflow: hidden;
  position: relative;
  width: 100%;
}
#timer-progress-bar {
  background-color: #0a5;
  height: 100%;
  position: absolute;
}
#alarm-sound {
  display: none;
}

4. JavaScript代码实现

现在，我们已经准备好开始编写JavaScript代码来处理倒计时程序。我们将把应用的控制逻辑和时间管理逻辑分开处理，以便于测试和调试。

4.1 时间管理

我们将创建一个Time类，这个类将实现倒计时的核心逻辑。Time类的构造函数将接受两个参数，分别是分钟和秒钟，并将它们转换成毫秒。这个类还将实现倒计时的开始、暂停、恢复和停止功能。

/**
 * Time类：倒计时核心功能
 */
class Time {
  constructor(minutes, seconds) {
    this.minutes = minutes;
    this.seconds = seconds;
    this.totalTime = minutes * 60 * 1000 + seconds * 1000;
    this.startTime = 0;
    this.pauseTime = 0;
    this.isPaused = false;
    this.isStopped = false;
  }
  
  start(callback) {
    if (this.isPaused) {
      this.startTime += Date.now() - this.pauseTime;
      this.isPaused = false;
    } else {
      this.startTime = Date.now();
      this.isStopped = false;
    }
    this.interval = setInterval(() => {
      const timePassed = Date.now() - this.startTime;
      const timeLeft = this.totalTime - timePassed;
      
      if (timeLeft <= 0) {
        clearInterval(this.interval);
        callback();
      } else {
        const minutesLeft = Math.floor(timeLeft / 60000);
        const secondsLeft = Math.floor(timeLeft % 60000 / 1000);
        const progress = (this.totalTime - timeLeft) / this.totalTime * 100;
        this.seconds = secondsLeft;
        this.minutes = minutesLeft;
        callback(this.minutes, this.seconds, progress);
      }
    }, 500);
  }
  
  pause() {
    this.pauseTime = Date.now();
    this.isPaused = true;
    clearInterval(this.interval);
  }
  
  stop() {
    this.isStopped = true;
    clearInterval(this.interval);
  }
  
  reset() {
    this.minutes = 0;
    this.seconds = 0;
    this.totalTime = 0;
    this.isPaused = false;
    this.isStopped = false;
    clearInterval(this.interval);
  }
}

上面的代码创建了一个Time类，包含了倒计时的核心逻辑，我们将在应用的“开始”按钮上调用该类的“start”方法以启动倒计时。

4.2 应用程序逻辑

我们将使用下面的代码来实现应用程序的控制逻辑：

// 定义对象
const form = document.getElementById("timer-form");
const minutesInput = document.getElementById("minutes");
const secondsInput = document.getElementById("seconds");
const startButton = document.getElementById("start-timer");
const pauseButton = document.getElementById("pause-timer");
const stopButton = document.getElementById("stop-timer");
const progress = document.getElementById("timer-progress-bar");
const audio = document.getElementById("alarm-sound");
let time;
// 定义事件监听器
form.addEventListener("submit", (event) => {
  event.preventDefault();
  const minutes = parseInt(minutesInput.value);
  const seconds = parseInt(secondsInput.value);
  time = new Time(minutes, seconds);
});
startButton.addEventListener("click", () => {
  time.start((minutes, seconds, progress) => {
    minutesInput.value = minutes;
    secondsInput.value = seconds;
    progressBar.style.width = progress + "%";
    if (progress === 100) {
      audio.play();
    }
  });
});
pauseButton.addEventListener("click", () => {
  time.pause();
});
stopButton.addEventListener("click", () => {
  time.stop();
});
// 重置按钮
const resetButton = document.createElement("button");
resetButton.textContent = "Reset";
resetButton.style.marginLeft = "10px";
form.appendChild(resetButton);
resetButton.addEventListener("click", () => {
  time.reset();
  minutesInput.value = "0";
  secondsInput.value = "0";
  progressBar.style.width = "0%";
});

上面的代码将创建一个Time的对象，并在“开始”按钮上调用它的“start”方法。它还将监听“暂停”和“停止”按钮的点击事件，并在“暂停”按钮上调用Time对象的“pause”方法，“停止”按钮上调用Time对象的“stop”方法。还有一个“重置”按钮，当用户在倒计时开始之前或者在倒计时停止之后点击该按钮时，将调用Time对象的“reset”方法。

5. 总结

在本文中，我们已经使用JavaScript构建了一个简单的在线倒计时应用。通过使用对象和模块化的设计，我们可以更好地保持代码的结构和可读性，以及更容易测试和调试。

尽管我们只是实现了几个基本功能，但是我们已经学习了许多关于应用程序开发的核心概念，包括JavaScript中的类和面向对象编程，以及HTML、CSS和JavaScript之间的交互。

我希望这篇文章对您有所启发，以便您能够创建出更复杂的应用程序。