按钮按时间切换跳转链接失效问题排查求助

核心问题 #

代码中存在关键逻辑错误：初始化时将day变量从数字（getDay()返回0-6）转换成了字符串（如"Monday"），但在changeLink函数里却用数字（day === 1）进行判断，导致这两个条件永远无法匹配，跳转逻辑失效。

修复步骤 #

1. 保留数字类型的星期值：新增变量存储原始数字星期，避免覆盖后无法用于逻辑判断
2. 完善跳转逻辑覆盖范围：补充所有时间区间的跳转规则，避免出现未匹配情况
3. 优化代码可读性：调整变量命名，让逻辑更清晰

修改后的完整代码 #

HTML（无需修改）

<!DOCTYPE html>
<html lang="en" dir="itr">
<head>
  <meta charset="utf-8">
  <title> link </title>
</head>
<body>
  <button type="button" onclick="changeLink()">Go To Link</button>

  <div class="hero">
    <div class="container">
      <div class="clock">
        <span id="dayElement">Monday</span>
        <span id="hr">00</span>
        <span>:</span>
        <span id="min">00</span>
        <span>:</span>
        <span id="sec">00</span>
      </div>
    </div>
  </div>
</body>
</html>

CSS（无需修改）

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  margin: 0%;
  padding: 0%;
  background-color: whitesmoke;
}

.hero {
  position: fixed;
  bottom: 0%;
  right: 0%;
}

button {
  background-color: #18f98f;
  border: none;
  border-radius: 160px;
  position: absolute;
  width: auto;
  text-align: center;
  padding: 20px 50px;
  font-size: 20px;
  cursor: pointer;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1)
}

.container {
  text-align: center;
}

.clock {
  font-size: small;
  font-family: monospace;
}

JavaScript（修改后的版本）

let href = 'https://google.com';
let dayElement = document.getElementById('dayElement')
let hr = document.getElementById('hr');
let min = document.getElementById('min');
let sec = document.getElementById("sec");

let d = new Date();
let dayNumber = d.getDay(); // 保留数字类型的星期值（0-6）
let dayName; // 存储星期的字符串名称
let ndate = d.toLocaleString();

switch (dayNumber) {
  case 0:
    dayName = "Sunday";
    break;
  case 1:
    dayName = "Monday";
    break;
  case 2:
    dayName = "Tuesday";
    break;
  case 3:
    dayName = "Wednesday";
    break;
  case 4:
    dayName = "Thursday";
    break;
  case 5:
    dayName = "Friday";
    break;
  case 6:
    dayName = "Saturday";
    break;
}

dayElement.innerHTML = dayName;

setInterval(() => {
  let currentTime = new Date();
  hr.innerHTML = formatTime(currentTime.getHours());
  min.innerHTML = formatTime(currentTime.getMinutes());
  sec.innerHTML = formatTime(currentTime.getSeconds());
}, 1000);

function formatTime(time) {
  return time < 10 ? "0" + time : time;
}

function changeLink() {
  let currentTime = new Date();
  let hour = currentTime.getHours();

  if (dayNumber === 1 && hour >= 0 && hour < 12) {
    href = 'https://www.google.com';
  } else if (dayNumber === 6 && hour >= 0 && hour < 12) {
    href = 'https://www.cnn.com';
  } else if (hour >= 12 && hour < 18) {
    href = 'https://www.youtube.com';
  } else { // 覆盖18-24点及其他未匹配情况
    href = 'https://www.facebook.com';
  }

  window.location.href = href;
}

测试说明 #

修改后可通过调整系统时间测试不同场景：

• 周一0-12点：跳转对应链接
• 周六0-12点：跳转对应链接
• 12-18点：跳转对应链接
• 18-24点及其他时间：跳转对应链接

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