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

因此，我被安排了一次面试的任务，我正在努力完成它。
任务是：
构建一个HTML页面，您可以在其中输入一组瓷砖的尺寸（高度和宽度）并输入墙的尺寸（高度和宽度）。

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

到目前为止，我已经成功地完成了简单的数学运算，以绘制出瓷砖，但不知道从哪里开始展示墙。

<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>

最佳答案

没有比这更简单的了。您可以使用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/

关于javascript - 如何使用Java脚本构建墙壁和瓷砖的视觉表示？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/16512963/