设计30秒倒计时器

以下是一个简单的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);