首页请编写代码，实现根据系统时间显示问候语的功能，通过改变div中内容，显示不同问候语（前端）

请编写代码，实现根据系统时间显示问候语的功能，通过改变div中内容，显示不同问候语（前端）

时间: 2024-10-12 20:18:00 浏览: 105

为了实现这个功能，你可以使用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>`中的问候语。

阅读全文