使用 JavaScript 根据时间动态设置背景图片-html教程-PHP中文网

使用 JavaScript 根据时间动态设置背景图片

心靈之曲

发布： 2025-09-08 11:32:13

原创

274人浏览过

使用 javascript 根据时间动态设置背景图片

本文将介绍如何使用 JavaScript 根据当前时间动态改变网页的背景图片。我们将通过获取当前时间的小时数，并根据不同的时间段设置不同的背景图片，从而实现一个动态变化的网页背景效果。文章将提供详细的代码示例和步骤说明，帮助开发者快速掌握该技巧。

动态背景图片实现步骤

要实现根据时间动态设置背景图片，我们需要以下几个步骤：

HTML 结构: 创建包含背景图片的 div 元素。
CSS 样式: 设置 div 元素的样式，使其占据整个页面，并设置初始背景图片。
JavaScript 代码:
- 获取当前时间的小时数。
- 根据小时数判断当前时间段。
- 根据当前时间段，设置 div 元素的背景图片。

具体实现

1. HTML 结构

首先，我们需要在 HTML 中创建一个 div 元素，用于显示背景图片。为了方便 JavaScript 操作，我们需要给这个 div 元素添加一个 class，例如 imgdiv。

<div class="bgimg">
    <div class="imgdiv" style="background-image: url('noon.png');">
    </div>
</div>

登录后复制

这里我们设置了初始背景图片为 noon.png。

立即学习“Java免费学习笔记（深入）”；

2. CSS 样式

接下来，我们需要设置 CSS 样式，使 div 元素占据整个页面，并设置背景图片的显示方式。

<style>
    body,
    html {
        height: 100%;
        margin: 0;
    }

    .bgimg {
        height: 100%;
        background-position: center;
        background-size: cover;
        position: relative;
        color:  black;
        font: areial;
        font-size: 25px;
    }
</style>

登录后复制

background-position: center 保证背景图片居中显示，background-size: cover 保证背景图片铺满整个 div 元素。

稿定抠图

AI自动消除图片背景

查看详情

3. JavaScript 代码

现在，我们需要编写 JavaScript 代码，实现动态设置背景图片的功能。

<script>
    var img = document.querySelector(".imgdiv");
    var d = new Date();
    var n = d.getHours();
    if (n > 20 || n < 6) {
        img.style.backgroundImage = "url('midnight.png')";
    } else if (n > 6 && n < 8) {
        img.style.backgroundImage = "url('sunrise.png')";
    } else if (n > 8 && n < 18) {
        img.style.backgroundImage = "url('noon.png')";
    } else if (n > 18 && n < 20) {
        img.style.backgroundImage = "url('sunset.png')";
    }
</script>

登录后复制

这段代码首先通过 document.querySelector(".imgdiv") 获取 div 元素。然后，获取当前时间的小时数。最后，根据小时数判断当前时间段，并设置 div 元素的 backgroundImage 属性。

代码解释:

document.querySelector(".imgdiv"): 使用 CSS 选择器 .imgdiv 获取 HTML 中 class 为 imgdiv 的元素。这是获取 HTML 元素的关键步骤。
new Date(): 创建一个 Date 对象，用于获取当前日期和时间。
d.getHours(): 获取当前时间的小时数 (0-23)。
img.style.backgroundImage = "url('...')": 设置 div 元素的背景图片。注意，url() 函数需要用单引号包裹图片路径。

完整代码示例

将以上代码整合在一起，得到完整的代码示例：

<!DOCTYPE html>
<html>
<head>
    <title>Dynamic Background Image</title>
    <style>
        body,
        html {
            height: 100%;
            margin: 0;
        }

        .bgimg {
            height: 100%;
            background-position: center;
            background-size: cover;
            position: relative;
            color:  black;
            font: areial;
            font-size: 25px;
        }
    </style>
</head>
<body>
    <div class="bgimg">
        <div class="imgdiv" style="background-image: url('noon.png');">
        </div>
    </div>

    <script>
        var img = document.querySelector(".imgdiv");
        var d = new Date();
        var n = d.getHours();
        if (n > 20 || n < 6) {
            img.style.backgroundImage = "url('midnight.png')";
        } else if (n > 6 && n < 8) {
            img.style.backgroundImage = "url('sunrise.png')";
        } else if (n > 8 && n < 18) {
            img.style.backgroundImage = "url('noon.png')";
        } else if (n > 18 && n < 20) {
            img.style.backgroundImage = "url('sunset.png')";
        }
    </script>
</body>
</html>

登录后复制

注意事项

确保图片路径正确，并且图片文件存在。
JavaScript 代码应该放在 </body> 标签之前，以确保 HTML 元素已经被加载。
可以根据实际需求调整时间段和对应的背景图片。
为了更好的用户体验，可以添加过渡效果，使背景图片的切换更加平滑。可以使用 CSS 的 transition 属性来实现。

总结

通过本文的介绍，我们学习了如何使用 JavaScript 根据时间动态设置网页的背景图片。这种技术可以为网页增加动态效果，提升用户体验。开发者可以根据实际需求，灵活运用这种技术，创建更加个性化的网页。记住，关键点在于使用 document.querySelector() 正确获取 HTML 元素，并使用 element.style.backgroundImage 属性来更改背景图片。

以上就是使用 JavaScript 根据时间动态设置背景图片的详细内容，更多请关注php中文网其它相关文章！