JavaScript 中正确使用 if...else 语句判断时间并显示问候语
在网页开发中，经常需要根据当前时间向用户展示不同的问候语，比如早上显示“早上好”，下午显示“下午好”，晚上显示“晚上好”。使用 JavaScript 的 if...else 条件判断语句可以轻松实现这个需求，下面我们来详细讲解实现步骤和注意事项。
实现思路
要实现根据时间显示问候语的功能，核心逻辑分为三步：
第一步：获取当前时间的小时数，JavaScript 的 Date 对象提供了获取小时的方法
第二步：通过 if...else 语句对小时数进行区间判断，划分早上、下午、晚上的时间范围
第三步：根据判断结果，将对应的问候语输出到页面或控制台
核心代码实现
首先我们需要创建 Date 对象来获取当前时间，然后通过 getHours() 方法拿到小时数，该方法返回的是 0 到 23 之间的整数，0 代表凌晨 0 点，23 代表晚上 11 点。
以下是完整的判断逻辑代码：
// 创建当前时间的Date对象
const now = new Date();
// 获取当前小时数（0-23）
const hour = now.getHours();
// 定义问候语变量
let greeting;
// 判断时间区间并赋值问候语
if (hour >= 6 && hour < 12) {
greeting = "早上好！祝你今天工作顺利，心情愉快";
} else if (hour >= 12 && hour < 18) {
greeting = "下午好！记得适当休息，喝杯水放松一下";
} else if (hour >= 18 && hour < 22) {
greeting = "晚上好！忙碌了一天，记得早点休息哦";
} else {
greeting = "夜深了，注意休息，不要熬夜哦";
}
// 输出问候语到控制台
console.log(greeting);
// 如果需要输出到页面，可以获取对应的DOM元素并赋值
// const greetingElement = document.getElementById("greeting");
// if (greetingElement) {
// greetingElement.textContent = greeting;
// }代码说明
上面的代码中，我们使用了标准的 if...else if...else 结构，时间区间的划分符合日常习惯：
早上：6点（含）到12点（不含），对应 hour >=6 且 hour
<12<>下午：12点（含）到18点（不含），对应 hour >=12 且 hour
<18<>晚上：18点（含）到22点（不含），对应 hour >=18 且 hour
<22<>深夜：22点（含）到次日6点（不含），其余情况归为深夜问候
注意判断条件的顺序很重要，因为 if...else 是顺序执行，当第一个满足条件的分支被执行后，后续的分支就不会再判断，所以区间划分要从最小的区间开始，或者保证区间不重叠，避免逻辑错误。
常见问题与注意事项
在使用 if...else 做时间判断时，新手容易犯以下错误：
错误使用逻辑运算符：比如判断早上时间写成
if (hour >= 6 || hour < 12)，这会导致所有时间都满足条件，因为 hour 要么大于等于6，要么小于12，永远为真，应该使用逻辑与&&区间边界重叠：比如同时将 hour ==12 放到早上的判断和下午的判断中，会导致逻辑冲突，建议固定区间的边界规则，比如左闭右开，避免边界重复
忘记声明变量：直接使用未声明的变量赋值问候语，在严格模式下会报错，建议先声明变量再赋值，或者使用 const 声明后根据不同条件修改值（如果是 let 声明的话）
扩展：结合HTML显示问候语
如果需要在网页中直接显示问候语，可以结合HTML的 <div> 标签和DOM操作实现，HTML部分只需要添加一个用于展示问候语的容器：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>时间问候语示例</title>
</head>
<body>
<div id="greeting"></div>
<script>
const now = new Date();
const hour = now.getHours();
let greeting;
if (hour >= 6 && hour < 12) {
greeting = "早上好！祝你今天工作顺利，心情愉快";
} else if (hour >= 12 && hour < 18) {
greeting = "下午好！记得适当休息，喝杯水放松一下";
} else if (hour >= 18 && hour < 22) {
greeting = "晚上好！忙碌了一天，记得早点休息哦";
} else {
greeting = "夜深了，注意休息，不要熬夜哦";
}
document.getElementById("greeting").textContent = greeting;
</script>
</body>
</html>上面的代码会在页面加载完成后，自动根据当前时间将对应的问候语渲染到 id 为 greeting 的 <div> 容器中，用户打开页面就能直接看到问候内容。