Javascript 可视化二维阵列中的颜色变化_Javascript_Arrays

Javascript 可视化二维阵列中的颜色变化

javascript arrays

Javascript 可视化二维阵列中的颜色变化,javascript,arrays,Javascript,Arrays,我目前正在试验2D阵列。我现在想不出一种方法来做这件事，但我希望能够单击其中一个单元格，并将其更改为相反的颜色。为了演示，如果单击蓝色单元格，我希望它变为红色，如果单击红色单元格，则相反的操作。这是我的密码： <!DOCTYPE html> <html> <head><title>Visualizing 2D Arrays</title> <style> #stage { p

我目前正在试验2D阵列。我现在想不出一种方法来做这件事，但我希望能够单击其中一个单元格，并将其更改为相反的颜色。为了演示，如果单击蓝色单元格，我希望它变为红色，如果单击红色单元格，则相反的操作。这是我的密码：

    <!DOCTYPE html>
    <html>
<head><title>Visualizing 2D Arrays</title>
<style>
    #stage 
    {
        position: relative;
    }

    .cell
    {
        position: absolute;
        width: 30px;
        height: 30px;
        border: 1px solid black;
        background-color: blue;
    }
</style>
</head>



<body>
    <div id="stage"></div>
    <script>

        //Get a reference to the stage

        var stage = document.querySelector("#stage");

        //The 2D array that defines the pattern
        var pattern =
        [
            [1, 0, 1],
            [0, 1, 0],
            [1, 0, 1]
            ];

            //The sixe of each cell
            var SIZE = 30;

            //The space between each cell
            var SPACE = 10;

            //Display the array
            var ROWS = pattern.length;
            var COLUMNS = pattern[0].length;

            for(var row = 0; row < ROWS; row++)
            {
                for(var column = 0; column < COLUMNS; column++)
                {
                    //Create a div HTML element called cell
                    var cell = document.createElement("div");

                    //Set its CSS class to "cell"
                    cell.setAttribute("class", "cell");

                    //Add the div HTML element to the stage
                    stage.appendChild(cell);

                    //Make it black if it's a "1"
                    if(pattern[row][column] === 1)
                    {
                        cell.style.backgroundColor = "red";
                    }

                    //Position the cell in the correct place
                    //with 10 pixels of space around it
                    cell.style.top = row * (SIZE + SPACE) + "px";
                    cell.style.left = column * (SIZE + SPACE) + "px";
                }
            }

    </script>
</body>


可视化二维阵列
#舞台
{
位置：相对位置；
}
.细胞
{
位置：绝对位置；
宽度：30px；
高度：30px；
边框：1px纯黑；
背景颜色：蓝色；
}
//获得对舞台的引用
var stage=document.querySelector（“阶段”）；
//定义阵列的二维阵列
var模式=
[
[1, 0, 1],
[0, 1, 0],
[1, 0, 1]
];
//每个单元格的六
变量大小=30；
//每个单元之间的空间
var空间=10；
//显示阵列
变量行=pattern.length；
var COLUMNS=pattern[0]。长度；
对于（变量行=0；行<行；行++）
{
对于（变量列=0；列<列；列++）
{
//创建一个名为cell的div HTML元素
var cell=document.createElement（“div”）；
//将其CSS类设置为“cell”
setAttribute（“类”、“单元”）；
//将div HTML元素添加到stage
阶段：附属物（细胞）；
//如果是“1”，则将其变为黑色
if（模式[行][列]==1）
{
cell.style.backgroundColor=“红色”；
}
//将电池放置在正确的位置
//周围有10个像素的空间
cell.style.top=行*（大小+空格）+“px”；
cell.style.left=列*（大小+空格）+“px”；
}
}

为了简化问题，添加了

else

条件，其中

blue

颜色被设置为元素

要使用单击侦听器，请使用

节点

元素

的方法。还有其他附加单击侦听器的方法

addEventListener

希望第二个参数是回调函数，它是一个函数表达式，在事件上发生

单击

事件时调用

element.style.backgroundColor

将获取/设置元素的

backgroundColor

。

var stage=document.querySelector（“#stage”）；
//定义阵列的二维阵列
变量模式=[
[1, 0, 1],
[0, 1, 0],
[1, 0, 1]
];
//每个单元格的六
变量大小=30；
//每个单元之间的空间
var空间=10；
//显示阵列
变量行=pattern.length；
var COLUMNS=pattern[0]。长度；
对于（变量行=0；行<行；行++）{
对于（变量列=0；列<列；列++）{
//创建一个名为cell的div HTML元素
var cell=document.createElement（“div”）；
//将其CSS类设置为“cell”
setAttribute（“类”、“单元”）；
//将div HTML元素添加到stage
阶段：附属物（细胞）；
//如果是“1”，则将其变为黑色
if（模式[行][列]==1）{
cell.style.backgroundColor=“红色”；
}否则{
cell.style.backgroundColor=“蓝色”；
}
//将电池放置在正确的位置
//周围有10个像素的空间
cell.style.top=行*（大小+空格）+“px”；
cell.style.left=列*（大小+空格）+“px”；
cell.addEventListener（'click'，function（）{
this.style.backgroundColor=this.style.backgroundColor=='红色'？'蓝色'：'红色'；
});
}
}

#阶段{
位置：相对位置；
}
.细胞{
位置：绝对位置；
宽度：30px；
高度：30px；
边框：1px纯黑；
}