请编写代码,实现根据系统时间显示问候语的功能,通过改变div中内容,显示不同问候语。要求如下。 1. 6时之前,显示问候语“凌晨好”。 2. 9时之前,显示问候语“早上好”。 3. 12时之前,显示问候语“上午好”。 4. 14时之前,显示问候语“中午好”。 5. 17时之前,显示问候语“下午好”。 6. 19时之前,显示问候语“傍晚好”。 7. 22时之前,显示问候语“晚上好”。 8. 22时之后包括22时,显示问候语“夜里好”。js
时间: 2024-02-13 17:07:16 浏览: 88
可以使用Date对象获取当前系统时间,并根据时间显示不同的问候语。代码如下:
HTML:
```
<div id="greeting"></div>
```
JS:
```
var now = new Date();
var hour = now.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").textContent = greeting;
```
相关问题
js请编写代码,实现根据系统时间显示问候语功能,通过改变div中的内容,显示不同的问候语,10时之前,显示早上好,14时之前,显示中午好,17时之前显示下午好,22时之前,显示晚上好
好的,以下是实现功能的 JavaScript 代码:
```html
<div id="greeting"></div>
<script>
function getGreeting() {
const hour = new Date().getHours();
if (hour < 10) {
return '早上好';
} else if (hour < 14) {
return '中午好';
} else if (hour < 17) {
return '下午好';
} else if (hour < 22) {
return '晚上好';
} else {
return '夜深了';
}
}
const greeting = document.getElementById('greeting');
greeting.innerText = getGreeting();
</script>
```
代码解释:
1. `getGreeting` 函数用于根据当前系统时间,生成相应的问候语。
2. `new Date().getHours()` 可以获取当前时间,精确到小时数。
3. 根据小时数,用 if/else if 条件语句判断应该显示哪个问候语。
4. 在页面中找到 `id` 为 `greeting` 的 `div` 元素。
5. 最后将 `div` 中的文本改为调用 `getGreeting` 函数返回的问候语。
希望以上代码可以满足您的需求,祝您使用愉快!
用html编写3、请编写代码,实现根据系统时间显示问候语的功能,通过改变div 中内容,显示不同问候语。要求如下。 6时之前,显示问候语“凌晨好”。9时之前,显示问候语“早上好”。12时之前,显示问候语“上午好”。14时之前,显示问候语“中午好”。17时之前,显示问候语“下午好”。19时之前,显示问候语“傍晚好”。 22时之前,显示问候语“晚上好”。 22时之后包括22时,显示问候语“夜里好”。
以下是使用 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>` 元素中。