使用數組顯示div元素。 JavaScript的

Question

我知道如何使用css和html來顯示簡單的形狀，但是我想使用數組來顯示形狀。 因為我的下一個游戲項目將包括我必須一遍又一遍地復制形狀。 我對數組的理解很薄弱，我已經閱讀了w3上的所有內容，這就是到目前為止我在顯示簡單行方面所能想到的。

<!DOCTYPE html>
<html>
<body>
<p id="lineDiv"></p>

<script>
var line = {width: 2px, height: 7px, color: red};
lineArray[0] = line;
document.getElementById("lineDiv").innerHTML = lineArray[0];
</script>
</body>
</html>

1-我的第一個問題是為什么行顯示不顯示？ 2-我的第二個問題是，如果我想根據要選擇顯示線條的x / y軸顯示線條的方式，想生成多條線條，該怎么辦？

請不要在此答案上包含jquery，只需使用基本的JavaScript； 我什至還沒有開始閱讀w3上的jquery東西。

Answer 1

這里有幾件事

始終使用var聲明對象。

數組元素不是在JavaScript中動態分配的，因此請使用
array.push 。

在JSON對象文字串值必須使用引號，單（被分配'1px' ）或雙（ "1px" ）。

使用JSON.stringify在瀏覽器中查看JSON對象數據。

<!DOCTYPE html>
<html>
<body>
<p id="lineDiv"></p>

<script>
var line = {width: '2px', height: '7px', color: 'red'}; // set literal string values using quotes
var lineArray = []; //declare the array
lineArray.push(line); //add to the array
document.getElementById("lineDiv").innerHTML = JSON.stringify(lineArray[0]); //convert object to string
</script>
</body>
</html>

更新
為了用HTML在屏幕上渲染實線，您需要使用Canvas 。 這是一個很小的例子，但足以幫助您指出正確的方向。 抱歉，您之前未清楚了解自己的意圖。

<!DOCTYPE html>
<html>
    <head>
        <script>
            var main = function () {
                var c = document.getElementById('c'),
                    ctx = c.getContext('2d'),
                    lineArray = [];
                lineArray.push({x: 10, y: 10, x2: 100, y2: 10, color: 'red'});
                lineArray.push({x: 10, y: 100, x2: 150, y2: 100, color: 'blue'});
                lineArray.push({x: 10, y: 150, x2: 200, y2: 150, color: 'green'});
                for (i = 0; i < lineArray.length; ++i) {
                    ctx.beginPath();
                    ctx.moveTo(0,0);
                    ctx.moveTo(lineArray[i].x, lineArray[i].y);
                    ctx.lineTo(lineArray[i].x2, lineArray[i].y2);
                    ctx.strokeStyle = lineArray[i].color;
                    ctx.stroke();
                }
            };
        </script>    
    </head>
    <body onload="main()">
        <canvas id="c"></canvas>
    </body>
</html>

Answer 2

不確定要做什么，但需要使用style屬性更改css

 document.getElementById("lineDiv").style.backgroundColor = "red"; document.getElementById("lineDiv").style.width = "100px"; document.getElementById("lineDiv").style.height = "7px";

 <body> <div id="lineDiv"></div> </body>

使用數組顯示div元素。 JavaScript的

問題描述

2 個解決方案

解決方案1
3 已采納 2017-04-06 01:14:07

解決方案2
1 2017-04-06 01:28:42

使用數組顯示div元素。 JavaScript的

問題描述

2 個解決方案

解決方案1 3 已采納 2017-04-06 01:14:07

解決方案2 1 2017-04-06 01:28:42

解決方案1
3 已采納 2017-04-06 01:14:07

解決方案2
1 2017-04-06 01:28:42