javascript - 如何使用java脚本构建墙壁和瓷砖的视觉表示？

Question

所以我被安排了一项面试任务，但我正在努力完成它。任务是:构建一个 Html 页面，您可以在其中输入一组图 block 的尺寸(高度和宽度)以及输入墙壁的尺寸(高度和宽度)。

页面将返回填充墙壁所需的瓷砖数量，然后还给出带有瓷砖的墙壁的视觉表示。

到目前为止，我已经成功地进行了简单的数学计算来计算出瓷砖，但不知道从哪里开始显示墙。

<form >

   Tile Dimensions<br />

   Width: <input type="text" id="tile_width" />cm
   height: <input type="text" id="tile_height" />cm 
   <br />
   Wall Dimensions<br />
   Width: <input type="text" id="wall_width" />cm
   height:<input type="text" id="wall_height" />cm

</form> 
   <button onclick="tileCalc()" >calculate</button>

<script language="javascript" type="text/javascript">
function tileCalc()
{
 var tileWidth = document.getElementById("tile_width").value;
 var tileHeight = document.getElementById("tile_height").value;
 var wallWidth = document.getElementById("wall_width").value;
 var wallHeight = document.getElementById("wall_height").value;;
 var tileArea = tileWidth * tileHeight;
 var wallArea = wallWidth * wallHeight;
 var noOfTiles = (wallArea/tileArea);

document.getElementById("result").innerHTML="you will need " + noOfTiles + " tiles";
}
</script>

Answer 1

没有比这更简单的了。您可以使用 for/while 循环来迭代 noOfTiles 并为每个迭代步骤创建一个 div:

var tileWidth = 100;
var tileHeight = 100;
var wallWidth = 1000;
var wallHeight = 1000;
var tileArea = tileWidth * tileHeight;
var wallArea = wallWidth * wallHeight;
var noOfTiles = (wallArea/tileArea);

for(var i = 0; i < noOfTiles; i++) {
    var div = document.createElement("div");
    div.style.width = tileWidth + "px";
    div.style.height = tileHeight + "px";
    div.innerHTML = i;
    document.body.appendChild(div);
}

http://fiddle.jshell.net/vxwSN/1/