使用 jQuery 实现倒计时结束后按钮替换-js教程-PHP中文网

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

霞舞

发布： 2025-10-15 10:49:07

原创

303人浏览过

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

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

功能实现步骤

HTML 结构:

首先，我们需要在 HTML 中创建两个按钮和一个用于显示倒计时的 div 元素。btn-submit-a 是初始显示的按钮（Button A），btn-submit-b 是倒计时结束后要显示的按钮（Button B）。默认情况下，Button B 处于隐藏状态。
```
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button type="submit" class="btn-submit-a">Button A</button>
<button type="submit" class="btn-submit-b">Button B</button>

<div id="countdown"></div>
```
登录后复制
CSS 样式:

ViiTor实时翻译
AI实时多语言翻译专家！强大的语音识别、AR翻译功能。

116

查看详情

使用 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 + "<span class='remain'>seconds remain</span>");
    }
    timeleft -= 1;
  }, 1000);
};
```
登录后复制

完整代码示例

<!DOCTYPE html>
<html>
<head>
  <title>Button Replacement on Countdown</title>
  <style>
    .btn-submit-b {
      display: none;
    }
  </style>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>

  <button type="submit" class="btn-submit-a">Button A</button>
  <button type="submit" class="btn-submit-b">Button B</button>

  <div id="countdown"></div>

  <script>
    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 + "<span class='remain'>seconds remain</span>");
        }
        timeleft -= 1;
      }, 1000);
    };
  </script>

</body>
</html>

登录后复制

注意事项

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