Строительный калькулятор

@kasper00761 · Регистрация: 21.07.2017

Студворк — интернет-сервис помощи студентам

Подскажите кто в курсе, как и где лучше научиться делать калькулятор для сайта. В моем случае мне нужен строительный калькулятор например:

Брусовые дома/бани м3 = 2500 р |тут ввод количества кубов которое нужно клиенту| |Посчитанная цена (вводимая цифра * цену)|
Какие-то услуги м/п = 2500 р |тут ввод количества кубов которое нужно клиенту| |Посчитанная цена (вводимая цифра * цену)|
Какие-то услуги м2 = 2500 р |тут ввод количества кубов которое нужно клиенту| |Посчитанная цена (вводимая цифра * цену)|
Какие-то услуги шт. = 2500 р |тут ввод количества кубов которое нужно клиенту| |Посчитанная цена (вводимая цифра * цену)|

И чтоб в конце это все выводило в конечный результат, то есть все услуги которые мы выбрали и конечный ценник
ПРимер:

Выбранная услуга (300м3) - 25000р
Выбранная услуга (300м3) - 25000р
Выбранная услуга (300м3) - 25000р

@TFullControl · 13.08.2017, 12:37

Пример:

HTML5
1
2
3
4
5
6
7
8
9
<select class="target">
  <option>Брусовые дома/бани м3 = 2500 р</option>
  <option>Какие-то услуги м/п = 2500 р</option>
  <option>Какие-то услуги м2 = 2500 р </option>
  <option>Какие-то услуги шт. = 2500 р</option>
</select>
<input type="text" bi="count" value="0">
<hr>
<p></p>

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
var select = document.querySelector(".target");
var p = document.querySelector("p");
var count = document.querySelector("input");
function calc(){
    if (!isNaN(count.value)){
    p.innerHTML = "Выбрана услуга ("+select.value+"), ИТОГО: " + count.value*2500+"р"
  } else {
     p.innerHTML = "Вы пишете бред";
  }
}
select.onchange = calc;
count.onchange = calc;

https://jsfiddle.net/cyovbtb4/

@kasper00761 · 13.08.2017, 12:56 **[ТС]**

Знать бы еще JS

