根据不同时间显示不同的图片（JS）

最新推荐文章于 2023-03-27 09:46:03 发布

米咪米

最新推荐文章于 2023-03-27 09:46:03 发布

阅读量1.9k

点赞数 1

分类专栏： JavaScript 文章标签： javascript

本文链接：https://blog.csdn.net/weixin_52063946/article/details/118736901

版权

JavaScript 专栏收录该内容

17 篇文章 2 订阅

订阅专栏

功能：分时间显示不同的图片

早上显示上午好，显示上午的图片 6-10

中午显示中午好，显示中午的图片 10-14

下午 14-20

晚上 20-6

<!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>

</head>

<body>

    <img src="" alt="">

    <script>
        var img = document.querySelector('img');
        var timer = new Date();
        var h = timer.getHours(); // 获取当前小时

        if (6 < h && h <= 10) {
            img.src = 'images/早上好.png'
        } else if (10 < h && h <= 14) {
            img.src = 'images/中午好.jpg'
        } else if (14 < h && h <= 20) {
            img.src = 'images/下午好.png'
        } else {
            img.src = 'images/晚上好.png'
        }
    </script>
</body>

</html>

注意：时间范围一定是写成6 < h && h <= 10 ，别跟我一样粗心写成 6 < h <= 10啦

运行效果：（当前时间是20:43）

米咪米

关注

1
点赞
踩
18

收藏

觉得还不错? 一键收藏
0
评论
根据不同时间显示不同的图片（JS）

功能：分时间显示不同的图片早上显示上午好，显示上午的图片 6-10中午显示中午好，显示中午的图片 10-14下午 14-20晚上 20-6<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="v
复制链接

扫一扫