前端动态时间问候语实现-CSDN博客

本文介绍了如何使用HTML和JavaScript创建一个动态显示不同时间问候语的网页。根据时间，页面会展示'早上好'，'上午好'，'下午好'，'晚上好'，'祝你晚安'或'网虫：该休息了，明天还有课呢！'的问候，并且时间会实时更新。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

项目要求：

创建页面，实现能根据时间显示网页上的不同问候语，要求如下：

5点以后～8点以前显示早上好！

12点以前显示上午好！；

18点以前显示下午好！；

21点以前显示晚上好！；

23点以前显示祝你晚安！；

23点～5点以前显示网虫：该休息了，明天还有课呢！

提示：显示上面提示内容可用alert实现！

进入页面，页面显示当前时间，且时间是动态更新的。

效果图：

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>time</title>
</head>

<script>
    window.setInterval('shoutime()',1000);
    function shoutime() {
        var time=new Date();
        var data;
        data=time.getHours()+":"+time.getMinutes()+":"+time.getSeconds();
        document.getElementById("time").innerHTML=data;
        var nowtime=time.getHours();
        if (nowtime>=5&&nowtime<8){
            alert("早上好！")
        }else if(nowtime>=8&&nowtime<12){
            alert("上午好！")
        }else if (nowtime>=12&&nowtime<18){
            alert("下午好！")
        }else if (nowtime>=18&&nowtime<21){
            alert("晚上好！")
        }else if (nowtime>21&&nowtime<23){
            alert("晚安！")
        }else if (23<=nowtime&&nowtime<=24){
            alert("还不睡，明天好上班呢！")
        }else if (nowtime>0&&nowtime<5){
            alert("还不睡，明天好上班呢！")
        }
    }
</script>
<style>
    #time{
        text-align: center;
        font-size: 300px;
        color: blue;
    }
</style>
<body onload="shoutime()">
<div id="time"></div>
</body>
</html>