, тоже круто но конечно не тот результат не много нужно просто чтоб они были спискомв строчку, и не выбирались, я в каждой строчке пишу значение которое мне нужно и в конце у меня итог выскакивает какие работы выбирали сумма на каждую работу и общая сумма. За пример спасибо
у меня пока только такое

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
<table class="tftable">
        <tr><td>№п/п</td><td>Наименование работы</td><td>Единица измерения</td><td>Цена в рублях</td></tr>
        <tr><th colspan="4">Дома-бани</th></tr>
        <tr><td>1</td><td>Срубы на заказ любой сложности из сосны</td><td>м3</td><td>от 11500</td></tr>
        <tr><td>2</td><td>Каркасные дома-бани</td><td>м2</td><td>от 1500</td></tr>
        <tr><td>3</td><td>Брусовые дома-бани</td><td>м3</td><td>от 3500</td></tr>
        <tr><td>4</td><td>Броширование дерева (старить)</td><td>м2</td><td>650</td></tr>
        <tr><th colspan="4">Демонтажные работы</th></tr>
        <tr><td>1</td><td>Снятие старых обоев</td><td>м2</td><td>50</td></tr>
        <tr><td>2</td><td>Сбивка штукатурки</td><td>м2</td><td>110</td></tr>
        <tr><td>3</td><td>Размывка, зачистка потолка</td><td>м2</td><td>70</td></tr>
        <tr><td>4</td><td>Демонтаж цементно-песчаной стяжки до 50 мм</td><td>м2</td><td>110</td></tr>
        <tr><td>5</td><td>Демонтаж цементно-песчаной стяжки от 50 мм</td><td>м2</td><td>150</td></tr>
        <tr><td>6</td><td>Демонтаж бетонного пола до 100 мм</td><td>м2</td><td>250</td></tr>
        <tr><td>7</td><td>Демонтаж бетонного пола от 100 мм</td><td>м2</td><td>от 300</td></tr>
        <tr><td>8</td><td>Демонтаж деревянных полов</td><td>м2</td><td>180</td></tr>
        <tr><td>9</td><td>Демонтаж старого паркета</td><td>м2</td><td>120</td></tr>
        <tr><td>10</td><td>Демонтаж старого плинтуса</td><td>мп</td><td>30</td></tr>
        <tr><td>11</td><td>Демонтаж старого, не проклеенного покрытия</td><td>м2</td><td>30</td></tr>
        <tr><td>12</td><td>Демонтаж старого, проклеенного покрытия</td><td>м2</td><td>50</td></tr>
        <tr><td>13</td><td>Демонтаж двери (без сохранения)</td><td>шт</td><td>400</td></tr>
        <tr><td>14</td><td>Демонтаж двери (с сохранением)</td><td>шт</td><td>600-1000</td></tr>
        <tr><td>15</td><td>Демонтаж наличника</td><td>мп.</td><td>40</td></tr>
        <tr><td>16</td><td>Демонтаж окна</td><td>шт.</td><td>300-500</td></tr>
        <tr><td>17</td><td>Демонтаж плитки со стен</td><td>м2</td><td>150-200</td></tr>
        <tr><td>18</td><td>Демонтаж плитки по полам</td><td>м2</td><td>120-150</td></tr>
        <tr><td>19</td><td>Демонтаж сантехнических приборов</td><td>шт</td><td>620</td></tr>
        <tr><td>20</td><td>Демонтаж фановых, водопроводных труб</td><td>мп</td><td>130</td></tr>
        <tr><td>21</td><td>Электрощит демонтаж</td><td>шт</td><td>1200</td></tr>
        <tr><td>22</td><td>Демонтаж кирпичной стены</td><td>м2</td><td>300</td></tr>
        <tr><td>23</td><td>Демонтаж кирпичной стены</td><td>м3</td><td>1500</td></tr>
        <tr><td>24</td><td>Демонтаж стены из ГКЛ</td><td>м2</td><td>250</td></tr>
        <tr><th colspan="4">Полы.</th></tr>         
        <tr><td>1</td><td>  Грунтовка пола в один слой</td><td>м2</td><td>30</td></tr>
        <tr><td>2</td><td>  Цементно-песчаная стяжка толщиной до 50 мм</td><td>м2</td><td>350</td></tr>
        <tr><td>3</td><td>  Цементно-песчаная стяжка толщиной от 50 мм. до 70 мм.</td><td>м2</td><td>550</td></tr>
        <tr><td>4</td><td>  Установка маяков</td><td>м2</td><td>60</td></tr>
        <tr><td>5</td><td>  Устройство армирования под стяжку</td><td>м2</td><td>50</td></tr>
        <tr><td>6</td><td>  Наливные (самовыравнивающимся раствором) толщиной до 30 мм</td><td>м2</td><td>250</td></tr>
        <tr><td>7</td><td>  Устройство гидроизоляции пола пленкой ПВХ</td><td>м2</td><td>40</td></tr>
        <tr><td>8</td><td>  Настил фанеры, или ДСП на готовое основание</td><td>м2</td><td>290</td></tr>
        <tr><td>9</td><td>  Подсыпка керамзитом</td><td>м2</td><td>60</td></tr>
        <tr><td>10</td><td> Настил паркета штучного на готовое основание</td><td>м2</td><td>900</td></tr>
        <tr><td>11</td><td> Настил щитового паркета (ламинат) на готовое основание.</td><td>м2</td><td>400</td></tr>
        <tr><td>12</td><td> Циклевка/шлифовка паркета.</td><td>м2</td><td>400</td></tr>
        <tr><td>13</td><td> Шпатлевка паркета</td><td>м2</td><td>160</td></tr>
        <tr><td>14</td><td> Покрытие паркета лаком в 2* слоя</td><td>м2</td><td>250</td></tr>
        <tr><td>15</td><td> Настил линолеума, ковровых покрытий</td><td>м2</td><td>180</td></tr>
        <tr><td>16</td><td> Монтаж** плинтуса</td><td>мп</td><td>90</td></tr>
        <tr><td>17</td><td>Монтаж профильных порожков</td><td>мп</td><td>180</td></tr>
        <tr><td>18</td><td>Окраска плинтуса или наличника</td><td>мп</td><td>80</td></tr>
        <tr><td>19</td><td>Укладка кафельной плитки</td><td>м2</td><td>600-1200</td></tr>
        <tr><td>20</td><td>Установка бордюра</td><td>мп</td><td>200</td></tr>
        <tr><td>21</td><td>Затирка шва</td><td>м2</td><td>90</td></tr>       
        <tr><th colspan="4">Стены</th></tr>            
        <tr><td>1</td><td>Штукатурка до 3 см.</td><td>м2</td><td>390</td></tr>
        <tr><td>2</td><td>Штукатурка до 6 см.</td><td>м2</td><td>590</td></tr>
        <tr><td>3</td><td>Грунтовка</td><td>м2</td><td>30</td></tr>
        <tr><td>4</td><td>Заделка шфов ГКЛ Фигинфюллер</td><td>мп</td><td>120</td></tr>
        <tr><td>5</td><td>Шпаклёвка (первый слой)</td><td>м2</td><td>170</td></tr>
        <tr><td>6</td><td>Шпаклёвка (финишный слой)</td><td>м2</td><td>280</td></tr>
        <tr><td>6</td><td>Окраска за 2 раза</td><td>м2</td><td>250</td></tr>
        <tr><td>7</td><td>Оклейка обоями с подгоном рисунка</td><td>м2</td><td>200-250</td></tr>
        <tr><td>8</td><td>Устройство кафельной плитки</td><td>м2</td><td>670-1200</td></tr>
        <tr><td>9</td><td>Устройство стен из ГКЛ по металл. каркасу</td><td>м2</td><td>400</td></tr>
        <tr><td>10</td><td>Устройство перегеродок из ГКЛ</td><td>м2</td><td>550</td></tr>
        <tr><td>11</td><td>Утепление</td><td>м2</td><td>100</td></tr>
        <tr><td>12</td><td>Обшивка вагонкой, панелями</td><td>м2</td><td>420</td></tr>
        <tr><td>13</td><td>Устройство малярных уголков</td><td>мп</td><td>120</td></tr>
        <tr><td>14</td><td>Наклейка малярной сетки</td><td>м2</td><td>50</td></tr>
        <tr><td>15</td><td>Кирпичная кладка  </td><td>м2</td><td>600</td></tr>
        <tr><td>16</td><td>Кирпичная кладка</td><td>м3</td><td>2600</td></tr>
        <tr><td>17</td><td>Кладка пенобетонных блоков</td><td>м3</td><td>2300</td></tr>
        <tr><th colspan="4">Окна            
        <tr><td>1</td><td>Покраска оконных рам</td><td>м2</td><td>1100</td></tr>
        <tr><td>2</td><td>Оконные откосы* внутренняя* обшивка ГКЛ</td><td>окно</td><td>2000</td></tr>
        <tr><td>3</td><td>Оконные откосы* внутренняя* штукатурка</td><td>окно</td><td>2300</td></tr>
        <tr><td>4</td><td>Шпаклевка и покраска оконных откосов (одного окна)</td><td>окно</td><td>700</td></tr>
        <tr><td>5</td><td>Установка подоконной столешницы (на готовое основание)</td><td>шт</td><td>700</td></tr>
        <tr><td>6</td><td>Монтаж окна</td><td>шт</td><td>1800</td></tr>
        <tr><th colspan="4">Двери</th></tr>            
        <tr><td>1</td><td>Покраска двери</td><td>шт</td><td>1000</td></tr>
        <tr><td>2</td><td>Установка дверного блока</td><td>шт</td><td>1700</td></tr>
        <tr><td>3</td><td>Сборка дверной коробки</td><td>шт</td><td>400</td></tr>
        <tr><td>4</td><td>Монтаж доборной планки (до 5 см.)</td><td>мп</td><td>200</td></tr>
        <tr><td>5</td><td>Установка готовой арки</td><td>шт</td><td>2000</td></tr>
        <tr><td>6</td><td>Устройство арочного проема из ГКЛ</td><td>шт</td><td>2300</td></tr>
        <tr><td>7</td><td>Установка замка</td><td>шт</td><td>500</td></tr>
        <tr><td>8</td><td>Установка наличника</td><td>мп</td><td>120</td></tr>
        <tr><th colspan="4">Потолок</th></tr>            
        <tr><td>1</td><td>Штукатурка*</td><td>м2</td><td>520</td></tr>
        <tr><td>2</td><td>Грунтовка    </td><td>м2</td><td>50</td></tr>
        <tr><td>3</td><td>Шпаклёвка (первый слой)</td><td>м2</td><td>220</td></tr>
        <tr><td>4</td><td>Шпаклёвка (финишный слой)</td><td>м2</td><td>310</td></tr>
        <tr><td>5</td><td>Окраска за 2 раза</td><td>м2</td><td>360</td></tr>
        <tr><td>6</td><td>Устройство потолков из ГКЛ по металл. каркасу   </td><td>м2</td><td>480</td></tr>
        <tr><td>7</td><td>Устройство потолков из ГКЛ по металл. каркасу в 2 уровня (прямолинейный)</td><td>м2</td><td>700</td></tr>
        <tr><td>8</td><td>Устройство потолков из ГКЛ по металл. каркасу в 2 уровня (криволинейный)</td><td>м2</td><td>1300</td></tr>
        <tr><td>9</td><td>Утепление</td><td>м2</td><td>100</td></tr>
        <tr><td>10</td><td>Обшивка вагонкой, панелями</td><td>м</td><td>460</td></tr>
        <tr><td>11</td><td>Наклейка малярной сетки</td><td>м2</td><td>70</td></tr>
        <tr><td>12</td><td>Устройство подвесных потолков</td><td>м2</td><td>400</td></tr>
        <tr><th colspan="4">Сантехника</th></tr>

