用 JavaScript 函数,根据系统不同的时间,显示不同的问候。早上 6:00-12:00 时, 显示“早上好!”;下午 12:00-18:00 时,显示“下午好!”;其它时间显示“晚上好!的html代码部分
时间: 2023-11-27 20:51:54 浏览: 26
可以使用以下 JavaScript 代码实现:
```js
function greet() {
var now = new Date();
var hour = now.getHours();
var greeting;
if (hour >= 6 && hour < 12) {
greeting = '早上好!';
} else if (hour >= 12 && hour < 18) {
greeting = '下午好!';
} else {
greeting = '晚上好!';
}
document.getElementById('greeting').innerHTML = greeting;
}
```
其中,`new Date()` 会获取当前系统时间,`getHours()` 会获取当前小时数。根据小时数的范围,设置不同的问候语,并将其显示在页面上。假设 HTML 代码部分中有一个 `<div>` 元素,其 `id` 属性为 `greeting`,则可以将上述代码放在页面加载完毕后执行:
```html
<div id="greeting"></div>
<script>
window.onload = function() {
greet();
};
</script>
```
相关问题
请编写代码,实现根据系统时间显示问候语的功能,通过改变div中内容,显示不同问候语。要求如下。 (1)页面每秒自动更新显示当前系统时间,格式如:2023-04-15 08:30:00;(提示,这里需要使用setInterval函数) (2)判断当前小时,根据不同小时显示不同的问候语,具体如下: 6时之前,显示问候语“凌晨好”。 9时之前,显示问候语“早上好”。 12时之前,显示问候语“上午好”。 14时之前,显示问候语“中午好”。 17时之前,显示问候语“下午好”。 19时之前,显示问候语“傍晚好”。 22时之前,显示问候语“晚上好”。 22时之后包括22时,显示问候语“夜里好”。
以下是实现以上要求的JavaScript代码:
```js
// 获取显示系统时间的div元素
const timeDisplay = document.getElementById('time-display');
// 定义显示不同时间段问候语的函数
function getGreeting(hour) {
if (hour < 6) {
return '凌晨好';
} else if (hour < 9) {
return '早上好';
} else if (hour < 12) {
return '上午好';
} else if (hour < 14) {
return '中午好';
} else if (hour < 17) {
return '下午好';
} else if (hour < 19) {
return '傍晚好';
} else if (hour < 22) {
return '晚上好';
} else {
return '夜里好';
}
}
// 定义更新系统时间的函数
function updateTime() {
// 获取当前时间对象
const now = new Date();
// 获取当前小时数
const hour = now.getHours();
// 获取当前分钟数
const minute = now.getMinutes();
// 获取当前秒数
const second = now.getSeconds();
// 根据当前时间生成问候语
const greeting = getGreeting(hour);
// 更新显示系统时间的div元素内容
timeDisplay.innerHTML = `${now.getFullYear()}-${now.getMonth()+1}-${now.getDate()} ${hour}:${minute}:${second} ${greeting}`;
}
// 每秒钟更新一次系统时间
setInterval(updateTime, 1000);
```
请注意,在第一行代码中,需要将id为`time-display`的div元素的变量名修改为你自己页面中的变量名。另外,以上代码中的注释也为你提供了一些代码实现的详细解释。
编程题请编写代码,实现根据系统时间显示问候语的功能,通过改变 div 中内容,显示不同问候语。要求:0-8点,显示问候语“早上好”;8-12点,显示问候语“上午好”;12-17点,显示问候语“下午好”;17-24点,显示问候语“晚上好”。
当然,这是一个简单的JavaScript示例,它会根据当前时间动态更改HTML元素的内容:
```javascript
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>时间问候</title>
</head>
<body>
<div id="greeting"></div>
<script>
function changeGreeting() {
const now = new Date();
const hours = now.getHours();
let greeting;
if (hours >= 0 && hours < 8) {
greeting = "早上好";
} else if (hours >= 8 && hours < 12) {
greeting = "上午好";
} else if (hours >= 12 && hours < 17) {
greeting = "下午好";
} else if (hours >= 17 || hours < 0) { // 将17包含在内是为了处理跨零点的情况
greeting = "晚上好";
}
document.getElementById("greeting").innerText = greeting;
}
// 每隔一小时更新一次问候语,你可以根据需要调整频率
setInterval(changeGreeting, 60 * 60 * 1000);
</script>
</body>
</html>
```
这个代码会在网页加载后立即设置一次问候语,并且每过一小时自动更新一次。根据浏览器的当前时间,`changeGreeting`函数会选择相应的问候语显示在id为"greeting"的`<div>`元素中。
阅读全文
相关推荐
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![-](https://img-home.csdnimg.cn/images/20241231044937.png)
![-](https://img-home.csdnimg.cn/images/20241226111658.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)