使用 jQuery 实现倒计时结束后按钮替换

霞舞 2025-10-15 00:00:00 次阅读

本文介绍了如何使用 jQuery 实现一个简单的倒计时功能，并在倒计时结束后，将页面上的一个按钮（Button A）替换为另一个按钮（Button B）。文章将提供完整的代码示例，并解释关键步骤，帮助开发者快速实现类似的功能。

功能实现步骤

HTML 结构:

首先，我们需要在 HTML 中创建两个按钮和一个用于显示倒计时的 div 元素。btn-submit-a 是初始显示的按钮（Button A），btn-submit-b 是倒计时结束后要显示的按钮（Button B）。默认情况下，Button B 处于隐藏状态。
CSS 样式:

使用 CSS 隐藏 Button B，使其初始状态不可见。
```
.btn-submit-b {
  display: none;
}
```
jQuery 代码:
- 初始化: 使用 jQuery(function($){ ... }); 确保在 DOM 加载完成后执行代码。
- 事件监听: 监听 btn-submit-a 按钮的点击事件，当点击 Button A 时，触发 doCount 函数。
- doCount 函数:
  - 设置倒计时时间 timeleft。
  - 使用 setInterval 函数创建定时器 downloadTimer，每秒执行一次。
  - 在定时器中，更新 countdown div 的内容，显示剩余时间。
  - 当 timeleft 减到 0 或更小时：
    - 使用 clearInterval 函数清除定时器。
    - 更新 countdown div 的内容，显示 "Time is Up"。
    - 使用 jQuery 的 hide() 函数隐藏 Button A (.btn-submit-a)。
    - 使用 jQuery 的 show() 函数显示 Button B (.btn-submit-b)。
  - 每次定时器执行时，将 timeleft 减 1。
```
jQuery(function($) {
  $('.btn-submit-a').on('click', doCount);
});

function doCount() {
  var timeleft = 5;
  var downloadTimer = setInterval(function() {
    if (timeleft <= 0) {
      clearInterval(downloadTimer);
      $("#countdown").html("Time is Up");
      $('.btn-submit-a').hide();
      $('.btn-submit-b').show();
    } else {
      $("#countdown").html(timeleft + "seconds remain");
    }
    timeleft -= 1;
  }, 1000);
};
```

完整代码示例




  Button Replacement on Countdown

注意事项

jQuery 引入: 确保正确引入 jQuery 库。
选择器: 确保 jQuery 选择器 (.btn-submit-a, .btn-submit-b, #countdown) 与 HTML 结构中的类名和 ID 匹配。
代码风格: 建议统一使用 jQuery 或原生 JavaScript，避免混用。在本例中，为了更简洁，全部使用 jQuery 方法。
替代方案: 如果需要切换元素的显示状态，可以使用 jQuery 的 toggle() 函数，它可以在 hide() 和 show() 之间切换。