分时问候并显示不用图片案例

最新推荐文章于 2024-08-09 21:30:00 发布

不易撞的网名

最新推荐文章于 2024-08-09 21:30:00 发布

阅读量208

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/weixin_50569789/article/details/119849156

版权

javascript js

前端专栏收录该内容

264 篇文章 5 订阅

订阅专栏

分时问候并显示不用图片案例

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>分时问候并显示不用图片案例</title>
    <style>
        img {
            width: 300px;
        }
    </style>
</head>

<body>
    <img src="https://pic.imgdb.cn/item/612102724907e2d39c25f915.jpg" alt="" class="Picture">
    <div>上午好</div>
    <script>
        // 根据系统不同时间来判断，所以需要用到日期内置对象

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

        // 需要一个图片，并且根据时间修改图片，就需要用到操作元素src属性

        // 需要一个div元素，显示不同问候语，修改元素内容即可
        // 1.获取元素

        //var img = document.querySelector('img');
        var Picture = document.querySelector('.Picture')
        var div = document.querySelector('div');

        // 2. 得到当前的小时数
        var date = new Date();
        var h = date.getHours();

        // 3. 判断小时数改变图片和文字信息
        if (h < 12) {
            Picture.src = 'https://pic.imgdb.cn/item/612102724907e2d39c25f915.jpg';
            div.innerHTML = '亲，上午好，好好写代码';


        } else if (h < 18) {
            Picture.src = 'https://pic.imgdb.cn/item/612102574907e2d39c25b5d9.jpg';
            div.innerHTML = '亲，下午好，好好写代码';


        } else {
            Picture.src = 'https://pic.imgdb.cn/item/612102094907e2d39c250f01.jpg';
            div.innerHTML = '亲，晚上好，好好写代码';

        }
    </script>
</body>

</html>

不易撞的网名

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
分时问候并显示不用图片案例

分时问候并显示不用图片案例<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> &
复制链接

扫一扫