html - 每 10 秒更改一次身体背景

Question

我正在寻找一个非常简单和轻量级的代码，它每 10 秒更改一次网站的正文背景（它也可以与 css 一起使用），它应该是 jquery 和 css 的简单内容，对吧？

我怎样才能做到这一点？

Answer 1

您可以使用 JavaScript 的 setTimeout() 函数。这是一个如何使用它的示例。

对于 setTimeout()，您需要 2 个参数，一个是您的函数，另一个是整数，即超时将持续多长时间。

因此，对于您的实例，您可以执行以下操作：

$(function() {
    var newBg = ['img1.png', 'img2.jpg', 'img3.png'];
    var path="img/";
    var i = 0;

    var changeBg = setTimeout(function() {
        $('body').css({backgroundImage : 'url(' path + newBg[i] + ')'});
        if(i == newBg.length)
            i=0;
        else
            i++;
    }, 10000);
});

这将创建一个由路径指定的图像数组。因此，我创建了一个变量来检查你的 arrayList 的长度，以及你是否需要重置变量 i。

所以我希望这会有所帮助:)

Answer 2

custom-background.js 是一个轻量级的 jQuery 插件，允许用户更改网站的默认背景并将选择的背景保存到本地存储。这个插件可以很容易地添加到任何网站或网络应用程序中，而不会影响网站的性能。

https://github.com/CybrSys/custom-background.js

Answer 3

您可以使用 jQuery 轻松做到这一点。

一个简单的 JavaScript 函数，每 X 秒在两种颜色之间切换 function toggle_color(color1,color2,cycle_time,wait_time) {

setInterval(function first_color() {
    $("body").animate({
        backgroundColor: color1
    }, 1000, function () {
        setTimeout(change_color, wait_time);
    });
}, cycle_time);

function change_color() {
    $("body").animate({
        backgroundColor: color2
    }, 1000, function () {
        setTimeout(function () {}, wait_time);
    });
}
}

您可以检查在 Javascript 中每 X 秒更改一次背景颜色以进行工作演示和解释。