Для наглядности http://q5kasperma.temp.swtest.ru/price.html
Дальше из этого можно лепить?

@TFullControl · 13.08.2017, 15:11

Можно еще так:

HTML5
1
2
3
4
5
6
7
8
<table class="tftable">
        <tr><td>1</td><td>Срубы на заказ любой сложности из сосны</td><td><input type="text" value="0"></td><td>11500</td><td><input type="checkbox" checked id="cb"></td></tr>
        <tr><td>2</td><td>Каркасные дома-бани</td><td><input type="text" value="0"></td><td>1500</td><td><input type="checkbox" id="cb"></td></tr>
        <tr><td>3</td><td>Брусовые дома-бани</td><td><input type="text" value="0"></td><td>3500</td><td><input type="checkbox" id="cb"></td></tr>
        <tr><td>4</td><td>Броширование дерева (старить)</td><td><input type="text" value="0"></td><td>650</td><td><input type="checkbox" id="cb"></td></tr>
</table>
<input class="button" type="submit" value="Calc">
<div><p></p></div>

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
var tr = document.getElementsByTagName("tr");
var output = document.querySelector("p"); 
var button = document.querySelector(".button");
button.onclick = function(){    
    var summ = 0;
  output.innerHTML = "<hr>";
    for (var i=0; i<tr.length; i++){
        var checkbox = tr[i].getElementsByTagName("td")[4].querySelector("input");    
    if ( checkbox.checked ) {
        var name  = tr[i].getElementsByTagName("td")[1].innerText;
        var count = tr[i].getElementsByTagName("td")[2].querySelector("input").value;
      var price = tr[i].getElementsByTagName("td")[3].innerText;      
      summ = summ + price*count;
      output.innerHTML += "Выбрана услуга ("+name+"), стоимость: "+price*count+"р</br>";
    }
  }
  output.innerHTML += "<hr>Общая стоимость: "+summ+"р";
}

