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 に答える