Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   Адаптивный калькулятор для web сайта (https://javascript.ru/forum/misc/84444-adaptivnyjj-kalkulyator-dlya-web-sajjta.html)

bigfooter 10.09.2022 12:29
Адаптивный калькулятор для web сайта
 
Доброго времени суток, выкладываю рабочий скрипт для расчета линолеума:

<h3>Расчет стоимости линолеума</h3>
<select id="cvet">
<option value="serii">Серый</option>
<option value="geltii">Желтый</option>
<option value="goluboi">Голубой</option>
</select>
<input type="text" id="shirina" value="" placeholder="укажите ширину помещения">
<input type="text" id="dlina" value="" placeholder="укажите длину помещения">
<button onclick="raschitat();">Рассчитать стоимость</button>
<div id="ploschad"></div>
<div id="stoimost"></div>
<script type="text/jаvascript">
function raschitat() {
cvet  = document.getElementById('cvet').value;
switch (cvet) {
   case "serii":
      cena = 440;
      break
   case "goluboi":
      cena = 480;
      break   
    case "geltii":
      cena = 380;
      break   
   default:
      cena = 440;
      break
}
shirina  = document.getElementById('shirina').value;
dlina  = document.getElementById('dlina').value;
if(shirina == ""){
alert("Вы не указали ширину");
} else if(dlina == ""){
alert("Вы не указали длину");
} else {
ploschad = parseFloat (shirina)* parseFloat (dlina);
document.getElementById('ploschad').innerHTML = "Площадь равна: "+ ploschad +" кв. м.";
stoimost = ploschad*cena;
document.getElementById('stoimost').innerHTML = "Стоимость равна: "+ stoimost +" р.";
}
}
</script>


Решил расширить возможности и внести несколько изменений для расчета по строительству из газоблоков:

Добавил третью величину "Высоту" для вычисления площади м3 

<input type="text" id="shirina" value="" placeholder="укажите ширину  &nbsp;&nbsp;&nbsp;&nbsp;    ">
<input type="text" id="dlina" value="" placeholder="укажите длину  &nbsp;&nbsp;&nbsp;&nbsp;    ">
<input type="text" id="height" value="" placeholder="укажите высоту  &nbsp;&nbsp;&nbsp;&nbsp;   ">


Ну и соответственно внес проверку в js и остается недоделанная формула. Но формула с зигзагом мне не подвластна, сейчас расскажу.

shirina  = document.getElementById('shirina').value;
    dlina  = document.getElementById('dlina').value;
    height = document.getElementById('height').value;
  

    if(shirina == ""){
    alert("Вы не указали ширину");
    } else if(dlina == ""){
    alert("Вы не указали длину");
    } else if(height == ""){
    alert("Вы не указали высоту");
    } else {
    ploschad = parseFloat (shirina)* parseFloat (dlina)* parseFloat (height);
    document.getElementById('ploschad').innerHTML = "Площадь равна: "+ ploschad +" куб. м.";
    stoimost =  ploschad*cena;
    document.getElementById('stoimost').innerHTML = "Стоимость равна: "+ stoimost +" р.";
    }
    }


На web ресурсе человек водит ширину, длину и высоту, по скрипту должен получить две графы "Площадь равна" "Стоимость равна".
Для правильного расчета человек смотрит на таб. https://disk.yandex.ru/i/yaL2mV9Tgpd_6A
т.к. калькулятор считает весь объем, то нам нужна формула она ниже

Код:
(Длина + Ширина) * Высоту * 2 / Кол. Квад. метров стены из одного куба блоков =
При верном расчете, должны получить цену и площадь

https://disk.yandex.ru/i/dgrxuMM7zo-1MA

Дай бог здоровья, кто напряжется понять, что тут накалякал :lol: 
square = (parseFloat(width) + parseFloat(length)) * parseFloat(height) * 2 / count
пытался самостоятельно изобразить формулу, но у меня по какой то причине не работает. Мне нужна формула вышенаписанная на js скрипте внедренная под код. Поможет кто?)

рони 10.09.2022 14:43
bigfooter,
<!DOCTYPE html>
<html>

<head>
    <title>Untitled</title>
    <meta charset="utf-8">
</head>

<body>
    <h3>Расчет стоимости линолеума</h3>
    <select id="cvet">
