当前位置：首页 > 文章列表 > 文章 > 前端 > JavaScript动态时间背景切换教程

JavaScript动态时间背景切换教程

2025-09-12 23:13:44 0浏览收藏

**JavaScript动态背景时间切换：轻松实现网页背景随时间变化** 本文详细介绍了如何使用 JavaScript 实现网页动态背景，让背景图片根据当前时间自动切换。我们将深入讲解 HTML 结构搭建、JavaScript 代码编写以及关键注意事项，助力开发者轻松掌握这项实用技巧。核心原理是利用 JavaScript 获取当前时间，并根据不同时间段动态修改 HTML 元素的 `background-image` 样式属性，从而实现背景图片的自动更换。无论你是前端新手还是经验丰富的开发者，都能通过本文快速上手，为你的网页增添更多趣味性和互动性。了解更多关于 JavaScript 动态背景的实现方法，请继续阅读。

使用 JavaScript 根据时间动态改变网页背景

本文旨在指导开发者如何使用 JavaScript 动态地改变网页背景，使其根据当前时间显示不同的图片。我们将详细讲解实现步骤，包括 HTML 结构搭建、JavaScript 代码编写以及注意事项，帮助你轻松实现这一功能。

实现原理

核心思路是使用 JavaScript 获取当前时间，然后根据时间段的不同，动态地修改 HTML 元素的 background-image 样式属性。

HTML 结构

首先，我们需要创建一个 HTML 结构来承载背景图片。这里我们使用一个 div 元素，并为其设置一个类名 bgimg，用于设置通用的背景样式。此外，在 bgimg 内部再创建一个 div 元素，类名为 imgdiv，用于动态设置背景图片。

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

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

在上面的代码中，我们为 .bgimg 类设置了 height: 100%，background-position: center 和 background-size: cover，以确保背景图片能够铺满整个页面，并居中显示。初始背景图片设置为 noon.png，这将在 JavaScript 代码执行前显示。

JavaScript 代码

接下来，我们需要编写 JavaScript 代码来获取当前时间，并根据时间段的不同，动态地修改 .imgdiv 元素的 background-image 样式属性。

<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 语句判断当前时间段，并使用 img.style.backgroundImage 修改背景图片。

代码解释：

document.querySelector(".imgdiv"): 选取类名为 imgdiv 的 HTML 元素。
new Date(): 创建一个新的 Date 对象，代表当前日期和时间。
d.getHours(): 获取当前时间的小时数 (0-23)。
img.style.backgroundImage = "url('image.png')": 设置 img 元素的 background-image 样式。

注意事项

图片路径： 确保代码中的图片路径是正确的，否则背景图片将无法显示。建议使用相对路径，例如 'midnight.png'，并将图片文件放在与 HTML 文件相同的目录下，或者使用绝对路径。
JavaScript 代码位置： 建议将 JavaScript 代码放在标签之前，以确保 HTML 元素已经加载完毕，避免出现 JavaScript 代码无法获取到 HTML 元素的情况。
时间段划分： 可以根据实际需求调整时间段的划分，以实现更精细的背景图片切换效果。
CSS 样式： 确保 .bgimg 类设置了合适的背景样式，例如 height: 100%，background-position: center 和 background-size: cover，以确保背景图片能够正确显示。
引号使用: 注意 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: 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>