我試圖改變我的背景，但它不起作用。怎麼了？

我試圖創造一些JavaScript，將改變身體的背景顏色的每一秒。我研究了它，並提出了這個代碼，但它沒有奏效。我試圖改變我的背景，但它不起作用。怎麼了？

var x; 

    function changecolors() { 
     x = 1; 
     setTimeout(change, 1000); 
    } 

    function change() { 
     if (x === 1) { 
      color = "blue"; 
      x = 2; 
     } 

     if (x === 2) { 
      color = "green"; 
      x = 3; 
     } 

     if (x === 3) { 
      color = "red"; 
      x = 1; 
     } 

     document.body.style.background = color; 
    }

這段代碼有什麼問題嗎？

來源

2017-05-06 Anonymous

這裏有幾個問題，你沒有調用'changeColors（）'函數。你也可能想使用'setInterval'而不是'setTimeout'，因爲它只會運行一次。 –

這裏我所看到的是你已經decleared的功能，但你調用的函數changecolors();？

來源

2017-05-06 11:15:25

的setTimeout（）：要執行的函數只有一次，毫秒指定次數後。

setInterval（）方法調用函數或以指定的時間間隔（以毫秒爲單位）計算表達式。

資源：https://www.w3schools.com/jsref/met_win_setinterval.asp

注：您更改x 1，2和3，我想你想改變背景顏色爲藍色，綠色，紅色1000毫秒後：

所以使用setInterval而不是setTimeout：

Full Code：

var x=1; 
 

 
setInterval (change,1000); 
 

 
function change() { 
 

 
    if (x === 1) { 
 

 
     color = "blue"; 
 

 
     x = 2; 
 

 
    } 
 

 
    else if (x === 2) { 
 

 
     color = "green"; 
 

 
     x = 3; 
 

 
    } 
 

 
    else if (x === 3) { 
 

 
    color = "red"; 
 

 
    x = 1; 
 

 
    } 
 

 
    document.body.style.background = color; 
 

 
}

來源

2017-05-06 11:29:41 Ehsan

在你原來的代碼，你的第二個和第三if S的關係被拍成else if秒;否則，你將永遠得到red。這是因爲你打1號，如果因爲x === 1，然後馬上打了第二，如果（因爲現在x === 2），最後，打到最後，如果（因爲現在x === 3）和每個函數調用結束時，你將有color === 'red'和x === 1。除此之外，如果您希望每秒鐘循環，則您必須在函數結束時重新呼叫setTimeout(change, 1000);，因爲每次調用setTimeout只觸發一次;或者，您也可以使用setInterval(change, 1000);，這將每秒自行運行。

請考慮類似這樣的事情，它將循環訪問顏色數組，然後通過遞增（然後將其重置爲0，使用%運算符）變量並訪問數組而不是使用ifs。

var x; var colors = ['blue', 'green', 'red']; function changecolors() { x = 0; setInterval(change, 1000); } function change() { document.body.style.background = colors[(x++) % colors.length]; } changecolors();

來源

2017-05-06 11:30:54 tavnab

請看看我的評論的解決方案：

var lightnumber = 0; // this variable saves the current state of the background lights 
 
var lights = [ 
 
    "#ff0000", "#ffff00", "#00ff00" 
 
]; // this variable saves all possible lights. You can also use "red", "green", "yellow" or whatever is acceptable for CSS. 
 

 
setBgColour = function() { 
 
    // at first we decide which colour shall be next, so we increase 
 
    // the lightnumber by one, except, if we are already at green, then we start over at 0 
 
    lightnumber = lightnumber == (lights.length - 1) ? 0 : lightnumber + 1; 
 
    // and here we set the light according to our lightnumber variable 
 
    document.body.style.background = lights[lightnumber]; 
 
    // and lastly, call the function again after a second 
 
    setTimeout(setBgColour, 1000); 
 
}

<h1>Traffic Light</h1> 
 

 
</br> 
 
<button id="next" onClick="setBgColour()" type="button">Next</button> 
 
</div>

來源

2017-05-06 11:50:17 Zim84

你在你的代碼已經錯誤。檢查例如，從W3CSchools

<!DOCTYPE html> 
 
<html> 
 
<body> 
 

 
<p>Click the button to wait 3 seconds, then alert "Hello".</p> 
 

 
<button onclick="myFunction()">Try it</button> 
 

 
<script> 
 
function myFunction() { 
 
    setTimeout(function(){ alert("Hello"); }, 3000); 
 
} 
 
</script> 
 

 
</body> 
 
</html>

正如你所看到的 - 設置超時是不像delay(3000)（其他語言）或類似的東西。你可以學習一些嘗試（這是行不通的），使其暫停，而不是延遲部署。你會看到它不會暫停整個腳本，但只是運行延遲內部的內容。檢查它：

<!DOCTYPE html> 
 
<html> 
 
<body> 
 

 
<p>Click the button to wait 3 seconds, then alert "Hello".</p> 
 

 
<button onclick="myFunction()">Try it</button> 
 

 
<script> 
 
function myFunction() { 
 
    setTimeout(function(){ alert("It will be first? Not!"); }, 6000); 
 
    setTimeout(function(){ alert("It will be second? Not!"); }, 2000); 
 
} 
 
</script> 
 

 
</body> 
 
</html>

現在的解決方案。

var timeout = 1000; //time of delay (in ms) 
 
var backgroundColors = ["blue", "green", "red"]; //table with colors for background 
 

 
var fingerOnColorsArr = 0; //var that'll store actual position, just like your's x var 
 

 
var action = function() //definition of function that'll change background color 
 
{ 
 
    document.body.style.background = backgroundColors[fingerOnColorsArr]; 
 
    
 
    fingerOnColorsArr++; //just go forward 
 
    
 
    //if we're out of array's reach – go back to begin 
 
    if (fingerOnColorsArr == backgroundColors.length) 
 
    { 
 
    fingerOnColorsArr = 0; 
 
    } 
 
}; 
 

 
//execute function `action` in infinite loop with interval `timeout`: 
 
setInterval(action, timeout);

可以修改前兩行和簡單地改變間隔或顏色圖案。順便說一下 - 可以縮短它，但正如我所看到的 - 你是新手，更重要的是理解代碼所做的一切。

來源

2017-05-06 11:51:51 Sylogista

我試圖改變我的背景，但它不起作用。怎麼了？

回答

相關問題