如何使用JavaScript实现根据当前时间动态显示不同问候语文本

问题根因 #

你的代码问题出在if判断分支的顺序逻辑错误：
JavaScript的if...else if分支会从上到下依次匹配，只要命中某一个条件就会直接终止后续判断，不会再校验后面的条件。你现在把hour >= 6放在第一个判断位，所有大于等于6的小时（包括12点、19点）都会直接命中第一个分支，返回"Good Morning"，后面的12点、19点判断永远不会生效。同理凌晨时段的判断也存在顺序颠倒的问题，hour >= 0放在前面的话，2点、3点的判断也永远不会触发。

修正后的完整代码 #

JavaScript

function getDateTime() { 
    let date = new Date(); 
    let hour = date.getHours();
    // 调整判断顺序，从大到小匹配小时值
    if (hour >= 19) {
        document.getElementById('d').innerHTML = "Good Evening";
    } else if (hour >= 12) {
        document.getElementById('d').innerHTML = "Good Afternoon";
    } else if (hour >= 6) {
        document.getElementById('d').innerHTML = "Good Morning";
    } else if (hour >= 3) {
        document.getElementById('d').innerHTML = "GO. TO. SLEEP.";
    } else if (hour >= 2) {
        document.getElementById('d').innerHTML = "You should consider going to sleep";
    } else if (hour >= 0) {
        document.getElementById('d').innerHTML = "Go to sleep soon";
    } else {
        document.getElementById('d').innerHTML = "If you see this, something is wrong with the code";
    }
}
getDateTime()

// 可选优化：如果需要页面长时间开着也能自动切换问候语，添加下面的定时器，每60秒刷新一次时间判断
// setInterval(getDateTime, 60 * 1000)

CSS

h1 {
  text-align: center;
  position: relative;
  font-size: 50px;
}

HTML

<h1 id="d">

</h1>

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