0

所以我被安排了一个面试任务，我正在努力完成它。任务是：构建一个 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>
4

1 回答 1

2

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

于 2013-05-12T23:40:51.197 回答