请编写代码,实现根据系统时间显示问候语的功能,通过改变div中内容,显示不同问候语。要求如下。 1. 6时之前,显示问候语“凌晨好”。 2. 9时之前,显示问候语“早上好”。 3. 12时之前,显示问候语“上午好”。 4. 14时之前,显示问候语“中午好”。 5. 17时之前,显示问候语“下午好”。 6. 19时之前,显示问候语“傍晚好”。 7. 22时之前,显示问候语“晚上好”。 8. 22时之后包括22时,显示问候语“夜里好”。js
时间: 2024-02-13 15:07:16 浏览: 146
可以使用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>`标签用来显示问候语,并且它的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>`中的问候语。
请编写代码,实现根据系统时间显示问候语的功能,通过改变div 的内容显示不同的问候语,具体要求如下。 DOM(上) 131 alse表 加光 ) 四 6点之前,显示问候语“凌晨好”。 ·9点
要实现这个功能,你可以使用JavaScript来获取当前系统时间并更新HTML元素的内容。以下是简单的示例代码:
```html
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>动态问候</title>
</head>
<body>
<div id="greeting">凌晨好</div>
<script>
function updateGreeting() {
const now = new Date();
const hour = now.getHours();
if (hour < 9) { // 检查是否早于9点
document.getElementById("greeting").innerText = "凌晨好";
} else if (hour < 18) { // 到下午5点
document.getElementById("greeting").innerText = "上午好";
} else if (hour < 24) { // 下午5点到晚上11点
document.getElementById("greeting").innerText = "晚上好";
} else { // 晚上11点之后
document.getElementById("greeting").innerText = "明天见";
}
}
// 设置初始问候并每分钟检查一次时间
updateGreeting();
setInterval(updateGreeting, 60 * 1000);
</script>
</body>
</html>
```
这段代码首先定义了一个`updateGreeting`函数,它会获取当前小时,并根据小时值决定显示哪种问候语。然后,我们在页面加载完成后立即执行一次该函数,并设置一个定时器每分钟执行一次,确保时刻保持最新的问候。
阅读全文