进阶指南：CSS计时器 —— 简洁高效，玩转时间

前端

2023-11-28 09:41:30

掌握计时艺术：仅用CSS打造功能齐全的计时器

拥抱CSS的力量：抛开JavaScript

我们习惯了依赖JavaScript来处理交互功能，却忽视了CSS的无限可能。CSS动画不仅能改个颜色，还能玩转时间！告别繁重的脚本加载，让我们用CSS来打造一个功能齐全的计时器。

时钟的数字：灵活变化的动画

数字时钟是计时器的核心。利用CSS动画，我们可以让数字随着时间的推移变换形态。关键在于理解animation和@keyframes属性，以及如何使用它们创建流畅的动画。

开始、暂停、重置：交互式操控

计时器的精髓在于控制。通过CSS的:hover和:active伪类，我们可以创建开始、暂停和重置按钮，让用户掌控计时器的运作。

样式上的巧思：数字时钟的定制

美观的数字时钟能提升计时体验。发挥你的想象力，利用CSS的字体、颜色和背景属性，定制时钟的外观，让它独一无二。

响应式设计：全设备适配

移动设备的普及要求计时器能在各种屏幕上流畅运行。采用响应式设计，让计时器自动适应不同的屏幕尺寸，带给用户无缝的使用体验。

实例化CSS计时器

让我们将理论付诸实践，用CSS创建一个简单的计时器：

HTML结构：

<div id="timer">
  <div id="minutes"></div>
  <div id="seconds"></div>
  <div id="controls">
    <button id="start-button">Start</button>
    <button id="pause-button">Pause</button>
    <button id="reset-button">Reset</button>
  </div>
</div>

CSS样式：

#timer {
  display: flex;
  justify-content: center;
  align-items: center;
}

#minutes, #seconds {
  font-size: 3em;
  font-weight: bold;
  margin: 0 10px;
  animation: time-animation infinite linear;
}

#minutes {
  animation-duration: 60s;
}

#seconds {
  animation-duration: 60s;
  animation-delay: 60s;
}

@keyframes time-animation {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-100%);
  }
}

#controls {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 20px;
}

#controls button {
  padding: 10px 20px;
  margin: 0 10px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

#controls button:hover {
  background-color: #ccc;
}

#controls button:active {
  background-color: #999;
}

JavaScript脚本（仅用于控制）：

const minutes = document.getElementById('minutes');
const seconds = document.getElementById('seconds');
const startButton = document.getElementById('start-button');
const pauseButton = document.getElementById('pause-button');
const resetButton = document.getElementById('reset-button');

let interval;

startButton.addEventListener('click', () => {
  interval = setInterval(() => {
    let minutesValue = parseInt(minutes.textContent);
    let secondsValue = parseInt(seconds.textContent);

    secondsValue++;

    if (secondsValue === 60) {
      minutesValue++;
      secondsValue = 0;
    }

    minutes.textContent = minutesValue.toString().padStart(2, '0');
    seconds.textContent = secondsValue.toString().padStart(2, '0');
  }, 1000);
});

pauseButton.addEventListener('click', () => {
  clearInterval(interval);
});

resetButton.addEventListener('click', () => {
  clearInterval(interval);
  minutes.textContent = '00';
  seconds.textContent = '00';
});