Цель:
Cоздать интернет калькулятор, подсчитывающий стоимость продукта по заданным параметрам.
Часто на сайтах, предоставляющих информацию о производстве и продаже каких-либо товаров, необходимо предоставить пользователю право самому выбирать различные качества продукта и подсчитывать стоимость, исходя из выбранных критериев. Приведем пример простого интернет-калькулятора, подсчитывающего стоимость дома.
Наш интернет-калькулятор представляет собой 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
paralainer — 11.10.2010
23:09
Ммм… интересно! было бы круто, если бы стоимость изменялась динамически с помощью AJAX, и не пришлось бы нажимать кнопку «Посчитать»
lecherbs — 05.12.2010
23:43
Ну что сказать. Как на меня, то блог просто супер! И посты интересные.
parsek — 07.12.2010
01:18
Где-то я это уже читал. Но все-равно неплохо.
udilka — 07.12.2010
23:29
Неплохо. Есть что почитать. Побольшеб таких постов.
News — 19.01.2011
20:56
Хорший блог, интересные посты, да и коментарии в тему. Мне понравилось.
hahatunchik — 18.03.2011
23:25
Неплохо. Интересный сайт. Есть что почитать.
Petropeflep — 27.09.2011
10:17
как бы ее к моей цмске прикрутить?
admin — 16.10.2011
18:48
а какой движок?