https://jsfiddle.net/no4Lq8sj/

@kasper00761 · 13.08.2017, 16:25 **[ТС]**

Вот почти как раз то что нужно, спасибо большое) Буду в коде разбираться в твоем

Новые блоги и статьи Все статьи Все блоги /
Использование SDL3-callbacks вместо функции main() на Android, Desktop и WebAssembly 8Observer8 24.01.2026 Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а привычная функция main(). . .	моя боль iceja 24.01.2026 Выложила интерполяцию кубическими сплайнами www. iceja. net REST сервисы временно не работают, только через Web. Написала за 56 рабочих часов этот сайт с нуля. При помощи perplexity. ai PRO , при. . .	Модель сукцессии микоризы anaschu 24.01.2026 Решили писать научную статью с неким РОманом	http://iceja.net/ математические сервисы iceja 20.01.2026 Обновила свой сайт http:/ / iceja. net/ , приделала Fast Fourier Transform экстраполяцию сигналов. Однако предсказывает далеко не каждый сигнал (см ограничения http:/ / iceja. net/ fourier/ docs ). Также. . .
http://iceja.net/ сервер решения полиномов iceja 18.01.2026 Выкатила http:/ / iceja. net/ сервер решения полиномов (находит действительные корни полиномов методом Штурма). На сайте документация по API, но скажу прямо VPS слабенький и 200 000 полиномов. . .	Расчёт переходных процессов в цепи постоянного тока igorrr37 16.01.2026 / * Дана цепь(не выше 3-го порядка) постоянного тока с элементами R, L, C, k(ключ), U, E, J. Программа находит переходные токи и напряжения на элементах схемы классическим методом(1 и 2 з-ны. . .	Восстановить юзерскрипты Greasemonkey из бэкапа браузера damix 15.01.2026 Если восстановить из бэкапа профиль Firefox после переустановки винды, то список юзерскриптов в Greasemonkey будет пустым. Но восстановить их можно так. Для этого понадобится консольная утилита. . .	Сукцессия микоризы: основная теория в виде двух уравнений. anaschu 11.01.2026 https:/ / rutube. ru/ video/ 7a537f578d808e67a3c6fd818a44a5c4/

