用css定期更改圓圈的背景

我想每3秒更改一次每個圓的顏色。

3 Seconds -> 1 Circle Color goes Orange 
6 Seconds -> 2 Circle Color goes Orange 
9 Seconds -> 3 Circle Color goes Orange 
12 Seconds -> 1,2,3 Circle Color goes White 

15 Seconds -> 1 Circle Color goes Orange 
18 Seconds -> 2 Circle Color goes Orange 
21 Seconds -> 3 Circle Color goes Orange 
24 Seconds -> 1,2,3 Circle Color goes White

這是循環。我遇到的問題是，在12秒鐘後，並非所有的圈子都變白了。我正在使用設置的Interval函數來執行此操作。

this.boton1 = function(){ 
    var container = document.getElementById('circle1'); 
    container.style.background = '#FF7700'; 
}; 

this.boton4 = function(){ 
    var container = document.getElementById('circle1'); 
    container.style.background = '#FFFFFF'; 
}; 

setInterval(boton1,3000); 
setInterval(boton4,12000);

我猜我正在用設置的間隔管理錯誤。我有一個DEMO HERE顯示結果。

在此先感謝

更新

如果有人需要的解決方案。這裏是DEMO update

來源

2013-10-24 Diego

只使用一個的setInterval調用。 – fred02138

演示不顯示任何內容......未捕獲ReferenceError：未定義5:54 未捕獲ReferenceError：未定義remoteWindow –

我更新鏈接。這是我的錯誤。 – Diego

問題是你正在使用setInterval。這意味着每隔3秒鐘就會變成橙色。但是12％3 = 0。沒有人知道什麼會起作用第一個setInterval（..，12000）或setInterval（..，3000）。更改12000或12500，恕我直言，使用的setTimeout（樣品，3000）其中樣品就像一個計數器，而不是兩個區間，這將創建一個競爭條件

function sample(){ 
    counter++; 
    if (counter % 4 ==0){ 
    //circles go white 
    } else { 
    //circles go orange 
    } 
    setTimeout(sample,3000); 
}

來源

2013-10-24 18:09:58 unconnected

用css定期更改圓圈的背景

回答

相關問題