倒计时网站按钮改造需求：未结束跳提示页，结束跳奖品页

方案一：倒计时结束前锁定按钮 #

步骤1：调整按钮HTML结构 #

给按钮添加默认disabled属性，让它初始处于不可点击状态：

<button id="giftBtn" disabled>打开礼品</button>

步骤2：添加锁定状态样式 #

给禁用状态的按钮加视觉反馈，明确告知用户当前不可操作：

#giftBtn {
  padding: 10px 20px;
  font-size: 18px;
  background-color: #ff4081;
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}
#giftBtn:disabled {
  background-color: #ccc;
  cursor: not-allowed;
  opacity: 0.6;
}

步骤3：修改倒计时逻辑 #

在更新倒计时的函数里，判断剩余时间是否归零，归零后移除按钮的禁用属性：

function updateCountdown() {
  // 原有计算天/时/分/秒的代码...
  
  // 新增判断：倒计时结束时启用按钮
  if (totalSeconds <= 0) {
    document.getElementById('giftBtn').removeAttribute('disabled');
  }
}

方案二：未结束点击跳转提示页，结束后跳转奖品页 #

步骤1：添加页面结构 #

用隐藏div模拟三个页面（也可换成真实页面跳转）：

<!-- 倒计时首页 -->
<div id="countdownPage">
  <!-- 原有倒计时模块 -->
  <button id="giftBtn">打开礼品</button>
</div>

<!-- 提示页 -->
<div id="tipPage" style="display: none;">
  <h2>哦不行哦</h2>
  <p>再等等，时间还没到呢😉</p>
</div>

<!-- 奖品页 -->
<div id="prizePage" style="display: none;">
  <h2>惊喜来啦！</h2>
  <p>亲爱的，这是给你的专属礼物🥰</p>
  <!-- 这里放奖品内容 -->
</div>

步骤2：绑定按钮点击事件 #

根据倒计时状态切换对应页面：

const giftBtn = document.getElementById('giftBtn');
const countdownPage = document.getElementById('countdownPage');
const tipPage = document.getElementById('tipPage');
const prizePage = document.getElementById('prizePage');

// 替换成你的目标倒计时日期
const targetDate = new Date('2024-12-25T00:00:00').getTime();

giftBtn.addEventListener('click', function() {
  const now = new Date().getTime();
  const distance = targetDate - now;
  
  if (distance > 0) {
    // 未到时间，显示提示页
    countdownPage.style.display = 'none';
    tipPage.style.display = 'block';
  } else {
    // 时间已到，显示奖品页
    countdownPage.style.display = 'none';
    prizePage.style.display = 'block';
  }
});

补充说明 #

如果需要真实页面跳转，把页面切换代码换成window.location.href = '提示页路径'和window.location.href = '奖品页路径'即可。

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