如何用Java脚本构建墙和瓷砖的可视化表示

how to build a visual representation of a wall and tiles with java script?

本文关键字：可视化 表示 何用 Java 脚本 构建      更新时间：2023-09-26

有人给我安排了一个面试任务，我正在努力完成它。任务是:构建一个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/

相关文章：