倒计时结束后如何禁用HTML表单按钮？

要实现倒计时结束时禁用按钮，只需给按钮添加可识别标识，在倒计时过期逻辑里修改按钮状态即可，同时还要处理页面加载时已过期的情况，避免刷新后按钮仍可点击。

修改后的完整代码： #

<!-- 倒计时显示区域 -->
<div class="value text-danger" id="demo"></div>

<!-- 表单部分：给按钮添加id -->
<form>
  <input type="text" placeholder="your full name">
  <button id="joinBtn">Join</button>
</form>

<script>
// 设置倒计时目标时间
var countDownDate = new Date("Nov 22, 2022 11:34:38").getTime();
// 获取按钮元素
var joinBtn = document.getElementById('joinBtn');

// 初始化检查：页面加载时如果已过期，直接禁用按钮并更新显示
var nowInit = new Date().getTime();
if (countDownDate - nowInit < 0) {
  document.getElementById("demo").innerHTML = "EXPIRED";
  joinBtn.disabled = true;
} else {
  // 每秒更新倒计时
  var x = setInterval(function() {
    var now = new Date().getTime();
    var distance = countDownDate - now;

    var days = Math.floor(distance / (1000 * 60 * 60 * 24));
    var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
    var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
    var seconds = Math.floor((distance % (1000 * 60)) / 1000);

    document.getElementById("demo").innerHTML = days + " days remaining";

    // 倒计时结束时的逻辑
    if (distance < 0) {
      clearInterval(x);
      document.getElementById("demo").innerHTML = "EXPIRED";
      // 禁用按钮
      joinBtn.disabled = true;
    }
  }, 1000);
}
</script>

关键修改点说明： #

1. 给按钮添加id：给<button>加上id="joinBtn"，让JavaScript能精准定位到该按钮元素。
2. 获取按钮元素：用document.getElementById('joinBtn')将按钮存为变量，方便后续操作。
3. 初始化检查：页面加载时先判断是否已过期，如果是，直接显示"EXPIRED"并禁用按钮，避免用户刷新页面后按钮仍可点击。
4. 过期时禁用按钮：在distance < 0的判断逻辑里，添加joinBtn.disabled = true;，使按钮变为不可点击状态。

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