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

使用 JavaScript 根据时间动态设置网页背景

心靈之曲

发布： 2025-09-08 10:39:01

原创

204人浏览过

使用 javascript 根据时间动态设置网页背景

本文将指导你如何使用 JavaScript 动态地根据当前时间更改网页的背景图像。通过获取客户端的当前时间，并使用条件判断，我们可以根据不同的时间段应用不同的背景图片，从而为用户提供更个性化的体验。本文将提供详细的代码示例和解释，帮助你轻松实现这一功能。

实现动态背景的步骤

要实现根据时间动态更改网页背景，我们需要以下几个步骤：

HTML 结构: 创建包含背景图像的 HTML 元素。
CSS 样式: 设置背景元素的基本样式，例如高度、背景位置和大小。
JavaScript 代码: 使用 JavaScript 获取当前时间，并根据时间段设置不同的背景图像。

HTML 结构和 CSS 样式

首先，我们需要在 HTML 中创建一个 div 元素，该元素将用作背景容器。并使用 CSS 设置其样式，使其占据整个页面。

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

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

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

登录后复制

在上面的代码中，.bgimg 类用于设置背景容器的基本样式，包括高度、背景位置和大小。.imgdiv 类用于设置实际的背景图像。

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

JavaScript 代码

接下来，我们需要使用 JavaScript 代码来获取当前时间，并根据时间段设置不同的背景图像。

美间AI

美间AI：让设计更简单

查看详情

<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") 获取了具有 .imgdiv 类的元素。然后，它创建了一个 Date 对象来获取当前时间，并使用 getHours() 方法获取当前小时数。

接下来，使用 if...else if 语句根据不同的时间段设置不同的背景图像。例如，如果当前时间在晚上 8 点到早上 6 点之间，则将背景图像设置为 midnight.png。

注意事项:

确保所有背景图片（midnight.png，sunrise.png，noon.png，sunset.png）都位于正确的路径下，以便 JavaScript 代码能够正确加载它们。
将 JavaScript 代码放在 </body> 标签之前，以确保在 DOM 加载完成后执行代码。
为了提高代码的可读性和可维护性，可以将时间段和对应的背景图像存储在一个对象中，然后使用循环来设置背景图像。

完整示例

将以上 HTML、CSS 和 JavaScript 代码组合在一起，就得到了一个完整的示例，可以根据时间动态更改网页背景。

<!DOCTYPE html>
<html>
<head>
    <title>动态背景</title>
    <style>
        body,
        html {
            height: 100%;
            margin: 0;
        }

        .bgimg {
            height: 100%;
            background-position: center;
            background-size: cover;
            position: relative;
            color: black;
            font: arial;
            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 动态地根据当前时间更改网页的背景图像。这种技术可以用于创建更个性化和吸引人的用户体验。你可以根据自己的需求修改代码，例如添加更多的背景图像或使用不同的时间段。记住，关键在于正确获取 DOM 元素，并使用 style.backgroundImage 属性来更改背景图像。

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