Adatum
Апр
2
2013
HTML5 /

Пишем онлайн калькулятор Шкафа-купе на html

cupe
Решил тут набросать простенький калькулятор, да так чтобы без всяких java и php. Для мебельщиков собирающих шкафы-купе думаю пригодиться.

Демо Скачать

HTML код

Ниже приведён код простейшего калькулятора.
В полях input вводим габаритные размеры.

<input name="dlina" type="text" size="8" value="100"> - Высота <br>
<input name="dlina0" type="text" size="8" value="150"> - Глубина <br>
<input name="dlina1" type="text" size="8" value="120"> - Ширина <br>

Вся работа сводиться к выполнению функции onChange.
К примеру в поле SELECTED функция onChange=»dlina.value = this.value» заменяет значение поля «Высота» на выборное в поле SELECTED.
А кнопкой «РАСЧЁТ» onClick=»dlina2.value= dlina.value * 8″ мы берём значение поля «Высота» умножаем его на 8 и выводим в поле «Цена».
На этой основе можно построить даже самые сложные калькуляторы.

<form method="get">

<br>Профиль "Standart" высота до 2,55 м<br>
<br><input name="dlina" type="text" size="8" value="100"> - Высота <br>
<br><input name="dlina0" type="text" size="8" value="150"> - Глубина <br>
<br><input name="dlina1" type="text" size="8" value="120"> - Ширина <br>

<br>Длина шкафа купе: <SELECT NAME="dl" SIZE=1 onChange="dlina.value = this.value">
<OPTION SELECTED value="215">до 1м. (2 двери) 
<option value="240">1.25м. (2 двери)</option>
<option value="270">1.5м. (2 двери)</option>
<option value="300">1.75м. (2 двери)</option>
<option value="330">до 2м. (2 двери)</option>
<option value="370">до 2м. (3 двери)</option>
<option value="390">2.25 м. (3 двери)</option>
<option value="410">2.5 м. (3 двери)</option>
<option value="450">до 3 м. (3 двери)</option>
<option value="500">до 3 м. (4 двери)</option>
<option value="590">до 3.5 м. (3 двери)</option>
</SELECT> <br>

<br>(высота до 2,75 м.): 
<input name="uv275" type="radio" checked="checked" onClick="dlina2.value= dlina.value">нет 
<input name="uv275" type="radio" onClick="dlina2.value= dlina.value * dlina1.value">есть 
<br>


<br><input name="dlina2" type="text" size="8" value="210"> - Цена<br>
<br><input name="reset" type="reset" value="СБРОС"><input name="reset" type="button" onClick="dlina2.value= dlina.value * 8" value="РАСЧЁТ"><br>
</form>

Источник урока: http://www.adatum.ru
Автор: Сергоманов Дмитрий

Метки: , ,

Похожие статьи

Оставить комментарий

  • Гараж 07.01.2017 в 03:46

    Не могли бы Вы добавить ко всему отдельно формулу расчета, на которой построен Ваш калькулятор, для наглядности работы калькулятора, что на что умножается или плюсуется, или делится или вычитается… не совсем понятно мне, как начинающему web-строителю. Заранее спасибо.

    Ответить
  • коля 06.01.2017 в 22:00

    мне 13 лет , это мой первый калькулятор , оцените :

    Калькулятор

    #content sps.1 {
    width: 500px;
    margin: 0 auto 50px;
    }
    #footer {
    left: 0; bottom: 0;
    padding: 10px;
    background: #39b54a;
    color: #fff;
    width: 100%;
    }

    бесплатный многофункциональный онлайн калькулятор!!!

    body {
    background: #c7b39b url(images/bg.jpg);
    color: #fff;
    }

    #calculator * {font-size: 50px;}
    #calculator table {border: solid 3px silver; border-spacing: 6px; background-color: #ff0000; }
    #calculator table td {border-spacing: 10px;}
    input.display {width: 1050px; text-align: right;}
    td.buttons {border-top: solid 1px silver;}
    input[type= button] {width: 250px; height: 60px;}

    var kola = prompt(«введите пароль «,»»);

    alert(«Привет » + kola + «!»);

    © коля костылев

    .sss:focus{
    background: red;
    text-align: center;
    color: white;
    size:
    height=»50px»
    }
    .sss:size{
    height=»200″
    }
    .sss2:focus{
    background: green;
    text-align: center;
    color: white;
    }
    .sss3:focus{
    background: green;
    text-align: center;
    color: white;
    size:
    height=»50px»
    }
    .sss4:focus{
    background: blue;
    text-align: center;
    color: white;
    size:
    height=»50px»
    }


    мы теперь в вк !!

    незабудьте подписаться :

    we now vk :

    .

    © коля костылев

    Ответить
  • Алексей 30.06.2016 в 23:51

    непонимаю как работает (((
    Объясните поподробнее

    Ответить
  • Debrah 03.05.2016 в 08:31

    I am forever indebted to you for this inrmofation.

    Ответить