【JavaScript】案例：分时显示不同图片，显示不同问候语

最新推荐文章于 2023-10-18 22:11:07 发布

知野小兔

最新推荐文章于 2023-10-18 22:11:07 发布

阅读量3k

点赞数 6

分类专栏：前端

本文链接：https://blog.csdn.net/weixin_43945903/article/details/120175345

版权

JavaScript DOM操作时间判断图片切换动态问候语

关键词由CSDN通过智能技术生成

前端专栏收录该内容

16 篇文章 0 订阅

订阅专栏

题目：
根据不同时间，页面显示不同图片，同时显示不同的问候语
1、如果是上午时间打开页面显示上午好，显示上午的图片
2、如果是上午时间打开页面显示上午好，显示上午的图片
3、如果是上午时间打开页面显示上午好，显示上午的图片
分析：
1、根据系统不同时间来判断，所以需要用到日期内置对象
2、利用多分支语句来设置不同的图片
3、需要一个图片，并且根据时间修改图片，就需要用到操作元素的src属性
4、需要一个div元素，显示不同问候语，修改元素内容即可

<body>
    <img src="/img/zaoan.png" alt="">
    <div>上午好</div>

    <script>
        //获取元素
        var img1 = document.querySelector('img');
        var div1 = document.querySelector('div');
        //注册事件：获取小时数
        var date = new Date();
        var h = date.getHours();
        if (h < 12) {
            img1.src = '/img/zaoan.png';
            div1.innerHTML = "亲，早上好呀~~";
        } else if (h < 18) {
            img1.src = "/img/wuan.png";
            div1.innerHTML = "亲，中午好啊~~";
        } else {
            img1.src = '/img/wanan.png';
            div1.innerHTML = "亲，晚上好啊~~";
        }
    </script>

结果：
在这里插入图片描述

知野小兔

关注

6
点赞
踩
20

收藏

觉得还不错? 一键收藏
打赏
0
评论
【JavaScript】案例：分时显示不同图片，显示不同问候语

题目：根据不同时间，页面显示不同图片，同时显示不同的问候语1、如果是上午时间打开页面显示上午好，显示上午的图片2、如果是上午时间打开页面显示上午好，显示上午的图片3、如果是上午时间打开页面显示上午好，显示上午的图片分析：1、根据系统不同时间来判断，所以需要用到日期内置对象2、利用多分支语句来设置不同的图片3、需要一个图片，并且根据时间修改图片，就需要用到操作元素的src属性4、需要一个div元素，显示不同问候语，修改元素内容即可<body> <img src="
复制链接

扫一扫