根据不同时间显示不同的图片（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="I

米咪米

1957人浏览 · 2021-07-14 20:45:31

米咪米 · 2021-07-14 20:45:31 发布

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

早上显示上午好，显示上午的图片 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）