JavaScript if else条件判断执行结果不符合预期问题求解

架构老林

2026-8-28

问题原因

你的if/else判断有两个核心问题，导致逻辑完全不生效：

分支判断顺序错误，第一个条件hour < 18覆盖了0~17点的所有时段，只要当前小时在这个范围内，会直接命中第一个分支赋值"Good Morning!"，后面的else if、else分支根本没有执行机会，这就是你不管怎么改后面的条件，页面一直显示早上好的直接原因。
时间区间阈值完全不符合需求：你要的12点前显示早问候的逻辑，被错误写成了18点前都算早上，下午、晚上的判断阈值也没有按区间划分。
额外的小问题：下午问候语的单词拼写错误，Afternnon正确拼写是Afternoon。

修复方案

if/else是从上到下顺序匹配的，命中第一个符合条件的分支就会终止判断，写时间区间判断时要么按阈值从小到大排列条件，要么写全区间上下限，避免大范围条件前置拦截后续分支。
按常规的问候时段划分（0_{12点早间、12}18点下午、18点之后晚间），修复后的JS代码如下：

const hour = new Date().getHours();
let greeting;

if (hour < 12) {
    greeting = "Good Morning!"
} else if (hour < 18) {
    greeting = "Good Afternoon!"
} else {
    greeting = "Good Evening!"
}

document.getElementById('demo').innerHTML = greeting;
document.getElementById('time').innerHTML = Date();

原HTML结构不需要调整，只要把上面的代码替换掉你原来w3school.js里的对应逻辑即可，修复后刷新页面就会按当前时间显示对应问候语。
对应的HTML参考如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1 id="demo">Good Evening</h1>
    <br><br>
    <p id="time"></p>
    <script src="w3school.js"></script>
</body>
</html>