js实现点击按钮后变灰不可再点并进入倒计时

封面图 • 2025-09-25 • JavaScript

你可以使用 JavaScript 实现点击按钮后按钮变灰、不可再次点击，并进入倒计时的功能。下面是一个简单的示例代码：

### ✅ 示例代码（HTML + JavaScript）

```html
<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <title>按钮倒计时</title>
  <style>
    #myButton {
      padding: 10px 20px;
      font-size: 16px;
      cursor: pointer;
    }
    #myButton:disabled {
      background-color: #ccc;
      cursor: not-allowed;
    }
  </style>
</head>
<body>

button.addEventListener('click', function () {
      // 禁用按钮
      button.disabled = true;
      button.textContent = '正在倒计时...';

let timeLeft = 10; // 倒计时时间（秒）
      const interval = setInterval(() => {
        timeLeft--;
        button.textContent = `倒计时 ${timeLeft} 秒`;

if (timeLeft <= 0) {
          clearInterval(interval);
          button.disabled = false;
          button.textContent = '点击我';
        }
      }, 1000);
    });
  </script>

</body>
</html>
```

---

### 🔍 功能说明：

- **点击按钮后**：按钮变为灰色，不可再点。
- **显示倒计时**：按钮文字变为“倒计时 X 秒”。
- **倒计时结束后**：按钮恢复可用状态，文字变回“点击我”。

---

### 📌 可扩展性建议：

- 如果你需要更复杂的倒计时逻辑（如支持分钟、显示进度条等），可以进一步扩展。
- 也可以添加提示信息或动画效果提升用户体验。

需要我帮你实现更复杂的功能吗？比如带进度条的倒计时？