如何修改此脚本以使用不同的颜色？

我有一个页面，有一个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

如何修改此脚本以使用不同的颜色？

回答

相关问题