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); 

這應該做的伎倆。