请编写代码,实现根据系统时间显示问候语的功能,通过改变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 浏览: 159
可以使用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;
```
相关问题
编写代码实现根据系统时间显示问候语的功能,通过改变div中内容显示不同问候语。
在JavaScript中,你可以编写一个函数,它会根据当前的时间来动态更改HTML中的div元素内容,展示早安、午安或晚安等问候语。下面是一个简单的示例:
```javascript
// 获取当前时间
function getCurrentTime() {
const now = new Date();
const hours = now.getHours(); // 0-23
if (hours < 12) { // 早上
return "Good morning!";
} else if (hours < 18) { // 中午
return "Good afternoon!";
} else { // 晚上
return "Good evening!";
}
}
// 更新div元素的内容
function updateGreeting() {
const greetingDiv = document.getElementById("greeting");
greetingDiv.textContent = getCurrentTime();
}
// 首次加载页面时设置初始问候,并定时更新
window.onload = function () {
updateGreeting();
setInterval(updateGreeting, 60 * 60 * 1000); // 每小时更新一次
};
// 相关问题--
请编写代码,实现根据系统时间显示问候语的功能,通过改变div中内容,显示不同问候语(前端)
为了实现这个功能,你可以使用JavaScript在前端网页中动态更改HTML元素的内容。下面是一个简单的例子,假设你有一个`<div>`标签用来显示问候语,并且它的id是"greeting":
```html
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>问候语切换</title>
</head>
<body>
<div id="greeting"></div>
<script>
function getGreeting() {
// 获取当前时间
const now = new Date();
let hour = now.getHours();
// 转换小时为0-24制
if (hour > 12) {
hour -= 12;
}
// 设置不同的问候语
let greeting;
if (hour < 12) {
greeting = '早上好!';
} else if (hour < 18) {
greeting = '下午好!';
} else {
greeting = '晚上好!';
}
// 更新div的内容
document.getElementById('greeting').textContent = greeting;
}
// 首次加载页面时显示问候语
window.onload = getGreeting;
// 每分钟更新一次(可根据需求调整)
setInterval(getGreeting, 60000); // 60000毫秒等于一分钟
</script>
</body>
</html>
```
这段代码会在页面加载完成后以及每分钟检查一次时间,然后更新`<div>`中的问候语。
阅读全文