本文详解如何让按钮点击后跳转至不同链接，规则基于当前星期几和具体小时数，并修复原代码中因变量作用域、时间未实时更新导致的逻辑失效问题。
本文详解如何让按钮点击后跳转至不同链接，规则基于当前星期几和具体小时数，并修复原代码中因变量作用域、时间未实时更新导致的逻辑失效问题。
在构建“按时间段跳转不同网址”的交互功能时，核心挑战在于：时间状态必须实时、准确、可复用。原代码存在两个关键缺陷：
-
day变量仅在页面加载时计算一次（let day = d.getDay()），后续未随时间推移更新，导致changeLink()中判断的始终是初始星期几； -
字符串化星期（如
"Monday"）与数字型星期（1）共用同一变量day，造成类型混淆与逻辑覆盖——switch块修改了day的值，使其从数字变为字符串，后续if (day === 1)判断必然失败。
✅ 正确实现方案
将日期/时间状态的获取与更新全部移入 setInterval 定时器中，确保每秒刷新一次真实状态，并严格分离「数字星期」与「显示文本」：
let href = 'https://google.com';
const dayElement = document.getElementById('dayElement');
const hr = document.getElementById('hr');
const min = document.getElementById('min');
const sec = document.getElementById('sec');
// ✨ 关键：声明 day 为数字型变量（0-6），不赋初值，仅用于逻辑判断
let day;
setInterval(() => {
const now = new Date();
// 更新时钟显示
hr.textContent = formatTime(now.getHours());
min.textContent = formatTime(now.getMinutes());
sec.textContent = formatTime(now.getSeconds());
// ✨ 关键：每秒重读当前星期数字（0=Sunday, 1=Monday...）
day = now.getDay();
// 同步更新页面上显示的星期名称（仅用于 UI，不影响逻辑）
switch (day) {
case 0: dayElement.textContent = 'Sunday'; break;
case 1: dayElement.textContent = 'Monday'; break;
case 2: dayElement.textContent = 'Tuesday'; break;
case 3: dayElement.textContent = 'Wednesday'; break;
case 4: dayElement.textContent = 'Thursday'; break;
case 5: dayElement.textContent = 'Friday'; break;
case 6: dayElement.textContent = 'Saturday'; break;
}
}, 1000);
function formatTime(n) {
return n < 10 ? `0${n}` : `${n}`;
}
function changeLink() {
const now = new Date();
const hour = now.getHours();
// ✅ 使用实时更新的数字 day（0-6）进行条件判断
if (day === 1 && hour >= 0 && hour < 12) { // 周一上午
href = 'https://www.google.com';
} else if (day === 6 && hour >= 0 && hour < 12) { // 周六上午
href = 'https://www.cnn.com';
} else if (hour >= 12 && hour < 18) { // 中午至傍晚（所有工作日/周末通用）
href = 'https://www.youtube.com';
} else if (hour >= 18 && hour < 24) { // 晚上
href = 'https://www.facebook.com';
}
// ⚠️ 注意：未覆盖的时段（如周日凌晨 0–5 点）仍使用默认 href
window.location.href = href;
}? 关键注意事项
-
避免全局变量污染：
day仅用于存储getDay()返回的原始数值，绝不复用为字符串，保证逻辑纯净； -
时间判断需覆盖全周期：当前示例未处理
hour （凌晨）及 <code>day === 0 || 2–5的其他组合，建议补充else或默认分支； -
window.location.href是同步跳转：用户点击即离开当前页，如需调试，可先用console.log(href)替代验证逻辑； -
HTML 属性
dir="itr"应为dir="ltr"（Left-To-Right），属笔误，已修正； -
性能友好：
setInterval(1000)足以满足秒级精度，无需更高频刷新。
通过以上重构，按钮将严格依据用户点击瞬间的真实星期与小时跳转对应链接，彻底解决“链接不随时间变化”的问题。
