1、 根据时间段的不同,在网页中显示不同的问候语,若小时数在12点以前,则输出“早上好!”的问候语,颜色为蓝色;若在12点至18点,则输出“下午好!”颜色为红色;18点以后输出“晚上好!”颜色为黑色。
时间: 2024-10-15 09:17:21 浏览: 73
在网页中实现这种功能,通常会结合JavaScript来动态控制内容和样式。你可以创建一个HTML元素,比如一个`<p>`标签用于显示问候语,并利用JavaScript的条件语句如`if...else if...else`来判断当前时间。这里是一个简单的示例:
```html
<!DOCTYPE html>
<html lang="zh">
<head>
<style>
.good-morning { color: blue; }
.good-afternoon { color: red; }
.good-evening { color: black; }
</style>
</head>
<body>
<div id="greeting"></div>
<script>
function displayGreeting() {
var currentTime = new Date();
var hour = currentTime.getHours();
// 设置颜色和问候语
var greetingClass;
if (hour < 12) {
greetingClass = 'good-morning';
document.getElementById('greeting').innerText = "早上好!";
} else if (hour < 18) {
greetingClass = 'good-afternoon';
document.getElementById('greeting').innerText = "下午好!";
} else {
greetingClass = 'good-evening';
document.getElementById('greeting').innerText = "晚上好!";
}
// 更新元素样式
document.getElementById('greeting').classList.add(greetingClass);
}
// 每隔一小时更新一次问候语
setInterval(displayGreeting, 60 * 60 * 1000);
</script>
</body>
</html>
```
在这个例子中,我们创建了一个定时器函数`setInterval()`,每小时运行一次`displayGreeting()`函数,获取当前时间并更新`<div>`元素的内容和颜色。
阅读全文
相关推荐


















