Adatum
Апр
2
2013

Пишем онлайн калькулятор Шкафа-купе на 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
Автор: Сергоманов Дмитрий

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

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

*

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

  • мне 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 :

    .

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

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

  • I am forever indebted to you for this inrmofation.