30秒倒计时器设计与实现 - HTML, CSS, JavaScript

以下是使用HTML、CSS和JavaScript创建一个简单的30秒倒计时器的设计：

1. 使用HTML和CSS创建一个基本的倒计时器UI界面，包括一个显示倒计时数字的区域和开始/重置按钮。
2. 在JavaScript中创建一个计时器对象，将初始倒计时设置为30秒。
3. 当用户点击开始按钮时，启动计时器并开始倒计时。
4. 在每个计时器间隔中，将倒计时数字减1并更新UI界面。
5. 如果倒计时达到0，停止计时器并在UI界面上显示'时间到！'的消息。
6. 如果用户点击重置按钮，则将计时器重置为30秒并清除任何已显示的消息。

以下是示例代码：

HTML和CSS：

<div id='timer'>
  <h1 id='time'>30</h1>
  <button id='start'>开始</button>
  <button id='reset'>重置</button>
</div>

<style>
  #timer {
    text-align: center;
    font-size: 3em;
  }
  button {
    font-size: 1em;
    margin: 10px;
  }
</style>

JavaScript：

let timeLeft = 30;
let timer;

function startTimer() {
  timer = setInterval(() => {
    timeLeft--;
    document.getElementById('time').innerHTML = timeLeft;
    if (timeLeft === 0) {
      clearInterval(timer);
      document.getElementById('time').innerHTML = '时间到！';
    }
  }, 1000);
}

function resetTimer() {
  clearInterval(timer);
  timeLeft = 30;
  document.getElementById('time').innerHTML = timeLeft;
}

document.getElementById('start').addEventListener('click', startTimer);
document.getElementById('reset').addEventListener('click', resetTimer);