用html编写3、请编写代码,实现根据系统时间显示问候语的功能,通过改变div 中内容,显示不同问候语。要求如下。 6时之前,显示问候语“凌晨好”。9时之前,显示问候语“早上好”。12时之前,显示问候语“上午好”。14时之前,显示问候语“中午好”。17时之前,显示问候语“下午好”。19时之前,显示问候语“傍晚好”。 22时之前,显示问候语“晚上好”。 22时之后包括22时,显示问候语“夜里好”。
时间: 2023-08-18 21:09:14 浏览: 267
javascript实现根据时间段显示问候语的方法
5星 · 资源好评率100%
以下是使用 JavaScript 和 HTML 实现根据系统时间显示问候语的代码:
```html
<!DOCTYPE html>
<html>
<head>
<title>问候语</title>
<meta charset="utf-8">
<script>
function getGreeting() {
var hour = new Date().getHours();
var greeting;
if (hour < 6) {
greeting = "凌晨好";
} else if (hour < 9) {
greeting = "早上好";
} else if (hour < 12) {
greeting = "上午好";
} else if (hour < 14) {
greeting = "中午好";
} else if (hour < 17) {
greeting = "下午好";
} else if (hour < 19) {
greeting = "傍晚好";
} else if (hour < 22) {
greeting = "晚上好";
} else {
greeting = "夜里好";
}
document.getElementById("greeting").innerHTML = greeting;
}
</script>
</head>
<body onload="getGreeting()">
<div id="greeting">问候语</div>
</body>
</html>
```
每次页面加载时,`onload` 事件会触发 `getGreeting()` 函数。该函数获取当前系统时间并根据时间设置问候语,并将问候语更新到 `<div>` 元素中。
阅读全文