Question

可能重复：
Making tiles on a web page light up different colours in a sequence

我目前正在尝试点亮4x4网格内页面上的特定图块。

我在页面上有网格但是指定要点亮的图块没有。请有人帮助我实现这一目标。

HTML code：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<LINK REL=StyleSheet HREF="style.css" TYPE="text/css" MEDIA=screen>
<SCRIPT LANGUAGE="JavaScript" SRC="script.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: [
                    '#000000'
                    ],

        square2id: [
                    '#ffffff'
                    ],

    };

    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

您只为每个id定义了一种颜色，因此这完全没有意义。你将每秒调用一个方法，除了将background-color设置为已有的颜色之外什么都不做。只有第一个电话实际上会做任何事情。如果它应该在不同颜色之间来回循环，那么你需要在颜色数组中有更多的值。

尝试使网页上的图块按顺序点亮

1 个答案: