Эффекты на основе Java Script

Образец калькулятора для предварительного расчета стоимости заказа

Расчет стоимости натяжного потолка.
Параметр	Количество
Производитель
Фактура
Площадь *	(кв.м)
Кол-во углов	(шт.)
Обход трубы	(шт.)
Монтаж люстры	(шт.)
Монтаж точечных светильноков	(шт.)
Монтаж трансформатора	(шт.)
Монтаж вентиляции	(шт.)
Монтаж гардины потолочной
Монтаж датчика пожарной сигнализации	(шт.)
Цена натяжного потолка	-- --

<Вернуться в каталог>

Скопируйте и вставте

Внутри тега <HEAD> - </HEAD>

На многих сайтах оказывающих услуги(транспортные, ремонт, установка натяжных потолков и.т.д) устанавливается специальный калькулятор, дающий возможность клиенту самостоятельно расчитать стоимость своего заказа. Здесь я привожу пример одного из таких калькуляторов сделанных мною для сайта http://sezardv.ru/

Внутри тега <BODY> - </BODY> там где у Вас будет калькулятор.

<TABLE style="BORDER: red 1px solid; WIDTH: 550" cellSpacing=10 cellPadding=0 border=0 background="contentbg1.jpg"><TBODY><tr><td>
                  <FORM name=calc method=post style="margin:0">
                  <TABLE style="FONT-SIZE: 9pt; WIDTH: 100%" cellSpacing=0 cellPadding=0 border=0><TBODY>
                    <tr><td style="BORDER-bottom: red 1px solid;" align=center colspan=2><H1 class=tema>Расчет стоимости натяжного потолка. </H1><br></td></tr>
                    <TR ><TD vAlign=top align=left style="BORDER-bottom: red 1px solid;">
                        <DIV style="FONT-WEIGHT: bold; FONT-SIZE: 14px; PADDING-BOTTOM: 4px; PADDING-TOP: 4px">
						  <SPAN style="FONT-FAMILY: verdana,geneva">Параметр</SPAN></DIV></TD>
                      <TD vAlign=bottom align=left style="BORDER-bottom: red 1px solid;" width=250>
                        <DIV style="FONT-WEIGHT: bold; FONT-SIZE: 14px; PADDING-BOTTOM: 3px; PADDING-TOP: 3px">
						<SPAN style="FONT-FAMILY: verdana,geneva">Количество</SPAN></DIV></TD></TR>
                    <TR>
                      <TD vAlign=center align=left height=30><SPAN style="FONT-FAMILY: verdana,geneva">Производитель</SPAN></TD>
                      <TD vAlign=bottom align=left>
					              <SELECT style="background:#96b9ef" name=proiz onchange="inverse_elem(this.options[this.selectedIndex].value,'menu')">
					              <OPTION value=1 selected>Россия</OPTION>
						          <OPTION value=2>Германия</OPTION>
								  <OPTION value=3>Франция</OPTION></SELECT>
								  <SPAN style="FONT-FAMILY: verdana,geneva"></SPAN></TD></TR>
					<TR>
                      <TD vAlign=top align=left height=25><SPAN style="FONT-FAMILY: verdana,geneva">Фактура</SPAN></TD>
                      <TD vAlign=center top align=left>
                                  
					              <SELECT name=rus_fak id=menu1 style="display:yes; background:#9ebef1; FONT: 12px Arial;">
					              <OPTION value=600 selected>Матовый белый (ширина 140см)</OPTION>
						          <OPTION value=600>Глянцевый белый (ширина 140см)</OPTION></SELECT>
								  
								  <SELECT id=menu2 style="display:none; background:#9ebef1; FONT: 12px Arial;" name=ger_fak>
								  <OPTION style="FONT: 12px Arial;" value=850 selected>Матовый белый (ширина 200см)</OPTION>
								  <OPTION value=1150>Матовый белый (ширина 270см)</OPTION>
								  <OPTION value=950>Матовый цветной (ширина 200см)</OPTION>
								  <OPTION value=1200>Матовый цветной (ширина 270см)</OPTION>
								  <OPTION value=850>Сатин белый (ширина 200см)</OPTION>
								  <OPTION value=950>Сатин цветной (ширина 200см)</OPTION>
								  <OPTION value=950>Глянец белый (ширина 130см)</OPTION>
								  <OPTION value=1150>Глянец белый (ширина 180см)</OPTION>
								  <OPTION value=950>Глянец цветной (ширина 130см)</OPTION>
								  <OPTION value=1150>Глянец цветной (ширина 180см)</OPTION>
								  <OPTION value=2200>Металлик (ширина 130см)</OPTION>
								  <OPTION value=2700>Перламутр (ширина 130см)</OPTION></SELECT>
								  
								  <SELECT id=menu3 style="display:none; background:#9ebef1; FONT: 12px Arial;" name=fra_fak>
					              <OPTION value=1500 selected>Глянец белый (ширина 150см)</OPTION>
						          <OPTION value=1500>Глянец цветной (ширина 150см)</OPTION></SELECT>
								  
								  
								  </TD></TR>    
                    <TR>
                      <TD vAlign=top align=left><SPAN 
                        style="FONT-FAMILY: verdana,geneva">Площадь  <font color=#ff0000>*</font></SPAN></TD>
                      <TD vAlign=top align=left><INPUT style="background:#acc7f2" size=2 
                        value="5" name=plsh><SPAN 
                        style="FONT-FAMILY: verdana,geneva"> (кв.м)</SPAN></TD></TR>
                    <TR>
                      <TD vAlign=top align=left><SPAN 
                        style="FONT-FAMILY: verdana,geneva">Кол-во 
                      углов</SPAN></TD>
                      <TD vAlign=top align=left><INPUT style="background:#b7cef4" size=2 
                        value=4 name=ugol><SPAN 
                        style="FONT-FAMILY: verdana,geneva"> (шт.)</SPAN></TD></TR>
                    <TR>
                      <TD vAlign=top align=left><SPAN 
                        style="FONT-FAMILY: verdana,geneva">Обход  
                        трубы</SPAN></TD>
                      <TD vAlign=top align=left><INPUT style="background:#c2d5f6" size=2 
                        value=0 name=trub><SPAN 
                        style="FONT-FAMILY: verdana,geneva"> (шт.)</SPAN></TD></TR>
					<TR>
                      <TD vAlign=top align=left><SPAN 
                        style="FONT-FAMILY: verdana,geneva">Монтаж люстры</SPAN></TD>
                      <TD vAlign=top align=left><INPUT style="background:#cddcf8" size=2 
                        value=0 name=lustr><SPAN 
                        style="FONT-FAMILY: verdana,geneva"> (шт.)</SPAN></TD></TR>
					<TR>
                      <TD vAlign=top align=left><SPAN 
                        style="FONT-FAMILY: verdana,geneva">Монтаж точечных светильноков</SPAN></TD>
                      <TD vAlign=top align=left><INPUT style="background:#d8e3fa" size=2 
                        value=0 name=toch_swet><SPAN 
                        style="FONT-FAMILY: verdana,geneva"> (шт.)</SPAN></TD></TR>
                    <TR>
                      <TD vAlign=top align=left><SPAN 
                        style="FONT-FAMILY: verdana,geneva">Монтаж трансформатора</SPAN></TD>
                      <TD vAlign=top align=left><INPUT style="background:#e3eafc" size=2 
                        value=0 name=trans><SPAN 
                        style="FONT-FAMILY: verdana,geneva"> (шт.)</SPAN></TD></TR>
					<TR>
                      <TD vAlign=top align=left><SPAN 
                        style="FONT-FAMILY: verdana,geneva">Монтаж вентиляции</SPAN></TD>
                      <TD vAlign=top align=left><INPUT style="background:#eef1fe" size=2 
                        value=0 name=went><SPAN 
                        style="FONT-FAMILY: verdana,geneva"> (шт.)</SPAN></TD></TR>
                    <TR>
                      <TD vAlign=top align=left><SPAN 
                        style="FONT-FAMILY: verdana,geneva">Монтаж гардины потолочной</SPAN></TD>
                      <TD vAlign=top align=left><SELECT style="background:#f4f6ff" 
                        name=gardiny><OPTION value=1 selected>Нет</OPTION>
						<OPTION value=2>Да</OPTION></SELECT><SPAN 
                        style="FONT-FAMILY: verdana,geneva"></SPAN></TD></TR>
                    <TR>
                      <TD vAlign=top align=left><SPAN 
                        style="FONT-FAMILY: verdana,geneva">Монтаж датчика пожарной сигнализации</SPAN></TD>
                      <TD vAlign=top align=left><INPUT style="background:#f8fbff" size=2 
                         value=0 name=pog_sign><SPAN 
                        style="FONT-FAMILY: verdana,geneva"> (шт.)</SPAN></TD></TR>
                    
                    
                    <TR>
                      <TD vAlign=top align=left height=25><SPAN 
                        style="FONT-FAMILY: verdana,geneva">Цена натяжного 
                        потолка</SPAN></TD>
                      <TD id=calcResult vAlign=top align=left><SPAN 
                        style="FONT-FAMILY: verdana,geneva">-- --</SPAN></TD></TR>
                    <TR>
                      <TD vAlign=top align=left><INPUT class=knopka onclick="countt();" type=button value="Узнать стоимость"><SPAN 
                        style="FONT-FAMILY: verdana,geneva"></SPAN></TD>
                      <TD vAlign=top align=left><INPUT class=knopka onclick="inverse_elem1(1,'menu'),sbros()" type=button value=Сброс><SPAN 
                        style="FONT-FAMILY: verdana,geneva"></SPAN></TD></TR></TBODY></TABLE></form></td></tr></tbody></table>

Я не привожу подробный разбор калькулятора, т.к. считаю что в этом нет смысла, ибо все они отличаются дрег от друга алгоритмом расчетов. Но суть их везде одинакова. Если кому-то будет необходим такой калькулятор, он может скачать его скрипт, разобрать его(он достаточно простой) и использовать как основу для своего калькулятора подкорректировав как нужно алгоритм расчета. Если будут проблемы свяжитесь со мной, я Вам помогу.

И Вы будите использовать скрипт прямо из моей библиотеки не загружая его к себе на страницу.
Вы экономите место и время.

Если Вы хотите иметь скрипт, чтобы изменять и другие его параметры, воспользуйтесь функцией [Скачать с сервера].
Если Вы не видите этой функции в []- следовательно Вы не зарегистрированы на сайте.Вам надо зарегистрироваться и войти как Пользователь.