js代码实现点击按钮出现60秒倒计时

封面图 • 2025-09-24 • JavaScript

你可以使用 JavaScript 实现一个点击按钮后开始 60 秒倒计时的功能。以下是一个完整的示例代码：

### ✅ HTML + JavaScript 示例

```html
<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>倒计时示例</title>
</head>
<body>

<button id="countdownBtn">开始倒计时</button>
    <p id="timer">60</p>

button.addEventListener('click', () => {
            let timeLeft = 60;

// 禁用按钮，防止重复点击
            button.disabled = true;

// 显示倒计时
            timerDisplay.textContent = timeLeft;

const interval = setInterval(() => {
                timeLeft--;
                timerDisplay.textContent = timeLeft;

if (timeLeft <= 0) {
                    clearInterval(interval);
                    button.disabled = false;
                    timerDisplay.textContent = "时间到！";
                }
            }, 1000);
        });
    </script>

</body>
</html>
```

---

### 📌 功能说明：

- 点击按钮后，倒计时从 60 秒开始。
- 每秒更新一次显示。
- 倒计时结束后，显示“时间到！”并重新启用按钮。

---

如果你希望倒计时在页面加载时就开始，或者有其他功能（比如重置、暂停等），也可以告诉我，我可以帮你扩展这个功能。