如何修改此腳本以使用不同的顏色？

我有一個頁面，有一個4x4網格和兩個正方形顏色變化一個白色和另一個黑色。我需要知道如何修改腳本以使白色出現在黑色之前。如何修改此腳本以使用不同的顏色？

請能有人幫我解決這個問題，將代碼粘貼如下：

HTML：

<html> 
<head> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"> </script> 
<LINK REL=StyleSheet HREF="style1.css" TYPE="text/css" MEDIA=screen> 
<SCRIPT LANGUAGE="JavaScript" SRC="script1.js"> </SCRIPT> 
</head> 
<body> 
<div class="container">  
<div class="box spacing"></div>  
<div class="box spacing"></div>  
<div class="box spacing"></div>  
<div id="square1id" class="box"></div>  
<div class="box spacing"></div>  
<div class="box spacing"></div>  
<div id="square2id" class="box spacing"></div>  
<div class="box"></div>  
<div class="box spacing"></div>  
<div class="box spacing"></div>  
<div class="box spacing"></div>  
<div class="box"></div>  
<div class="box spacing"></div>  
<div class="box spacing"></div>  
<div class="box spacing"></div>  
<div class="box"></div> </div> 
</body> 
</html>

CSS：

body{ 
    background-color:#000000; 
    margin:0; 
    padding:0; 
} 

h1{ 
    color:#ffffff; 
    text-align:center; 
} 

.container{ 
    overflow:hidden; 
    width:860px; 
    margin-left:250px; 
    margin-top:20px; 
} 
.box{ 
    width:210px; 
    height:120px; 
    float:left; 
    background-color:#4D4D4D; 
    margin-bottom:3px; 
} 

.spacing{ 
    margin-right:3px; 
}

的JavaScript：

$(document).ready(function(){ 

var colourinfo = { 
    square1id: [ 
       '#FFE600' 


       ], 

    square2id: [ 
       '#008B45' 


       ] 

}; 

var count = 0; 

var changecol = function(){ 
    $.each(colourinfo, function(tileid, colarray){ 
    $('#'+tileid).css('background-color', colarray[count%colarray.length]); 
}); 
    count++; 
    }; 
    setInterval(changecol, 1000); 
    });

我會app請回復任何幫助。謝謝。

來源

2011-06-08 David

以下設置一個數組，其中每個元素是一個對象，給出每個正方形的正常和高光顏色。

var colourInfo = [ 
    {id : "square1id", 
     colourNormal : "#4D4D4D", 
     colourHighlight : "#FFE600"}, 
    {id : "square2id", 
     colourNormal : "#4D4D4D", 
     colourHighlight : "#008B45"} 
    // add your other squares' info here 
    ]; 

var index = 0; 
var changeColour = function(){ 
    $('#'+colourInfo[index]["id"]).css('background-color', 
        colourInfo[index]["colourNormal"]); 
    if (++index >= colourInfo.length) 
     index = 0; 
    $('#'+colourInfo[index]["id"]).css('background-color', 
        colourInfo[index]["colourHighlight"]); 
} 

setInterval(changeColour,1000);

注：在changeColour（中間的if語句）函數只是增加通過的setInterval（）的changeColour（）函數改變了最後一個方塊的顏色恢復正常，下一個方塊突出調用索引並依次在數組周圍和周圍循環。如果你想平方改變以隨機順序顏色，你可以像

index = Math.floor(Math.random() * colourInfo.length);

編輯的東西代替if語句：我上面的假設（由於大衛的使用的setInterval（）的）這個想法是保持無限期地改變顏色。現在我發現這個想法是在我建議進行以下（未經測試）更改時閃爍每個方塊。（是的，我知道這會變得笨重，但我不會從頭開始困擾，我認爲重點是給大衛一些想法，他可以如何這樣做，而不是爲他做他的工作，並提出一個精美的單元測試和記錄的傑作）。

var index = -1; 
var changeColour = function(){ 
    if (index > -1) { 
     $('#'+colourInfo[index]["id"]).css('background-color', 
        colourInfo[index]["colourNormal"]); 
    } 
    if (++index < colourInfo.length) { 
     $('#'+colourInfo[index]["id"]).css('background-color', 
         colourInfo[index]["colourHighlight"]); 
     setTimeout(changeColour,1000); 
    } 
} 
setTimeout(changeColour,1000);

來源

2011-06-08 23:46:12 nnnnnn

非常感謝您的幫助，但這似乎不適用於我。 – David 2011-06-09 00:12:15

@David - 抱歉，我的代碼中存在拼寫錯誤（我在兩行完成了一個有趣的複製粘貼，並以colourInfo [colourInfo ['而不是'colourInfo ['結尾] [我想我已經修復它現在在任何情況下，這裏是一個工作示例：http://jsfiddle.net/kUaAW/（注意：我將您的HTML和CSS直接複製到jsfiddle而不更改它們，所以我沒有打擾糾正醜陋的格式默認情況下發生在粘貼上，但你關心的是JS ......） - 不要僅僅將它複製到你的項目中，通讀它並確保你明白它。 – nnnnnn 2011-06-09 00:30:36

非常感謝你的幫助非常非常感謝。如果你可以，請你如此友好，讓我知道如果有可能停止序列一旦它已經通過。謝謝 – David 2011-06-09 00:49:59

看起來顏色是在colourInfo中設置的。試試這個：

var colourinfo = { 
     square1id: ['#FFFFFF'], 

     square2id: ['#000000'] 

    };

來源

2011-06-08 23:34:01 Brian

對不起，我知道顏色在哪裏，我需要更改腳本以使square1id出現在square2id之前。謝謝 – David 2011-06-08 23:39:01

你不能只修改HTML並交換兩個div的位置嗎？ – Brian 2011-06-09 00:20:23

如何修改此腳本以使用不同的顏色？

回答

相關問題