Калькулятор - Кирпич и Блок

Здесь скоро появится калькулятор строительных материалов

А пока вы можете воспользоваться ссылкой

<!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>

Доставка: от 1 до 3 дней — от заказа до разгрузки на вашем участке! Оплата: наличный, безналичный расчёт, возможна оплата по факту.

+7 342 200-88-63