来自square的JavaScript矩阵

时间:2015-03-30 10:21:32

标签: javascript html css matrix

大家,

我在这里遇到了一些问题。所以,我必须创建矩阵,例如5x5,并且每个索引都应该像html一样出现在正方形中。我在为矩阵创建的脚本之后创建了用于框的span模板,并将此跨度赋予每个索引以将其相乘,但它并没有正常工作。这就是我看来

enter code here
[object HTMLSpanElement][object HTMLSpanElement][object HTMLSpanElement][object HTMLSpanElement][object HTMLSpanElement]
[object HTMLSpanElement][object HTMLSpanElement][object HTMLSpanElement][object HTMLSpanElement][object HTMLSpanElement]
[object HTMLSpanElement][object HTMLSpanElement][object HTMLSpanElement][object HTMLSpanElement][object HTMLSpanElement]
[object HTMLSpanElement][object HTMLSpanElement][object HTMLSpanElement][object HTMLSpanElement][object HTMLSpanElement]
[object HTMLSpanElement][object HTMLSpanElement][object HTMLSpanElement][object HTMLSpanElement][object HTMLSpanElement]

这是我的代码

    enter code here
    <style>
        html {
            background-color: #E6E6FF;
        }
        #square{
            width: 30px;
            height: 30px;
            background: #000;
            display: inline-block;
            border: 1px solid #fff;
        }
    </style>

</head>
<body>
<div id="matrixBox">
    <span id="square"></span>
</div>

    <script>

    var x = 5;
    var y = 5;
    var matrix = [];
    var content= '';
    var matrixBox = document.getElementById("matrixBox");
    var square = document.getElementById("square");

    for (var i = 0; i < x; i++) {
        matrix[i] = [];
        for (var s = 0; s < y; s++) {
            matrix[i][s] = square;
            content += matrix[i][s];
            document.getElementById("matrixBox").innerHTML = content;
        };
        content += "<br>";
    };
    </script>
</body>

谢谢!

1 个答案:

答案 0 :(得分:0)

查看下面的代码。现在&#34; Matrix&#34;是你可以用它来计算的数组

&#13;
&#13;
<html>
  <style>
        html {
            background-color: #E6E6FF;
        }
        #square{
            width: 30px;
            height: 30px;
            background: #000;
            display: inline-block;
            border: 1px solid #fff;
			color:#fff;
			text-align: center;
			vertical-align: abs-middle;
			top: 50%;
			left: 50%;
        }
    </style>
 
</head>
<body>
<div id="matrixBox">
   
</div>

   
</body>
<script language="javascript">

    var x = 5;
    var y = 5;
    var str='';
	var matrix=new Array();
	

    for (var i = 0; i < x; i++) {
			matrix[i]=new Array();
        for (var s = 0; s < y; s++) {
			matrix[i][s]=i;
            str+=" <span id=square> "+ i + " </span>  ";
         };
        str += "<br>";
    };
	
	 document.getElementById("matrixBox").innerHTML = str;
	 alert(matrix);
    </script>
</html>
&#13;
&#13;
&#13;