<option value="serii">Серый</option>
<option value="geltii">Желтый</option>
<option value="goluboi">Голубой</option>
</select>
<select id="count">
<option value="13.3">75</option>
<option value="10">100</option>
</select>

    <input type="text" id="shirina" value="5" placeholder="укажите ширину помещения">
    <input type="text" id="dlina" value="5" placeholder="укажите длину помещения">
    <input type="text" id="height" value="5" placeholder="укажите высоту помещения">
    <button onclick="raschitat();">Рассчитать стоимость</button>
    <div id="ploschad"></div>
    <div id="stoimost"></div>
    <div id="square"></div>
    <script>
        function raschitat() {
            let _cvet = document.getElementById('cvet').value, cena;
            switch (_cvet) {
                case "serii":
                    cena = 440;
                    break
                case "goluboi":
                    cena = 480;
                    break
                case "geltii":
                    cena = 380;
                    break
                default:
                    cena = 440;
                    break
            }
            let _shirina = +document.getElementById('shirina').value;
            let _dlina = +document.getElementById('dlina').value;
            let _height = +document.getElementById('height').value;
            let _count = +document.getElementById('count').value;
            if (_shirina == "") {
                alert("Вы не указали ширину");
            } else if (dlina == "") {
                alert("Вы не указали длину");
            } else if (height == "") {
                alert("Вы не указали высоту");
            } else {
                let volume = _shirina * _dlina * _height;
                document.getElementById('ploschad').innerHTML = "Кубатура равна: " + volume + " кв. м.";
                let _stoimost = volume * cena;
                document.getElementById('stoimost').innerHTML = "Стоимость равна: " + _stoimost + " р.";
                let _square = (_dlina + _shirina) * _height * 2 / _count;
                document.getElementById('square').innerHTML = "не знаю что равно: " + _square.toFixed(2) ;

            }
        }
    </script>
</body>

</html>

bigfooter 10.09.2022 15:16
Не то, профессор! Видимо на столько слабо могу выражать свои мысли, что понимают не правильно меня.

Мне нужно вот эту формулу изобразить на Js

(Длина + Ширина) * Высоту * 2 / Кол. Квад. метров стены из одного куба блоков =


И как мы видим, он продолжает вычислять общею кубатуру а не количество квадратных метров из 1 куба

рони 10.09.2022 15:41
bigfooter,
что вы написали, то я и сделал.
(Длина + Ширина) * Высоту * 2 / Кол. Квад. метров стены из одного куба блоков =
let _square = (_dlina + _shirina) * _height * 2 / _count;
что не так?

voraa 10.09.2022 18:09
Я чего то не понимаю?

