Здесь скоро появится калькулятор строительных материалов
А пока вы можете воспользоваться ссылкой
<!DOCTYPE html>
<html style="height: 100%" lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Калькулятор</title>
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi"
crossorigin="anonymous"
/>
<style type="text/css">
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
</style>
</head>
<body style="height: 100%">
<div class="container" style="height: 100%">
<div class="row justify-content-center" style="height: 100%">
<div class="col-lg-9 col-md-11 col-sm-12 col-xs-12 mt-5 bt-5">
<!--Контейнер для формы калькулятора-->
<div
class="card align-self-center"
style="--bs-card-border-radius: 0"
>
<div class="card-header text-bg-warning">
<h5
style="font-size: 1.9rem; font-weight: 400"
class="text-center mt-2 mb-0 pb-0"
>
Калькулятор
</h5>
</div>
<div class="card-body">
<!-- Форма с инпутами -->
<form id="issueform" name="issueform">
<div id="width" class="mb-3 text-center">
<div class="mb-3" style="font-size: 1.4rem">
<label>Толщина стен</label>
</div>
<div class="form-check form-check-inline">
<input
checked="true"
class="form-check-input"
type="radio"
name="flexRadioDefault"
id="flexRadioDefault1"
value="100"
/>
<label class="form-check-label" for="flexRadioDefault1">
100
</label>
</div>
<div class="form-check form-check-inline">
<input
class="form-check-input"
type="radio"
name="flexRadioDefault"
id="flexRadioDefault2"
value="150"
/>
<label class="form-check-label" for="flexRadioDefault1">
150
</label>
</div>
<div class="form-check form-check-inline">
<input
class="form-check-input"
type="radio"
name="flexRadioDefault"
id="flexRadioDefault3"
value="200"
/>
<label class="form-check-label" for="flexRadioDefault1">
200
</label>
</div>
<div class="form-check form-check-inline">
<input
class="form-check-input"
type="radio"
name="flexRadioDefault"
id="flexRadioDefault4"
value="240"
/>
<label class="form-check-label" for="flexRadioDefault1">
240
</label>
</div>
<div class="form-check form-check-inline">
<input
class="form-check-input"
type="radio"
name="flexRadioDefault"
id="flexRadioDefault5"
value="300"
/>
<label class="form-check-label" for="flexRadioDefault1">
300
</label>
</div>
<div class="form-check form-check-inline">
<input
class="form-check-input"
type="radio"
name="flexRadioDefault"
id="flexRadioDefault6"
value="400"
/>
<label class="form-check-label" for="flexRadioDefault1">
400
</label>
</div>
</div>
<div class="mb-5 mt-4">
<div class="row g-3">
<div class="col-6" style="align-items: left">
<label for="wallLength" class="col-form-label"
>Общая длинна газобетонных стен</label
>
</div>
<div class="col-6">
<div class="input-group">
<input
id="wallLength"
width="10px"
type="number"
class="form-control"
type="number"
min="1"
max="100000"
required
placeholder="0"
id="exampleInputEmail1"
aria-describedby="emailHelp"
/>
<span class="input-group-text">м</span>
</div>
</div>
</div>
</div>
<div class="mb-5">
<div class="row g-3">
<div class="col-6" style="align-items: left">
<label for="averageWallLength" class="col-form-label"
>Средняя высота стен</label
>
</div>
<div class="col-6">
<div class="input-group">
<input
id="averageWallLength"
width="10px"
required
type="number"
class="form-control"
type="number"
min="1"
max="100000"
placeholder="0"
id="exampleInputEmail1"
aria-describedby="emailHelp"
/>
<span class="input-group-text">м</span>
</div>
</div>
</div>
</div>
<div class="mb-5">
<div class="row g-3">
<div class="col-6" style="align-items: left">
<label for="squareOdArea" class="col-form-label"
>Общая площадь оконных и дверных проемов</label
>
</div>
<div class="col-6">
<div class="input-group">
<input
id="squareOdArea"
width="10px"
required
type="number"
class="form-control"
type="number"
min="1"
max="100000"
placeholder="0"
id="exampleInputEmail1"
aria-describedby="emailHelp"
/>
<span class="input-group-text">кв.м</span>
</div>
</div>
</div>
</div>
<div class="mt-4 mb-2 text-center">
<button
style="width: 45%"
name="calculatebtn"
type="submit"
class="btn btn-primary btn-lg"
>
Рассчитать
</button>
</div>
</form>
</div>
<div class="card-footer text-muted text-center">
Кол-во блоков для устройства описанных стен, за вычетом площади
проемов, с учетом запаса на подрезку 3% составит
<div style="font-size: 20pt">
<span id="srTotalBlock">0.00</span>
м<sup>3</sup>
</div>
</div>
<div class="card-footer text-muted text-center">
Количество клея для данного объема блоков
<div style="font-size: 20pt" class="result_calc_top_two">
<span id="srTotalBlockInt">0</span>
кг.
</div>
</div>
</div>
</div>
</div>
</div>
<script
src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js"
integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3"
crossorigin="anonymous"
></script>
<script type="text/javascript">
const form = document.forms["issueform"];
form
.addEventListener("submit", (e) => {
e.preventDefault();
calculate();
})
.catch((error) => console.error("Error!", error.message ?? "undef"));
function calculate() {
var withs = document.getElementsByName("flexRadioDefault");
//B
var selectedWith = 100;
for (var i = 0; i < withs.length; i++) {
if (withs[i].checked) {
selectedWith = withs[i].value;
}
}
// L - общая длину газобетонных стен, м
var wallLength = document.getElementById("wallLength").value;
if (wallLength === undefined || wallLength === "") return;
// H - средняя высоту стен, м
var averageWallLength =
document.getElementById("averageWallLength").value;
if (averageWallLength === undefined || averageWallLength === "") return;
// Soc - общая площадь оконных и дверных проемов, кв.м:
var squareOdArea = document.getElementById("squareOdArea").value;
if (squareOdArea === undefined || squareOdArea === "") return;
var totalValue = (
(((wallLength * averageWallLength - squareOdArea) * selectedWith) /
1000) *
1.03
).toFixed(2);
var srTotalBlock = document.getElementById("srTotalBlock");
srTotalBlock.textContent = `${totalValue}`;
var nTotalBlockKV = (parseInt(totalValue / 1.875) * 1.875).toFixed(3);
var nTotalBlockInt = Math.ceil(totalValue * 30);
var srTotalBlockInt = document.getElementById("srTotalBlockInt");
srTotalBlockInt.textContent = `${nTotalBlockInt}`;
var nTotalBlockPd = parseInt(Math.ceil(totalValue / 1.875)) * 1.875;
if (selectedWith == 200)
nTotalBlockPd = parseInt(Math.ceil(totalValue / 1.75)) * 1.75;
if (selectedWith == 240)
nTotalBlockPd = parseInt(Math.ceil(totalValue / 1.8)) * 1.8;
if (selectedWith == 400)
nTotalBlockPd = parseInt(Math.ceil(totalValue / 1.5)) * 1.5;
var nBlockTypP = Math.ceil(nTotalBlockPd / 1.875);
if (selectedWith == 200) nBlockTypP = Math.ceil(nTotalBlockPd / 1.75);
if (selectedWith == 240) nBlockTypP = Math.ceil(nTotalBlockPd / 1.8);
if (selectedWith == 400) nBlockTypP = Math.ceil(nTotalBlockPd / 1.5);
var nTotalBlockPn = nTotalBlockPd / (selectedWith / 1000);
var nTotalBlockIntPd = Math.ceil(nTotalBlockPn / (0.625 * 0.25));
var nBlockTyp = selectedWith;
var npw = 1150;
if (selectedWith == 200) npw = 1050;
if (selectedWith == 400) npw = 950;
var nBlockK = Math.round(nTotalBlockPd.value);
// кол-во поддонов
//$('[name="f_opam"]').val(nBlockTypP.value);
//$("#srBlockTypP").html(nBlockTypP.value);
//$('[name="f_opvol"]').val(nTotalBlockPd.value);
//$("#srTotalBlockPd").html(nTotalBlockPd.value);
// общее кол-во блоков кратное поддону в шт.
//$('[name="f_oblam"]').val(nTotalBlockIntPd.value);
//$("#srTotalBlockIntPd").html(nTotalBlockIntPd.value);
// общее кол-во блоков, кратное подднону в кв.м.
//$('[name="f_opsq"]').val(nTotalBlockPn.value);
//$("#srTotalBlockPn").html(nTotalBlockPn.value.toFixed(2));
// тип блока
//$("#srBlockTyp").html(nBlockTyp.value);
//$('[name="f_omark"]').val(nBlockTyp.value);
// транспортный вес одного поддона
//$('[name="f_opw"]').val(npw.value);
//$("#srpw").html(npw.value);
// колво мешков клея
//$('[name="f_opgl"]').val(nBlockK.value);
//$("#srBlockK").html(nBlockK.value);
}
</script>
</body>
</html>