JavaScript函数不能与梯度

Question

很抱歉的含糊不清的问题标题工作，

var background = [ 
    "background: linear-gradient(to left, #F0C27B, #4B1248)", 
    "background: linear-gradient(to left, #5614B0, #DBD65C)", 
    "background: linear-gradient(to left, #004FF9, #FFF94C)", 
    "background: linear-gradient(to left, #FFA17F, #00223E)", 
    "/css/1.png", 
    "/css/2.png", 
    "/css/3.png", 
    "/css/4.png" 
]; 

setInterval(function() { 
    var chosenImage = Math.floor(Math.random() * (8)); 
    if chosenImage < 4 { 
    document.body.style.backgroundColor = "url(" + background[chosenImage] + ")"; 
    } else { 
    document.body.style.backgroundImage = "url(" + background[chosenImage] + ")"; 
    } 
}, 10000); 

基本上，这（与CSS和HTML文件）慢腾腾在网站上的背景图片来显示一个随机每十秒钟。当我有代码，而无需梯度

var images = ["1.png", "2.png", ...] (up to 4) 

和setInterval的这样

setInterval(function() { 
    var chosenImage = Math.floor(Math.random() * (4)); 
    document.body.style.backgroundImage = "url(" + background[chosenImage] + ")"; 
}, 10000); 

之前，它工作得很好，但一旦我实现你在一开始的片段看到，图像停止变化而是显示我在css文件中指定的默认图像。

任何想法为什么它不随梯度变化？谢谢！

Answer 1

如何设置渐变有一些问题。

首先，您不希望在样式中包含background:，因为您已直接分配到backgroundImage和backgroundColor属性。

其次，您不想用url()包装渐变版本。字面上需要一个URL，但你要给它一个渐变。

最后，您不想使用backgroundColor，因为渐变被视为图像，所以您可以将脚本简化为如下所示。

var background = [ 
    "linear-gradient(to left, #F0C27B, #4B1248)", 
    "linear-gradient(to left, #5614B0, #DBD65C)", 
    "linear-gradient(to left, #004FF9, #FFF94C)", 
    "linear-gradient(to left, #FFA17F, #00223E)", 
    "url(/css/1.png)", 
    "url(/css/2.png)", 
    "url(/css/3.png)", 
    "url(/css/4.png)" 
]; 

setInterval(function() { 
    var chosenImage = Math.floor(Math.random() * 8); 

    document.body.style.background = background[ chosenImage ]; 
}, 10000); 

Answer 2

有几个问题你setInterval()功能：

周围的测试条件

对于background数组的第一个四个要素

• 你错过了括号，你设置的背景图片到"url("+[element]+")"，但这些元素不是图像。相反，请将style直接设置为该值。

下应该做的伎俩：

setInterval(function() { 
    var chosenImage = Math.floor(Math.random() * (8)); 
    if (chosenImage < 4) { 
     document.body.style = background[chosenImage]; 
    } else { 
     document.body.style.backgroundImage = "url(" + background[chosenImage] + ")"; 
    } 
}, 10000); 

这应该做的伎俩。