如何在响应式设计中实现根据时间变更背景图片？-JavaScript中文网-JavaScript教程资源分享门户

在响应式设计中，根据时间动态更改背景图片是一种很酷的效果。例如，白天显示一个绿色草坪的照片，夜晚则显示一个星空的照片。在本文中，我们将介绍如何使用 HTML、CSS 和 JavaScript 来实现这样一个效果。

准备工作

在开始实现之前，需要准备以下材料：

背景图片：你可以使用任何适合你设计的图片，但最好是水平或垂直无限循环的图形，以便无缝衔接。
时间的 API：获取当前时间需要使用 JavaScript，我们将根据当前时间选择不同的背景图片。为了获取当前时间，我们可以使用 JavaScript 内置的 Date 对象。

HTML 结构

为了方便操作和更改背景图片，我们将使用一个 div元素来包装整个页面。这个 div 的 ID 属性设置为wrapper，然后将一个包装元素作为HTML 页面的根元素。

-- -------------------- ---- -------
--------- -----
----- -------------
------
------ ----------------
----------------------
------ ---------------- -----------------
   -------
------
    ---- -------------
        ---- --------- ---
    ------
    ------- -------------------------
-------
-------

CSS 样式

首先，我们将使用 CSS 设置 #wrapper 元素的背景图片为我们默认的背景图片，并添加一个过渡效果使图片在更改时更流畅，同时我们设置背景图片适应窗口大小。

#wrapper {
    background-image: url('default-bg-img.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    transition: all 0.5s ease-in-out;
}

接下来，我们将添加用于更改背景图片的 CSS 类。我们使用 HTML 的 data 属性存储一段时间的开始和结束时这个类所应用的背景图片，并使用 JavaScript 来根据时间应用不同的 CSS 类。

#wrapper.day {
    background-image: url('day-bg-img.jpg');
}

#wrapper.night {
    background-image: url('night-bg-img.jpg');
}

JavaScript 代码

首先，我们定义两个变量 startHour 和 endHour，它们分别表示我们要显示白天背景和黑夜背景的小时。在这个例子中，我们假设白天是从早晨6点到晚上9点，夜间是从晚上9点到早晨6点。

var startHour = 6;
var endHour = 21;

然后我们创建一个函数 updateBackground()，该函数将根据当前时间添加或删除 day 和 night 类以更改背景图片。

-- -------------------- ---- -------
-------- ------------------ -
    --- --- - --- -------
    --- ---- - ---------------

    ------- -- --------- -- ---- - ---------
        --------------------------------------------------------
        -------------------------------------------------------------
    - ---- -
        -----------------------------------------------------------
        ----------------------------------------------------------
    -
-

最后，我们将使用 setInterval()函数定时调用 updateBackground() 函数。在本例中，我们将每分钟调用此函数；这意味着如果用户在凌晨12点浏览网站，则浏览器在下一分钟内将检查时间并更改背景图片。

setInterval(updateBackground, 60000); // 每分钟调用一次 updateBackground 函数

完整代码

HTML

-- -------------------- ---- -------
--------- -----
----- -------------
------
    ----- ----------------
    ---------------------
    ----- ---------------- -----------------
-------
------
    ---- -------------
        ---- --------- ---
    ------
    ------- -------------------------
-------
-------

CSS

-- -------------------- ---- -------
-------- -
    ----------------- --------------------------
    ------------------ ----------
    ---------------- ------
    -------------------- ------ -------
    ----------- --- ---- ------------
-

------------ -
    ----------------- ----------------------
-

-------------- -
    ----------------- ------------------------
-

JavaScript

-- -------------------- ---- -------
--- --------- - --
--- ------- - ---

-------- ------------------ -
    --- --- - --- -------
    --- ---- - ---------------

    ------- -- --------- -- ---- - ---------
        --------------------------------------------------------
        -------------------------------------------------------------
    - ---- -
        -----------------------------------------------------------
        ----------------------------------------------------------
    -
-

----------------------------- ------- -- ------- ---------------- --

结论

通过本文的介绍，你学会了如何在响应式设计中实现根据时间变更背景图片。你可以自由地根据自己的需求更改时间和背景图片，以创建适合你的独特效果。通过阅读这篇文章，你不仅学习了 HTML、CSS 和 JavaScript，而且还能掌握如何使用数据属性实现动态样式更改的技巧，这对你今后的 Web 开发工作具有很大的指导意义。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/67382491317fbffedf0e7be1