Question

我的页面有一个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);
    });

我将不胜感激任何帮助。谢谢。

Answer 1

看起来颜色是在colourInfo中设置的。试试这个：

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

        square2id: ['#000000']

    };

Answer 2

以下设置一个数组，其中每个元素都是一个对象，为每个方块提供法线和高亮颜色。通过setInterval（）调用，changeColour（）函数将最后一个方块的颜色更改为正常，并将下一个方块更改为：

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语句只是递增索引并按顺序在数组周围循环。如果您希望方块以随机顺序更改颜色，则可以使用类似

的内容替换if语句

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

编辑：我假设上面（由于David使用了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);

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

2 个答案: