html - 10秒ごとに体の背景を変える

Question

ウェブサイトのボディの背景を 10 秒ごとに変更する (CSS を使用することもできます) とてもシンプルで軽量なコードを探しています。

どうやってやるの？

Answer 1

これは jQuery で簡単に行うことができます。

X 秒ごとに 2 つの色を切り替える単純な JavaScript 関数 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 秒ごとに背景色を変更するを確認できます。

Answer 2

custom-background.js は軽量の jQuery プラグインで、ユーザーが Web サイトのデフォルトの背景を変更し、選択した背景をローカル ストレージに保存できるようにします。このプラグインは、ウェブサイトのパフォーマンスを損なうことなく、任意のウェブサイトまたはウェブ アプリに簡単に追加できます。

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

Answer 3

JavaScript の setTimeout() 関数を使用できます。使用方法の例を次に示します。

setTimeout() の場合、2 つのパラメーターが必要です。1 つは関数で、もう 1 つは整数で、タイムアウトの長さです。

したがって、インスタンスでは、次のことができます。

$(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 をリセットする必要があるかどうかをチェックする変数を作成します。

だから私はそれが役立つことを願っています:)