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

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

聖光之護

发布： 2025-10-16 10:06:05

原创

995人浏览过

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

本文旨在提供一个使用 jQuery 实现倒计时结束后替换按钮的实用教程。我们将通过一个简单的示例，演示如何利用 jQuery 的 hide() 和 show() 方法，在倒计时结束后隐藏一个按钮并显示另一个按钮。本文将提供完整的代码示例和详细的解释，帮助你理解和应用这一技术。

实现按钮替换的步骤

要实现倒计时结束后替换按钮的功能，我们需要以下几个步骤：

初始化: 页面加载完成后，绑定按钮 A 的点击事件，启动倒计时。
倒计时: 创建一个倒计时函数，使用 setInterval() 定时更新剩余时间。
按钮替换: 当倒计时结束时，停止计时器，隐藏按钮 A，并显示按钮 B。

代码实现

下面是实现上述功能的完整代码示例：

AppMall应用商店

AI应用商店，提供即时交付、按需付费的人工智能应用服务

查看详情

<!DOCTYPE html>
<html>
<head>
  <title>倒计时按钮替换</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <style>
    .btn-submit-b {
      display: none;
    }
  </style>
</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>

登录后复制

代码解释：

HTML 结构: 定义了两个按钮：.btn-submit-a (Button A) 和 .btn-submit-b (Button B)，以及一个用于显示倒计时的 div 元素 (#countdown)。默认情况下，Button B 处于隐藏状态。
CSS 样式: 使用 CSS 隐藏了 .btn-submit-b，确保页面加载时只显示 Button A。
jQuery 代码:
- $(function($) { ... }); 确保在 DOM 加载完成后执行代码。
- $('.btn-submit-a').on('click', doCount); 为 Button A 绑定点击事件，点击后触发 doCount 函数。
- doCount 函数：
  - 初始化 timeleft 变量为 5 (倒计时时长)。
  - 使用 setInterval 创建一个定时器，每秒执行一次。
  - 在定时器中，判断 timeleft 是否小于等于 0：
    - 如果小于等于 0，则表示倒计时结束：
      - 使用 clearInterval 停止定时器。
      - 使用 $("#countdown").html("Time is Up"); 更新倒计时显示。
      - 使用 $('.btn-submit-a').hide(); 隐藏 Button A。
      - 使用 $('.btn-submit-b').show(); 显示 Button B。
    - 否则，更新倒计时显示。
  - timeleft -= 1; 每次执行定时器时，将 timeleft 减 1。