Посмотреть демо-версию.

Наш интернет-калькулятор представляет собой HTML-форму с выпадающими меню, полями для ввода данных и радиопереключателями.

Приложение разбито на несколько частей (view, controller, value) и в каждом конкретном случае можно быстро добавить и удалить нужные пункты меню, настроить формулу для расчета под свои нужды и изменить стиль.

В файле controller.php происходит обработка введенных данных и в зависимости от них, вызов функций для расчета, вывода результата или сообщения о неполноте заданной информации.

В файле view.php описана форма для ввода данных, функция вывода результата и функция вывода сообщения об ошибках.

В файле value.php происходит непосредственное вычисление результата на основе введенных данных. Здесь описывается формула для расчета и коэффициенты, соответствующие, в нашем конкретном случае, тем или иным строительным материалам.

Расчеты и обработка введенных данных, как видно из расширения файлов, реализованы на php.

Для того чтобы, интернет-калькулятор не выглядел скучным, украсим его, добавив справа, изменяющиеся в зависимости от выбранного пункта меню картинки. Используем для этого библиотеку jQuery. К примеру для селектора, отвечающего за выбор покрытия крыши, скрипт будет выглядеть вот так:

 1 $("select[name=roof]").change(function(){
 2     if($("select[name=roof]").val()==='metalTile')
 3         $(".pict3").attr('src','images/metalTile.jpg');
 4 
 5     if($("select[name=roof]").val()==='bitumen')
 6         $(".pict3").attr('src','images/bitumen.jpg');
 7 
 8     if($("select[name=roof]").val()==='prof') $
 9             (".pict3").attr('src','images/prof.jpg');
10 });

Для радиопереключателя, отвечающего за наличие печи:

1 $("input[type=radio]").change(function(){
2     if($("input[name=furnace]:checked").val()==='yes')
3         $(".pict4").attr('src','images/furnace.jpg');
4     else $(".pict4").attr('src','images/krestik_red2.gif');
5 });

При нажатии на кнопку отмена, все значения в каждом элементе формы сбрасываются на первоначально установленные( selected для селекторов, checked для radio, value для text), поэтому реализуем скрипт, возвращающий при перезагрузке формы первоначальные изображения:

1 $("input[type=reset]").click(function(){
2     $(".pict").attr('src','images/krestik_red.gif');
3     $(".pict2").attr('src','images/cellular.jpg');
4     $(".pict3").attr('src','images/metalTile.jpg');
5     $(".pict4").attr('src','images/furnace.jpg');
6     $(".pict5").attr('src','images/brush.jpg');
7 });

В итоге у нас получился интернет-калькулятор, позволяющий посетителям сайта строительной компании быстро оценить стоимость дома своей мечты =)

Демо-версия интернет-калькулятор | Скачать проект архивом .rar