JavaScript - 角度倒计时开始停止暂停

在这篇文章中，我们将介绍如何使用 JavaScript 创建一个带有开始、停止、暂停和角度倒计时的计时器。

技能要求

• HTML
• CSS
• JavaScript

目标

我们的目标是创建一个计时器，其中包括以下功能：

1. 开始按钮将启动计时器并开始倒计时
2. 停止按钮将停止计时器并将计时器复位
3. 暂停按钮将暂停计时器，再按一次继续计时器
4. 角度倒计时将随着时间的推移而减少

实现

HTML

我们首先需要创建 HTML 结构，其中包括计时器和按钮。

<div class="timer">
  <div class="time-left"></div>
  <div class="controls">
    <button class="start-btn">开始</button>
    <button class="stop-btn">停止</button>
    <button class="pause-btn">暂停</button>
  </div>
  <div class="circle">
    <svg>
      <circle cx="50" cy="50" r="50"></circle>
    </svg>
    <div class="timer-rotate"></div>
  </div>
</div>

CSS

接下来，我们需要为计时器和按钮添加样式。

.timer {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.time-left {
  font-size: 4rem;
  font-weight: bold;
}

.controls {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 2rem;
}

button {
  margin: 0 1rem;
  padding: 1rem;
  font-size: 1.5rem;
  background-color: #fff;
  border: none;
  border-radius: 100%;
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
  cursor: pointer;
  outline: none;
  transition: all 0.3s ease;
}

button:hover {
  box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.2);
  transform: translateY(-0.25rem);
}

button:active {
  transform: translateY(0.1rem);
  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.3);
}

.circle {
  position: relative;
  width: 100px;
  height: 100px;
}

svg {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

circle {
  fill: transparent;
  stroke: #ccc;
  stroke-width: 5;
  stroke-dasharray: 314;
  stroke-dashoffset: 0;
  transform: rotate(-90deg);
  transform-origin: 50% 50%;
  transition: stroke-dashoffset 1s linear;
}

.timer-rotate {
  width: 100px;
  height: 100px;
  position: absolute;
  top: 0;
  left: 0;
  transform-origin: 50% 50%;
  transform: rotate(-90deg);
}

JavaScript

最后，我们需要使用 JavaScript 为计时器添加功能。

const timeLeft = document.querySelector(".time-left");
const startButton = document.querySelector(".start-btn");
const stopButton = document.querySelector(".stop-btn");
const pauseButton = document.querySelector(".pause-btn");
const circle = document.querySelector("circle");
const radius = circle.r.baseVal.value;
const circumference = radius * 2 * Math.PI;

circle.style.strokeDasharray = `${circumference} ${circumference}`;
circle.style.strokeDashoffset = circumference;

let secondsLeft;
let countdown;

function timer(seconds) {
  clearInterval(countdown);

  const now = Date.now();
  const then = now + seconds * 1000;
  displayTimeLeft(seconds);

  countdown = setInterval(() => {
    secondsLeft = Math.round((then - Date.now()) / 1000);

    if (secondsLeft < 0) {
      clearInterval(countdown);
      return;
    }

    displayTimeLeft(secondsLeft);
    setCircleDashOffset(secondsLeft / seconds);
  }, 1000);
}

function displayTimeLeft(seconds) {
  const minutes = Math.floor(seconds / 60);
  const remainderSeconds = seconds % 60;
  const display = `${minutes}:${remainderSeconds < 10 ? "0" : ""}${remainderSeconds}`;
  timeLeft.textContent = display;
}

function setCircleDashOffset(percent) {
  const offset = circumference - percent * circumference;
  circle.style.strokeDashoffset = offset;
}

function startTimer() {
  const seconds = this.dataset.time;
  timer(seconds);
}

function stopTimer() {
  clearInterval(countdown);
  timeLeft.textContent = "0:00";
  circle.style.strokeDashoffset = circumference;
}

let isPaused = false;
let pauseTimeLeft;
let pauseCountdown;

function pauseTimer() {
  if (!isPaused) {
    clearInterval(countdown);
    pauseTimeLeft = secondsLeft;

    pauseCountdown = setInterval(() => {
      if (pauseTimeLeft < 0) {
        clearInterval(pauseCountdown);
        return;
      }

      displayTimeLeft(pauseTimeLeft);
      pauseTimeLeft--;
    }, 1000);

    isPaused = true;
    this.textContent = "继续";
  } else {
    timer(pauseTimeLeft);
    clearInterval(pauseCountdown);
    isPaused = false;
    this.textContent = "暂停";
  }
}

startButton.addEventListener("click", startTimer);
stopButton.addEventListener("click", stopTimer);
pauseButton.addEventListener("click", pauseTimer);

结论

在这篇文章中，我们介绍了如何使用 JavaScript 创建一个带有开始、停止、暂停和角度倒计时的计时器。虽然这只是一个简单的示例，但您可以将其扩展为更复杂的计时器，并使用它来增强您的 Web 应用。