Калькулятор для сайта на JavaScript. Данный пример простого онлайн клькулятора, который предназначен для расчета стоимости создания сайта, но при желании и с помощью небольшой переделки может быть использован для любых расчетов.
В коде калькулятора используется только JavaScript и HTML и следовательно данное решение может применяться на любом сайте (html, php, CMS)
Пример использования на HTML сайте - http://ht.brooksite.ru/calc.html
Пример использования на сайте под управлением CMS Joomla - http://mastershtuk.ru/raschet-stoimosti-rabot
Код онлайн калькулятора:
<script type="text/javascript"> function calc() { var type_cms = document.getElementById("type_cms"); var type_design = document.getElementById("type_design"); var type_host = document.getElementById("type_host"); var soprovozhdenie = document.getElementById("soprovozhdenie"); var content = document.getElementById("content"); var seo = document.getElementById("seo"); var type_forum = document.getElementById("type_forum"); var comment = document.getElementById("comment"); var gallery = document.getElementById("gallery"); var eshop = document.getElementById("eshop"); var eshop_content = document.getElementById("eshop_content"); //Result var result = document.getElementById("result_cms"); var result = document.getElementById("result_design"); var result = document.getElementById("soprovozhdenie"); var result = document.getElementById("content"); var result = document.getElementById("seo"); var result = document.getElementById("type_forum"); var result = document.getElementById("comment"); var result = document.getElementById("gallery"); var result = document.getElementById("eshop"); var result = document.getElementById("eshop_content"); var result = document.getElementById("result"); var price_cms = 0; var price_design = 0; var price_host = 0; var price_soprovozhdenie = 0; var price_content = 0; var price_seo = 0; var price_forum = 0; var price_comment = 0; var price_gallery = 0; var price_eshop = 0; var price_eshop_content = 0; var price = 0; price_cms += parseInt(type_cms.options[type_cms.selectedIndex].value); price_design += parseInt(type_design.options[type_design.selectedIndex].value); price_host += (type_host.checked == true) ? parseInt(type_host.value) : 0; price_soprovozhdenie += parseInt(soprovozhdenie.value)*1000; price_content += parseInt(content.value)*500; price_seo += (seo.checked == true) ? parseInt(seo.value) : 0; price_forum += parseInt(type_forum.options[type_forum.selectedIndex].value); price_comment += (comment.checked == true) ? parseInt(comment.value) : 0; price_gallery += (gallery.checked == true) ? parseInt(gallery.value) : 0; price_eshop += (eshop.checked == true) ? parseInt(eshop.value) : 0; price_eshop_content += (eshop_content.checked == true) ? parseInt(eshop_content.value) : 0; price=price_cms + price_design + price_host + price_soprovozhdenie + price_content + price_seo + price_forum + price_comment + price_gallery + price_eshop + price_eshop_content; result_cms.innerHTML = price_cms; result_design.innerHTML = price_design; result_host.innerHTML = price_host; result_soprovozhdenie.innerHTML = price_soprovozhdenie; result_content.innerHTML = price_content; result_seo.innerHTML = price_seo; result_forum.innerHTML = price_forum; result_comment.innerHTML = price_comment; result_gallery.innerHTML = price_gallery; result_eshop.innerHTML = price_eshop; result_eshop_content.innerHTML = price_eshop_content; result.innerHTML = price; } </script> <table> <tr> <td width="150">Базовая стоимость сайта с системой управления (CMS)</td> <td width="250">Информация о CMS JoomlaCMS Joomla!<br/> Информация о CMS WordpressWordPress <br/> Информация о CMS Drupal</td> <td width="100"><select onchange="calc()" id="type_cms"> <option value="0">Выбрать</option> <option value="5000">Joomla</option> <option value="6000">Wordpress</option> <option value="7000">Drupal</option> <option value="1000">Html</option> </select> </td> <td width="200"><span id="result_cms">0</span> руб.</td> </tr> <!-- 2design// --> <tr> <td width="150">Дизайн сайта</td> <td width="250"></td> <td width="100"><select onchange="calc()" id="type_design"> <option value="0">Выбрать</option> <option value="5000">Индивидуальный дизайн</option> <option value="1000">Шаблонный дизайн</option> <option value="550">Ваш дизайн</option> </select> </td> <td width="200"><span id="result_design">0</span> руб.</td> </tr> <!-- 3hosting// --> <tr> <td width="150">Хостинг + регистрация доменного имени сайта (на 12 месяцев)</td> <td width="250">Выбор хостинга и доменного имени</td> <td width="100"><input type="checkbox" onchange="calc()" value="1500" id="type_host" /></td> <td width="200"><span id="result_host">0</span> руб.</td> </tr> <!--4soprovozhdenie//--> <tr> <td width="150">Дальнейшее сопровождение сайта (количество месяцев)</td> <td width="250">Подробнее о сопровождении</td> <td width="100"><input type="text" id="soprovozhdenie" value="0" onchange="calc()" /></td> <td width="200"><span id="result_soprovozhdenie">0</span> руб.</td> </tr> <!--5content//--> <tr> <td width="150">Наполнение контентом (количество статей)</td> <td width="250">Написание и (или) размещение статей и материалов на сайте</td> <td width="100"><input type="text" id="content" value="0" onchange="calc()" /></td> <td width="200"><span id="result_content">0</span> руб.</td> </tr> <!-- 6SEO// --> <tr> <td width="150">Поисковая оптимизация</td> <td width="250">Комплекс мер для поднятия позиций сайта в результатах выдачи поисковых систем</td> <td width="100"><input type="checkbox" onchange="calc()" value="1000" id="seo" /></td> <td width="200"><span id="result_seo">0</span> руб.</td> </tr> <!-- 7forum// --> <tr> <td width="150">Установка и настройка форума</td> <td width="250"></td> <td width="100"><select onchange="calc()" id="type_forum"> <option value="0">Без форума</option> <option value="1500">Форум встроенные в сайт</option> <option value="1000">Внешний форум</option> </select> </td> <td width="200"><span id="result_forum">0</span> руб.</td> </tr> <!-- 8comment// --> <tr> <td width="150">Установка компонента комментариев к статьям</td> <td width="250"></td> <td width="100"><input type="checkbox" onchange="calc()" value="100" id="comment" /></td> <td width="200"><span id="result_comment">0</span> руб.</td> </tr> <!-- 9gallery// --> <tr> <td width="150">Фотогалерея</td> <td width="250">Установка, настройка и размещение изображений на сайте в виде фотогалереи</td> <td width="100"><input type="checkbox" onchange="calc()" value="1000" id="gallery" /></td> <td width="200"><span id="result_gallery">0</span> руб.</td> </tr> <tr style="background-color:#eeeeee;border:1px solid #c6c6c6"> <th style="border:none;padding:7px;background-color:#eeeeee">Интернет-магазин</th> <td style="border:none"></td> <td style="border:none"></td> <td style="border:none"></td> </tr> <!-- 10eshop// --> <tr> <td width="150">Установка и настройка интернет-магазина (только для CMS Joomla или Wordpress)</td> <td width="250"></td> <td width="100"><input type="checkbox" onchange="calc()" value="5000" id="eshop" /></td> <td width="200"><span id="result_eshop">0</span> руб.</td> </tr> <!-- 10eshop// --> <tr> <td width="150">Наполнение интернет-магазина контентом</td> <td width="250"></td> <td width="100"><input type="checkbox" onchange="calc()" value="5000" id="eshop_content" /></td> <td width="200"><span id="result_eshop_content">0</span> руб.</td> </tr> <!-- Итог --> <tr> <td width="250" class="td_result">ИТОГО:</td> <td width="150"></td> <td width="100"></td> <td class="td_result"><span id="result">0</span> руб.</td> </tr> </table>
Комментарии
RSS лента комментариев этой записи