30 let _cvet = document.getElementById('cvet').value, cena;
31 switch (cvet) {

45 let _shirina = +document.getElementById('shirina').value;
49 if (shirina == "") {

и т.д.

Зачем вообще названия локальных переменных начинать с "_"?

bigfooter 10.09.2022 18:36
Цитата:
Сообщение от рони
let _square = (_dlina + _shirina) * _height * 2 / _count;
что не так?
Не работает представленный вами код, он не считает по формуле, он тупо умножает три значения и выдает результат.

bigfooter 10.09.2022 18:37
Цитата:
Сообщение от voraa
30 let _cvet = document.getElementById('cvet').value, cena;
31 switch (cvet) {

45 let _shirina = +document.getElementById('shirina').value;
49 if (shirina == "") {

и т.д.

Зачем вообще названия локальных переменных начинать с "_"?
не силен в JS по этому и выложил код на обсуждение, не могу заставить произвести расчет строго по формуле. По этой формуле он должен выдать верную площадь стен и цену, а выдает общею кубатуру и цену за все.

bigfooter 10.09.2022 18:46
Зашел в exl создал таблицу расчетов, он должен выводить именно эти значения из них я и взял формулу которая собственно написана на верху таблицы https://disk.yandex.ru/i/oSr2ygn8oehDhQ

рони 10.09.2022 19:26
Цитата:
Сообщение от voraa
Я чего то не понимаю?
на скорую руку, не хотел иметь переменные и id одинаковыми.

рони 10.09.2022 19:27
bigfooter,
не могу помочь, не понимаю.

bigfooter 10.09.2022 19:32
Цитата:
Сообщение от рони (Сообщение 547912)
bigfooter,
не могу помочь, не понимаю.
братан, так дело не пойдет, чего не понимаешь?!
Помогите коллеге))

Alikberov 10.09.2022 20:00
A если попробовать дать запрос «кубатуру перевести в квадратуру»:Где по первой ссылке:
Цитата:
Если толщина (высота) измеряется в метрах, то для получения площади необходимо объем в кубических метрах разделить на толщину (высоту) в метрах.

1 м² = 1 м³ / 1 м

bigfooter 10.09.2022 20:22
Цитата:
Сообщение от Alikberov
м3 в м2 - перевести в онлайн калькуляторе
Перевод квадратных метров в кубометры
Калькулятор перевода кубических метров в квадратные
уже переведено в таб. значении, от сюда и расчет сделан. Осталось только на js уровне расчет произвести для совпадения вводных данных. У меня скрины же прикреплены таблицы.

Alikberov 10.09.2022 22:14
Цитата:
Сообщение от bigfooter (Сообщение 547915)
У меня скрины же прикреплены таблицы.
A если так?
<table border=1>
<tr><th>Данные блока, M</th><th></th><td>Количество блоков в одном кубе</td></tr>
<tr><td>Длина</td><td><input type=number id=Dlina value=0.6 step=0.01 min=0.1 max=1.0></td><td id=Shtuki></td></tr>
<tr><td>Высота</td><td><input type=number id=Vysota value=0.2 step=0.01 min=0.1 max=1.0></td><td></td></tr>
<tr><td>Толщина</td><td><input type=number id=Tolschina value=0.075 step=0.001 min=0.01 max=1.0></td><td>M<sup>2</sup> стены из одного куба</td></tr>
<tr><td>Стоимость M<sup>3</sup>, руб.</td><td id=Stoimost></td><td id=Kvadratov></td></tr>
</table>
<br>
<table border=1>
<tr><th>Данные дома, M</th><th></th></tr>
<tr><td>Длина</td><td><input type=number id=DlinaDoma value=10 min=1 max=100.0></td></tr>
<tr><td>Высота</td><td><input type=number id=VysotaDoma value=3 min=1 max=10.0></td></tr>
<tr><td>Ширина</td><td><input type=number id=ShirinaDoma value=8 min=1 max=100.0></td></tr>
<tr><td colspan=2></td></tr>
<tr><td>Количество блоков, M<sup>3</sup></td><td id=Blokov></td></tr>
<tr><td>Стоимость, руб.</td><td id=Rubley></td></tr>
</table>

<script>
var	Dannye = {
	Dlina: null,
	Vysota: null,
	Tolschina: null,
	Shtuki: null,
	Stoimost: null,
	Kvadratov: null,
	DlinaDoma: null,
	VysotaDoma: null,
	ShirinaDoma: null,
	Blokov: null,
	Rubley: null
}

for(var id in Dannye) {
	var	el = document.getElementById(id);
	if(el) {
		if(isFinite(el.value))
			el.addEventListener("change", Kalkulyator);
		Dannye[id] = el;
		el.title = "Dannye." + id;
	}
}

function Kalkulyator() {
	Dannye.Shtuki.textContent = 1 / +Dannye.Dlina.value / +Dannye.Vysota.value / +Dannye.Tolschina.value;
	Dannye.Kvadratov.textContent = 1 / +Dannye.Tolschina.value;
	Dannye.Stoimost.textContent = 3800;
	Dannye.Blokov.textContent = 2 * (+Dannye.DlinaDoma.value + +Dannye.ShirinaDoma.value) * +Dannye.VysotaDoma.value / +Dannye.Kvadratov.textContent;
	Dannye.Rubley.textContent = +Dannye.Stoimost.textContent * +Dannye.Blokov.textContent;
}

Kalkulyator();
</script>

voraa 11.09.2022 08:35
Цитата:
Сообщение от рони
на скорую руку, не хотел иметь переменные и id одинаковыми.
А что тогда
31 switch (cvet) {
и
49 if (shirina == "") {

Почему не .value?

рони 11.09.2022 10:19
voraa,
спасибо, исправил, надеюсь)))

bigfooter 13.09.2022 18:58 
<!DOCTYPE html>
<html>
<head>
    <title>Untitled</title>
    <meta charset="utf-8">
</head>
<body>
    <h3>Расчет стоимости линолеума</h3>
    <select id="cvet">
<option value="serii">Серый</option>
<option value="geltii">Желтый</option>
<option value="goluboi">Голубой</option>
</select>
<select id="count">
<option value="13.3">75</option>
<option value="10">100</option>
</select>
    <input type="text" id="shirina" value="5" placeholder="укажите ширину помещения">
    <input type="text" id="dlina" value="5" placeholder="укажите длину помещения">
    <input type="text" id="height" value="5" placeholder="укажите высоту помещения">
    <button onclick="raschitat();">Рассчитать стоимость</button>
    <div id="ploschad"></div>
    <div id="stoimost"></div>
    <div id="square"></div>
    <script>

        function raschitat() {
            let cvet = document.getElementById('cvet').value;
            switch (cvet) {
                case "serii":
                    cena = 440;
                    break
                case "goluboi":
                    cena = 480;
                    break
                case "geltii":
                    cena = 380;
                    break
                default:
                    cena = 440;
                    break
            }

            let _shirina = +document.getElementById('shirina').value;
            let _dlina = +document.getElementById('dlina').value;
            let _height = +document.getElementById('height').value;
            let _count = +document.getElementById('count').value;

            if (shirina == "") {
                alert("Вы не указали ширину");
            } else if (dlina == "") {
                alert("Вы не указали длину");
            } else if (height == "") {
                alert("Вы не указали высоту");
            } else {

                let volume = _shirina * _dlina * _height;
                document.getElementById('ploschad').innerHTML = "Кубатура равна: " + volume + " кв. м.";
                let _stoimost = volume * cena;
                document.getElementById('stoimost').innerHTML = "Стоимость равна: " + _stoimost + " р.";
                let _square = (_dlina + _shirina) * _height * 2 / _count;
                document.getElementById('square').innerHTML = "не знаю что равно: " + _square.toFixed(2) ;
 

            }

        }

    </script>
</body>
</html>


Были ошибки и порядок изменен расчета, теперь все работает. Кому нужно, пользуйтесь на здоровье!


Часовой пояс GMT +3, время: 06:34.