webApi小案例二：实现在不同时间页面中出现不同内容

最新推荐文章于 2024-08-27 13:38:21 发布

秃头桑

最新推荐文章于 2024-08-27 13:38:21 发布

阅读量262

点赞数

分类专栏： api小案例文章标签： javascript html html5 css3

本文链接：https://blog.csdn.net/qq_45052409/article/details/107450080

版权

api小案例专栏收录该内容

7 篇文章 0 订阅

订阅专栏

 <title>Document</title>
    <style>
        img {
            width: 500px;
        }
    </style>
</head>

<body>
    <img src="images/thunder.jpg" alt="">
    <div id="d">上午好</div>
    <script>
        /*
            1.根据系统不同的事件来判断，所有需要用到的日期内置对象
            2.利用多分支语句来设置不同的图片
            3.一个图片，并且根据事件修改图片，就需要用到操作元素src
            4.一个div元素，显示不同问候语，修改元素内容即可
        */

        // 1. 获取元素
        var img = document.querySelector('img');
        var div = document.getElementById('d');
        // 2.得到当前的事件 小时
        // Date 该实例呈现时间中的某个时刻,即自1970年1月1日（UTC）起经过的毫秒数。
        var date = new Date(); // 当前时间
        var h = date.getHours(); // 小时
        // 3.判断小时数改变图片和文字信息
        if (h < 12) {
            img.src = 'images/卡卡西.jpg';
            div.innerHTML = '美好的一天开始啦'
        } else if (h < 18) {
            img.src = 'images/大蛇丸.jpg';
            div.innerHTML = '下午好，加油'
        } else {
            img.src = 'images/thunder.jpg'
            div.innerHTML = '晚上好，不早点睡小心明天崩溃'
        }


        
    </script>
</body>

由于秃头桑的知识能力有限，如果有写的不对的地方，还请各位大佬批评指正，各位小伙伴如果有什么想和秃头桑说的欢迎在下方留言哦。

秃头桑

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
webApi小案例二：实现在不同时间页面中出现不同内容

<title>Document</title> <style> img { width: 500px; } </style></head><body> <img src="images/thunder.jpg" alt=""> <div id="d">上午好</div> <script>.
复制链接

扫一扫