jquery 实现点击按钮后变灰,不可再点并进入倒计时,倒计时完成后可再次点击

封面图 • 2025-11-21 • JavaScript

你可以使用 jQuery 来实现点击按钮后变灰、不可点击，并进入倒计时，倒计时结束后恢复可点击状态。下面是一个完整的示例代码：

---

### ✅ HTML 部分：
```html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>倒计时按钮</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>

$button.on('click', function() {
      if ($button.prop('disabled')) return; // 如果已禁用，直接返回

$button.prop('disabled', true);
      $button.text('正在倒计时... (' + countdown + ')');
      $button.css('background-color', '#ccc'); // 变灰

var interval = setInterval(function() {
        countdown--;
        $button.text('正在倒计时... (' + countdown + ')');

if (countdown <= 0) {
          clearInterval(interval);
          $button.prop('disabled', false);
          $button.text('点击我');
          $button.css('background-color', ''); // 恢复原色
        }
      }, 1000);
    });
  });
</script>

</body>
</html>
```

---

### 📝 功能说明：

- 点击按钮后，按钮变为灰色并被禁用。
- 显示倒计时（例如 10 秒）。
- 倒计时结束后，按钮恢复可用状态，文字也恢复为“点击我”。

---

### 🔄 可选优化：

如果你想让按钮在倒计时期间显示更友好的提示，可以修改文本内容或添加动画效果。

---

如果你希望按钮在倒计时结束后自动恢复为原始样式，也可以通过 CSS 类来控制，比如：

```css
#myButton.disabled {
  background-color: #ccc;
  cursor: not-allowed;
}
```

然后在 JS 中切换类：

```javascript
$button.addClass('disabled');
```

---

如需进一步扩展功能（比如防止重复点击、多按钮支持等），欢迎继续提问！