65分钟倒计时器

本篇介绍一个用JavaScript实现的65分钟倒计时器。

功能介绍

该倒计时器可以在页面上展示一个计时器，从65分钟倒计时至0分钟，并在到达0分钟时结束计时。用户可以随时点击“开始”、“暂停”、“重置”按钮来控制计时器的运行状态。

技术实现

HTML 结构

倒计时器的HTML结构包含三个主要元素：

• 一个 <div>，用于展示当前的分钟数和秒数
• 三个 <button>，分别用于开始、暂停和重置计时器

<div class="timer">
  <span class="minutes">65</span> 分钟
  <span class="seconds">00</span> 秒
</div>

<div class="buttons">
  <button class="start">开始</button>
  <button class="pause">暂停</button>
  <button class="reset">重置</button>
</div>

CSS 样式

对倒计时器进行样式设置时，主要使用到的是 flex 布局和一些基础的样式属性，如 font-size、color、border 等。

.timer {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 3rem;
  color: white;
  background-color: black;
  padding: 2rem;
  border-radius: 0.5rem;
}

.buttons {
  display: flex;
  justify-content: center;
  margin-top: 2rem;
}

button {
  font-size: 1.5rem;
  margin: 0 1rem;
  border: none;
  border-radius: 0.5rem;
  padding: 1rem 2rem;
  cursor: pointer;
}

button.start {
  background-color: green;
  color: white;
}

button.pause {
  background-color: orange;
  color: white;
}

button.reset {
  background-color: red;
  color: white;
}

JavaScript 代码

在 JavaScript 中，我们需要实现以下功能：

• 定义并初始化计时器的分钟数和秒数
• 定义并初始化计时器的状态标志
• 定义并初始化计时器的定时器对象
• 处理计时器的开始、暂停、重置操作

由于代码较长，这里只展示核心代码部分，完整代码可以查看最后的代码片段。

// 定义并初始化计时器的分钟数和秒数
const defaultMinutes = 65;
const defaultSeconds = 0;
let minutesRemaining = defaultMinutes;
let secondsRemaining = defaultSeconds;

// 定义并初始化计时器的状态标志
let isRunning = false;

// 定义并初始化计时器的定时器对象
let timer;

// 处理计时器的开始操作
function startTimer() {
  if (!isRunning) {
    isRunning = true;
    timer = setInterval(updateTimer, 1000);
  }
}

// 处理计时器的暂停操作
function pauseTimer() {
  if (isRunning) {
    isRunning = false;
    clearInterval(timer);
  }
}

// 处理计时器的重置操作
function resetTimer() {
  pauseTimer();
  minutesRemaining = defaultMinutes;
  secondsRemaining = defaultSeconds;
  updateTimerDisplay();
}

主要思路是使用 setInterval() 函数开启一个定时器，并在每秒钟更新一次倒计时的分钟数和秒数，同时更新页面上的倒计时器展示。

完整代码片段

<div class="timer">
  <span class="minutes">65</span> 分钟
  <span class="seconds">00</span> 秒
</div>

<div class="buttons">
  <button class="start">开始</button>
  <button class="pause">暂停</button>
  <button class="reset">重置</button>
</div>

<script>
  // 定义并初始化计时器的分钟数和秒数
  const defaultMinutes = 65;
  const defaultSeconds = 0;
  let minutesRemaining = defaultMinutes;
  let secondsRemaining = defaultSeconds;

  // 定义并初始化计时器的状态标志
  let isRunning = false;

  // 定义并初始化计时器的定时器对象
  let timer;

  // 处理计时器的开始操作
  function startTimer() {
    if (!isRunning) {
      isRunning = true;
      timer = setInterval(updateTimer, 1000);
    }
  }

  // 处理计时器的暂停操作
  function pauseTimer() {
    if (isRunning) {
      isRunning = false;
      clearInterval(timer);
    }
  }

  // 处理计时器的重置操作
  function resetTimer() {
    pauseTimer();
    minutesRemaining = defaultMinutes;
    secondsRemaining = defaultSeconds;
    updateTimerDisplay();
  }

  // 更新计时器的分钟数和秒数展示
  function updateTimerDisplay() {
    const minutesDisplay = document.querySelector('.minutes');
    const secondsDisplay = document.querySelector('.seconds');
    minutesDisplay.innerHTML = padNumber(minutesRemaining);
    secondsDisplay.innerHTML = padNumber(secondsRemaining);
  }

  // 更新计时器的分钟数和秒数
  function updateTimer() {
    if (minutesRemaining === 0 && secondsRemaining === 0) {
      pauseTimer();
      return;
    }

    if (secondsRemaining === 0) {
      minutesRemaining--;
      secondsRemaining = 59;
    } else {
      secondsRemaining--;
    }

    updateTimerDisplay();
  }

  // 辅助函数，补全数字不足两位的前导零
  function padNumber(number) {
    return number.toString().padStart(2, '0');
  }

  // 绑定按钮的操作事件
  const startButton = document.querySelector('.start');
  const pauseButton = document.querySelector('.pause');
  const resetButton = document.querySelector('.reset');

  startButton.addEventListener('click', startTimer);
  pauseButton.addEventListener('click', pauseTimer);
  resetButton.addEventListener('click', resetTimer);
</script>

<style>
  .timer {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 3rem;
    color: white;
    background-color: black;
    padding: 2rem;
    border-radius: 0.5rem;
  }

  .buttons {
    display: flex;
    justify-content: center;
    margin-top: 2rem;
  }

  button {
    font-size: 1.5rem;
    margin: 0 1rem;
    border: none;
    border-radius: 0.5rem;
    padding: 1rem 2rem;
    cursor: pointer;
  }

  button.start {
    background-color: green;
    color: white;
  }

  button.pause {
    background-color: orange;
    color: white;
  }

  button.reset {
    background-color: red;
    color: white;
  }
</style>