js实现实时问候,不同时间显示不同问候语
时间: 2024-01-20 11:04:19 浏览: 123
好的,可以使用 JavaScript 来实现。可以先获取当前时间,然后根据时间的不同,显示不同的问候语。以下是一个简单的实现方法:
```js
// 获取当前时间
const now = new Date();
const hour = now.getHours();
// 根据时间显示不同的问候语
let greeting;
if (hour >= 5 && hour < 12) {
greeting = '早上好!';
} else if (hour >= 12 && hour < 18) {
greeting = '下午好!';
} else {
greeting = '晚上好!';
}
// 将问候语显示在页面上
const greetingElement = document.getElementById('greeting');
greetingElement.innerText = greeting;
```
在 HTML 页面中,需要有一个元素来显示问候语,例如:
```html
<div id="greeting"></div>
```
这样就可以实现根据时间实时显示不同的问候语了。
相关问题
js实现系统时间显示问候语功能通过div显示不同时间的问候语
可以使用JavaScript中的Date对象来获取系统时间,并根据时间来显示不同的问候语。下面是一个简单的实现示例:
```html
<div id="greeting"></div>
<script>
// 获取当前时间
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 = "夜里好";
}
// 在页面中显示问候语
var greetingDiv = document.getElementById("greeting");
greetingDiv.innerHTML = greeting;
</script>
```
在页面中,我们可以使用一个`<div>`元素来显示问候语。JavaScript代码根据当前时间来设置不同的问候语,并将其设置为`<div>`元素的内容,从而在页面中显示出来。
js根据系统时间显示问候语通过改变div内容显示不同问候语
以下是一个简单的示例,它根据当前时间显示不同的问候语:
```html
<div id="greeting"></div>
<script>
var now = new Date();
var hour = now.getHours();
if (hour < 6) {
document.getElementById("greeting").innerHTML = "凌晨好!";
} else if (hour < 9) {
document.getElementById("greeting").innerHTML = "早上好!";
} else if (hour < 12) {
document.getElementById("greeting").innerHTML = "上午好!";
} else if (hour < 14) {
document.getElementById("greeting").innerHTML = "中午好!";
} else if (hour < 18) {
document.getElementById("greeting").innerHTML = "下午好!";
} else if (hour < 22) {
document.getElementById("greeting").innerHTML = "晚上好!";
} else {
document.getElementById("greeting").innerHTML = "夜深了,注意休息!";
}
</script>
```
首先,我们使用`new Date()`获取当前时间。然后,我们使用`getHours()`方法从时间中提取小时数。接下来,我们使用条件语句根据小时数设置不同的问候语,并将其显示在一个`<div>`元素中。最后,我们将此代码嵌入到一个简单的HTML页面中。
阅读全文