如何在 div 中动态添加 div,直到父 div 的宽度和高度为 full/completed
How to add div's inside a div dynamically until the width and height of parent div is full/completed
背景: 我正在制作一个网页,用户将在其中输入瓷砖宽度和高度以及地板宽度和高度。
地板宽度和高度用于计算地板面积。
瓷砖输入以英寸为单位,地板输入以英尺为单位。
技术信息:我已将 1 英尺等于 60 像素和 1 英寸等于 5 像素用于计算。
我现在在哪里?
现在我一直在绘制 (child div's) 区域 (parent div) 中的所有瓷砖].现在我使用简单的 for
循环来制作瓷砖 (div's).
现在输出是这样的...
我想要什么? 好吧,我正在尝试实现一项功能,当用户单击“计算”按钮时,he/she 会看到地板的设计。 稍后我会着色和添加图案。
输出应该是这样的(不好意思,如果边框不对齐,这是用Windows Paint画的):
代码:
$(document).ready(function () {
$("#btnCalculate").click(function (e) {
e.preventDefault();
$("#area").empty();
const foot = 60, inch = 5;
let tileW = parseFloat($("#tileWidth").val());
let tileH = parseFloat($("#tileHeight").val());
let areaW = parseFloat($("#areaWidth").val());
let areaH = parseFloat($("#areaHeight").val());
$("#area").css("height", (foot * areaH));
$("#area").css("width", (foot * areaW));
for (let r = 0; r<10 ; r++) {
// const element = array[r];
$("#area").append("<div id='tile_"+r+"' style='width:"+((inch * tileW))+"px; height:"+((inch * tileH))+"px;' class='border_color'> </div>");
}
});
});
#area {
border: 1px solid black;
height: 25px;
width: 25px;
}
.border_color{
/* border: 1px solid black; */
outline: 1px solid; /* use instead of border */
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>Tile Width (inches): </p><input type="numbers" id ="tileWidth" placeholder="Tile Width" value="6">
<p>Tile Height (inches): </p><input type="numbers" id ="tileHeight" placeholder="Tile Height" value="4">
<br>
<p>Area Width (foot): </p><input type="numbers" id ="areaWidth" placeholder="Area Width" value="11.5">
<p>Area Height (foot): </p><input type="numbers" id ="areaHeight" placeholder="Area Height" value="6.5">
<button id="btnCalculate" >Calculate</button>
<div id="area">
</div>
Fiddle 的外部 Link:https://jsfiddle.net/22gLkguL/
我已经尝试过,将所有这些存档但失败了..!
有人可以帮助我或指导我走正确的道路吗?
使用 display: flex; flex-wrap: wrap
作为区域元素。
并计算 Tiles 的数量 ---
(areaWidthInPixels/tileWidthinPixels) *
(areaHeightInPixels/tileHeightinPixels)
$(document).ready(function () {
$("#btnCalculate").click(function (e) {
e.preventDefault();
$("#area").empty();
const foot = 60, inch = 5;
let tileW = parseFloat($("#tileWidth").val());
let tileH = parseFloat($("#tileHeight").val());
let areaW = parseFloat($("#areaWidth").val());
let areaH = parseFloat($("#areaHeight").val());
$("#area").css("height", (foot * areaH));
$("#area").css("width", (foot * areaW));
let noOfTiles = Math.floor( ((foot * areaW)/(inch * tileW)) )* Math.floor( ((foot * areaH)/(inch * tileH)) );
alert("noOf TIles :: " + noOfTiles);
for (let r = 1; r <= noOfTiles ; r++) {
// const element = array[r];
var bgColor = r % 2 == 0 ? "red" : "green";
$("#area").append("<div id='tile_"+r+"' style='width:"+((inch * tileW))+"px; height:"+((inch * tileH))+"px; background-color: " + bgColor + "'' class='border_color'> </div>");
}
});
});
#area {
border: 1px solid black;
height: 25px;
width: 25px;
display: flex;
flex-wrap: wrap;
}
.border_color{
/* border: 1px solid black; */
outline: 0px solid; /* use instead of border */
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>Tile Width (inches): </p><input type="numbers" id ="tileWidth" placeholder="Tile Width" value="6">
<p>Tile Height (inches): </p><input type="numbers" id ="tileHeight" placeholder="Tile Height" value="4">
<br>
<p>Area Width (foot): </p><input type="numbers" id ="areaWidth" placeholder="Area Width" value="11.5">
<p>Area Height (foot): </p><input type="numbers" id ="areaHeight" placeholder="Area Height" value="6.5">
<button id="btnCalculate" >Calculate</button>
<div id="area">
</div>
使用display: flex
和flex-wrap: wrap
#area {
border: 1px solid black;
height: 25px;
width: 25px;
display: flex;
flex-wrap: wrap;
align-content: flex-start;
}
并计算每个边(宽度或高度)最多可以填充的div
个数。
$(document).ready(function() {
$("#btnCalculate").click(function(e) {
e.preventDefault();
$("#area").empty();
const foot = 60,
inch = 5;
let tileW = parseFloat($("#tileWidth").val());
let tileH = parseFloat($("#tileHeight").val());
let areaW = parseFloat($("#areaWidth").val());
let areaH = parseFloat($("#areaHeight").val());
var areaHeight = (foot * areaH)
var areaWidth = (foot * areaW)
var divHeight = (inch * tileH)
var divWidth = (inch * tileW)
$("#area").css("height", areaHeight);
$("#area").css("width", areaWidth);
var nums = Math.floor(areaWidth/divWidth) * Math.floor(areaHeight/divHeight)
for (let r = 0; r < nums; r++) {
var $div = $('<div>', {
id: 'tile_' + r,
class: 'border_color',
height: divHeight,
width: divWidth,
})
$("#area").append($div);
}
});
});
#area {
border: 1px solid black;
height: 25px;
width: 25px;
display: flex;
flex-wrap: wrap;
align-content: flex-start;
}
.border_color {
outline: 1px solid;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>Tile Width (inches): </p><input type="numbers" id="tileWidth" placeholder="Tile Width" value="6">
<p>Tile Height (inches): </p><input type="numbers" id="tileHeight" placeholder="Tile Height" value="4">
<br>
<p>Area Width (foot): </p><input type="numbers" id="areaWidth" placeholder="Area Width" value="11.5">
<p>Area Height (foot): </p><input type="numbers" id="areaHeight" placeholder="Area Height" value="6.5">
<button id="btnCalculate">Calculate</button>
<div id="area">
</div>
背景: 我正在制作一个网页,用户将在其中输入瓷砖宽度和高度以及地板宽度和高度。 地板宽度和高度用于计算地板面积。 瓷砖输入以英寸为单位,地板输入以英尺为单位。
技术信息:我已将 1 英尺等于 60 像素和 1 英寸等于 5 像素用于计算。
我现在在哪里?
现在我一直在绘制 (child div's) 区域 (parent div) 中的所有瓷砖].现在我使用简单的 for
循环来制作瓷砖 (div's).
现在输出是这样的...
我想要什么? 好吧,我正在尝试实现一项功能,当用户单击“计算”按钮时,he/she 会看到地板的设计。 稍后我会着色和添加图案。
输出应该是这样的(不好意思,如果边框不对齐,这是用Windows Paint画的):
代码:
$(document).ready(function () {
$("#btnCalculate").click(function (e) {
e.preventDefault();
$("#area").empty();
const foot = 60, inch = 5;
let tileW = parseFloat($("#tileWidth").val());
let tileH = parseFloat($("#tileHeight").val());
let areaW = parseFloat($("#areaWidth").val());
let areaH = parseFloat($("#areaHeight").val());
$("#area").css("height", (foot * areaH));
$("#area").css("width", (foot * areaW));
for (let r = 0; r<10 ; r++) {
// const element = array[r];
$("#area").append("<div id='tile_"+r+"' style='width:"+((inch * tileW))+"px; height:"+((inch * tileH))+"px;' class='border_color'> </div>");
}
});
});
#area {
border: 1px solid black;
height: 25px;
width: 25px;
}
.border_color{
/* border: 1px solid black; */
outline: 1px solid; /* use instead of border */
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>Tile Width (inches): </p><input type="numbers" id ="tileWidth" placeholder="Tile Width" value="6">
<p>Tile Height (inches): </p><input type="numbers" id ="tileHeight" placeholder="Tile Height" value="4">
<br>
<p>Area Width (foot): </p><input type="numbers" id ="areaWidth" placeholder="Area Width" value="11.5">
<p>Area Height (foot): </p><input type="numbers" id ="areaHeight" placeholder="Area Height" value="6.5">
<button id="btnCalculate" >Calculate</button>
<div id="area">
</div>
Fiddle 的外部 Link:https://jsfiddle.net/22gLkguL/
我已经尝试过,将所有这些存档但失败了..! 有人可以帮助我或指导我走正确的道路吗?
使用 display: flex; flex-wrap: wrap
作为区域元素。
并计算 Tiles 的数量 ---
(areaWidthInPixels/tileWidthinPixels) * (areaHeightInPixels/tileHeightinPixels)
$(document).ready(function () {
$("#btnCalculate").click(function (e) {
e.preventDefault();
$("#area").empty();
const foot = 60, inch = 5;
let tileW = parseFloat($("#tileWidth").val());
let tileH = parseFloat($("#tileHeight").val());
let areaW = parseFloat($("#areaWidth").val());
let areaH = parseFloat($("#areaHeight").val());
$("#area").css("height", (foot * areaH));
$("#area").css("width", (foot * areaW));
let noOfTiles = Math.floor( ((foot * areaW)/(inch * tileW)) )* Math.floor( ((foot * areaH)/(inch * tileH)) );
alert("noOf TIles :: " + noOfTiles);
for (let r = 1; r <= noOfTiles ; r++) {
// const element = array[r];
var bgColor = r % 2 == 0 ? "red" : "green";
$("#area").append("<div id='tile_"+r+"' style='width:"+((inch * tileW))+"px; height:"+((inch * tileH))+"px; background-color: " + bgColor + "'' class='border_color'> </div>");
}
});
});
#area {
border: 1px solid black;
height: 25px;
width: 25px;
display: flex;
flex-wrap: wrap;
}
.border_color{
/* border: 1px solid black; */
outline: 0px solid; /* use instead of border */
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>Tile Width (inches): </p><input type="numbers" id ="tileWidth" placeholder="Tile Width" value="6">
<p>Tile Height (inches): </p><input type="numbers" id ="tileHeight" placeholder="Tile Height" value="4">
<br>
<p>Area Width (foot): </p><input type="numbers" id ="areaWidth" placeholder="Area Width" value="11.5">
<p>Area Height (foot): </p><input type="numbers" id ="areaHeight" placeholder="Area Height" value="6.5">
<button id="btnCalculate" >Calculate</button>
<div id="area">
</div>
使用display: flex
和flex-wrap: wrap
#area {
border: 1px solid black;
height: 25px;
width: 25px;
display: flex;
flex-wrap: wrap;
align-content: flex-start;
}
并计算每个边(宽度或高度)最多可以填充的div
个数。
$(document).ready(function() {
$("#btnCalculate").click(function(e) {
e.preventDefault();
$("#area").empty();
const foot = 60,
inch = 5;
let tileW = parseFloat($("#tileWidth").val());
let tileH = parseFloat($("#tileHeight").val());
let areaW = parseFloat($("#areaWidth").val());
let areaH = parseFloat($("#areaHeight").val());
var areaHeight = (foot * areaH)
var areaWidth = (foot * areaW)
var divHeight = (inch * tileH)
var divWidth = (inch * tileW)
$("#area").css("height", areaHeight);
$("#area").css("width", areaWidth);
var nums = Math.floor(areaWidth/divWidth) * Math.floor(areaHeight/divHeight)
for (let r = 0; r < nums; r++) {
var $div = $('<div>', {
id: 'tile_' + r,
class: 'border_color',
height: divHeight,
width: divWidth,
})
$("#area").append($div);
}
});
});
#area {
border: 1px solid black;
height: 25px;
width: 25px;
display: flex;
flex-wrap: wrap;
align-content: flex-start;
}
.border_color {
outline: 1px solid;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>Tile Width (inches): </p><input type="numbers" id="tileWidth" placeholder="Tile Width" value="6">
<p>Tile Height (inches): </p><input type="numbers" id="tileHeight" placeholder="Tile Height" value="4">
<br>
<p>Area Width (foot): </p><input type="numbers" id="areaWidth" placeholder="Area Width" value="11.5">
<p>Area Height (foot): </p><input type="numbers" id="areaHeight" placeholder="Area Height" value="6.5">
<button id="btnCalculate">Calculate</button>
<div id="area">
</div>