Question

我决定制作一个每10秒钟后改变身体背景图像的功能。

function Background()
{
    var Background_Stage;
    switch(Background_Stage)
    {
        case 0:
        {
            $('body').css.('background', '#000 url(../../Styles/Callum_Project1/Images/BACKGROUND_1_TEST.png) no-repeat');
            Background_Stage++;
            setInterval(function(){Background()},10000);
        }
        case 1:
        {
            $('body').css.('background', '#000 url(../../Styles/Callum_Project1/Images/BACKGROUND_2_TEST.png) no-repeat');
            Background_Stage++;
            setInterval(function(){Background()},10000);
        }
        case 2:
        {
            $('body').css.('background', '#000 url(../../Styles/Callum_Project1/Images/BACKGROUND_2_TEST.png) no-repeat');
            Background_Stage = 0;//Reset 
            setInterval(function(){Background()},10000);
        }
    }
}

但是，我做了类似的事情

<body onload="Background()"></body>

它似乎没有做任何事情，这可能是一个愚蠢的要求帮助，但这是我在学习JavaScript时所做的第一件事，我应该说我在大多数情况下都使用了jQuery。

Answer 1

您的代码存在一些问题：

在对Background的调用之间，Background_Stage的值不会持久存在，并且在任何情况下，您都不会为Background_Stage赋值。
使用setTimeout而不是setInterval。 setTimeout将在指定时间结束时调用该函数一次。 setInterval将一次又一次地调用相同的函数，直到明确取消。你拥有它的方式，你最终会运行很多并发的setIntervals。
你不需要'。'在css和下面的括号之间。

最后，尽量不要重复自己，这意味着如果你发现自己一遍又一遍地输入相同的语句，那么你可以使代码更清晰。类似的东西：

(function() 
{
    var bgCounter = 0,
        backgrounds = [
           "../../Styles/Callum_Project1/Images/BACKGROUND_1_TEST.png",
           "../../Styles/Callum_Project1/Images/BACKGROUND_2_TEST.png",
           "../../Styles/Callum_Project1/Images/BACKGROUND_3_TEST.png"
        ];
    function changeBackground()
    {
        bgCounter = (bgCounter+1) % backgrounds.length;
        $('body').css('background', '#000 url('+backgrounds[bgCounter]+') no-repeat');
        setTimeout(changeBackground, 10000);

    }
    changeBackground();
})();

现在更改背景网址或添加更多内容是编辑背景数组的一项简单工作。

Answer 2

你也可以试试这个：

function Background(){
    var imgs = [
            "../../Styles/Callum_Project1/Images/BACKGROUND_1_TEST.png",
            "../../Styles/Callum_Project1/Images/BACKGROUND_2_TEST.png",
            "../../Styles/Callum_Project1/Images/BACKGROUND_3_TEST.png"
        ],
        len = imgs.length,
        idx = -1;

    setInterval(function(){
        idx = (idx+1)%len;
        $("body").css("background", "#000 url("+imgs[idx]+")");
    }, 10000);
}

Answer 3

每次调用背景时，都会实例化一个名为Background_Stage的新本地变量，其值为undefined。这与您的任何switch选项都不匹配。

你需要在函数之外声明变量（因此它在函数调用之间持续存在）并给它一个起始值。

Answer 4

您的Backgroud_Stage未初始化
您的setInterval展示位置会导致非常严重的问题
语法也无效。

总的来说，您的代码可以更简单：

var Stage = 0;
setInterval(function() {
    var bg = '#000 url(../../Styles/Callum_Project1/Images/BACKGROUND_'+(Stage+1)+'_TEST.png) no-repeat';
    document.body.style.background = bg;
    Stage = ++Stage % 3;
}, 10000);

用jQuery改变身体背景图像

4 个答案: