分时显示不同图片和问候语

最新推荐文章于 2024-07-08 12:11:04 发布

YuKing_HONG

最新推荐文章于 2024-07-08 12:11:04 发布

阅读量347

点赞数

分类专栏： DOM 文章标签：前端 javascript html

本文链接：https://blog.csdn.net/YuKing_HONG/article/details/128412089

版权

DOM 专栏收录该内容

8 篇文章

订阅专栏

该博客展示了一个根据系统时间动态改变图片和问候语的HTML页面。通过JavaScript获取当前小时数，使用分支语句设置了不同时间段对应的图片和问候语，如上午、中午、下午和晚上的问候，并相应地修改了img元素的src属性和div元素的内容。

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

//根据系统不同时间判断，需要用到日期内置对象

//利用分支语句设置不同图片

//修改img元素的src属性

//需要一个div显示问候语，跟随时间修改元素内容

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        img {
            width: 200px;
            height: 160px;
            margin-bottom: 10px;
        }
    </style>
</head>

<body>
    <img src="./image/上午.jpg" alt="#">
    <div>上午好</div>
    <script>
        var div = document.querySelector('div');
        var img = document.querySelector('img');
        var date = new Date();
        var h = date.getHours();
        if (h < 10) {
            img.src = './image/上午.jpg';
            div.innerHTML = '上午好~';
        } else if (h < 13) {
            img.src = './image/中午好.png';
            div.innerHTML = '中午好~';
        } else if (h < 18) {
            img.src = './image/下午好.png';
            div.innerHTML = '下午好~';
        } else if (h < 24) {
            img.src = './image/晚上好.gif';
            div.innerHTML = '晚上好~';
        }

       // alert(h);//检查是否获取到时间
    </script>
</body>

</html>