如何在JavaScript中为不同的时间段创建一个问候表格
时间: 2024-10-17 22:12:18 浏览: 23
javascript实现根据时间段显示问候语的方法
5星 · 资源好评率100%
在JavaScript中,为不同的时间段创建一个问候表格可以使用数组结合模板字符串,或者利用HTML和JavaScript动态生成内容。这里我会提供一种简单的示例:
首先,你可以创建一个包含不同时间区间及其对应的问候消息的数组:
```javascript
const greetings = [
{ startHour: 6, endHour: 12, greeting: '早上好!' },
{ startHour: 12, endHour: 18, greeting: '下午好!' },
{ startHour: 18, endHour: 24, greeting: '晚上好!' } // 或者直到第二天开始的时间段
];
```
接下来,编写一个函数,根据当前时间判断应该显示哪一条问候消息:
```javascript
function getGreeting() {
const now = new Date();
const hours = now.getHours();
for (let i = 0; i < greetings.length; i++) {
if (hours >= greetings[i].startHour && hours <= greetings[i].endHour) {
return greetings[i].greeting;
}
}
// 如果超过最后一段区域,返回默认的"晚安"或者其他结束语
return greetings[greetings.length - 1].greeting || '晚安';
}
```
最后,在HTML中使用这个函数获取并显示问候信息:
```html
<!DOCTYPE html>
<html lang="zh">
<body>
<h1 id="greeting"></h1>
<script>
document.getElementById('greeting').innerText = getGreeting();
</script>
</body>
</html>
```
每当用户刷新页面或者浏览器自动更新时,都会显示相应的时间段内的问候。
阅读全文