倒计时结束后替换按钮：如何实现Button A切换为Button B？

你需要在倒计时结束的逻辑块中添加按钮切换代码，同时可以优化按钮点击状态避免重复触发。以下是具体修改方案：

修改思路 #

• 当倒计时归零时，通过jQuery控制.btn-submit-a隐藏、.btn-submit-b显示
• 点击Button A后立即禁用按钮，防止重复点击触发多个倒计时实例

修改后的完整代码 #

HTML #

<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 #

.btn-submit-b {
  display: none;
}

JavaScript #

jQuery(function($){
  $('.btn-submit-a').on('click', doCount);
});

function doCount() {
  // 点击后禁用Button A，防止重复触发
  $('.btn-submit-a').prop('disabled', true);
  var timeleft = 5;
  var downloadTimer = setInterval(function(){
    if(timeleft <= 0){
      clearInterval(downloadTimer);
      document.getElementById("countdown").innerHTML = "Time is Up";
      // 切换按钮：隐藏A，显示B
      $('.btn-submit-a').hide();
      $('.btn-submit-b').show();
    } else {
      document.getElementById("countdown").innerHTML = timeleft + "<span class='remain'>seconds remain</span>";
    }
    timeleft -= 1;
  }, 1000);
};

关键说明 #

• 在timeleft <= 0的判断分支中，新增$('.btn-submit-a').hide()和$('.btn-submit-b').show()完成按钮替换
• 增加$('.btn-submit-a').prop('disabled', true)是为了避免用户多次点击Button A导致同时运行多个倒计时计时器，提升交互体验

内容的提问来源于stack exchange，提问作者Bob Nowak