@kasper00761 0 / 0 / 0 Регистрация: 21.07.2017 Сообщений: 22

	Строительный калькулятор 13.08.2017, 09:55. Показов 5509. Ответов 4 Метки нет (Все метки) Подскажите кто в курсе, как и где лучше научиться делать калькулятор для сайта. В моем случае мне нужен строительный калькулятор например: Брусовые дома/бани м3 = 2500 р \|тут ввод количества кубов которое нужно клиенту\| \|Посчитанная цена (вводимая цифра * цену)\| Какие-то услуги м/п = 2500 р \|тут ввод количества кубов которое нужно клиенту\| \|Посчитанная цена (вводимая цифра * цену)\| Какие-то услуги м2 = 2500 р \|тут ввод количества кубов которое нужно клиенту\| \|Посчитанная цена (вводимая цифра * цену)\| Какие-то услуги шт. = 2500 р \|тут ввод количества кубов которое нужно клиенту\| \|Посчитанная цена (вводимая цифра * цену)\| И чтоб в конце это все выводило в конечный результат, то есть все услуги которые мы выбрали и конечный ценник ПРимер: Выбранная услуга (300м3) - 25000р Выбранная услуга (300м3) - 25000р Выбранная услуга (300м3) - 25000р 0

@kasper00761 0 / 0 / 0 Регистрация: 21.07.2017 Сообщений: 22
	13.08.2017, 16:25 [ТС]
	Вот почти как раз то что нужно, спасибо большое) Буду в коде разбираться в твоем 0

Строительный калькулятор

Решение