Калькулятор стоимости ₽ скрипт для сайта

Простой калькулятор <select> & <option>

Чтобы сделать простой калькулятор цены используем тег <select> и создаём список вложенных <option> с названиями, в атрибуте value="СУММА" указываем цену.

© Нажмите на значёк в редакторе.

<select name="calculator" id="cost-calculator"> <option value="1000">Цена по умолчанию</option> <option value="2000">Дополнительная цена 1</option> <option value="3000">Дополнительная цена 2</option> <option value="4000">Дополнительная цена 3</option> <option value="5000">Дополнительная цена 4</option> <option value="6000">Дополнительная цена 5</option> </select> <div id="price">Цена: 1000 руб</div> <script> document.getElementById("cost-calculator").addEventListener("change", function () { document.getElementById('price').innerHTML = "Цена: " + this.value; }); </script>

Калькулятор <select> & <option> с дополнением

Калькулятор с возможностью текстового дополнения раскрывающимся <option> тега <select> части скрипта разделены комментариями.

<select name="calculator" id="cost-calculator" onchange="costCalculator()"> <option value="1000">Цена по умолчанию</option> <option value="2000">Дополнительная цена 1</option> <option value="3000">Дополнительная цена 2</option> <option value="4000">Дополнительная цена 3</option> <option value="5000">Дополнительная цена 4</option> <option value="6000">Дополнительная цена 5</option> </select> <div id="price">Цена: 1000 руб</div> <div id="additionally">Дополнительный параметр по умолчанию</div> <div id="2000" style="display: none">Дополнительный параметр по умолчанию 1</div> <div id="3000" style="display: none">Дополнительный параметр по умолчанию 2</div> <div id="4000" style="display: none">Дополнительный параметр по умолчанию 3</div> <div id="5000" style="display: none">Дополнительный параметр по умолчанию 4</div> <div id="6000" style="display: none">Дополнительный параметр по умолчанию 5</div> <script> //Скрипт простого калькулятора document.getElementById("cost-calculator").addEventListener("change", function () { document.getElementById('price').innerHTML = "Цена: " + this.value; }); //Скрипт дополнения function costCalculator() { document.getElementById('additionally').innerHTML = document.getElementById(document.getElementById('cost-calculator').value).innerHTML } </script>

Калькулятор <select> & <option> + <select> & <option>

Калькулятор для тега <select>, использования 2 и более выпадающих списков <option> для примера используется скрипт на два списка.

<select onchange="costCalculator()" id="oneType"> <option value="500">По умолчанию</option> <option value="1000">Пункт 1</option> <option value="2000">Пункт 2</option> <option value="3000">Пункт 3</option> </select> <div><span id="oneRezult">500</span> руб</div> <select onchange="costCalculator()" id="twoType"> <option value="500">По умолчанию</option> <option value="1000">Пункт 1</option> <option value="2000">Пункт 2</option> <option value="3000">Пункт 3</option> </select> <div><span id="twoRezult">500</span> руб</div> <div>Итого:</div> <div><span id="result">1000</span> руб</div> <script> function costCalculator() { //Типы списков var oneType = document.getElementById("oneType"); var twoType = document.getElementById("twoType"); //Результаты списков var result = document.getElementById("oneRezult"); var result = document.getElementById("twoRezult"); //Общий результат var result = document.getElementById("result"); //Цена в списках по умолчанию var onePrice = 500; var twoPrice = 500; //Общая цена = сумма цен по умолчанию var Price = 1000; //Получаем значения списков onePrice += parseInt(oneType.options[oneType.selectedIndex].value); twoPrice += parseInt(twoType.options[twoType.selectedIndex].value); //Складываем типы списков + имя списка Price=onePrice + twoPrice; //Результат для списков oneRezult.innerHTML = onePrice; twoRezult.innerHTML = twoPrice; //Общий результат result.innerHTML = Price; } </script>

Калькулятор <input type="text"> + <input type="text">

Калькулятор использования текстовых полей <input type="text"> чтобы посетитель мог сам вводить свои значения.

<input type="text" id="oneType" value="0" onchange="costCalculator()" /> <div><span id="oneRezult">0</span> руб</div> <input type="text" id="twoType" value="0" onchange="costCalculator()" /> <div><span id="twoRezult">0</span> руб</div> <div>Итого:</div> <div><span id="result">0</span> руб</div> <script> function costCalculator() { //Типы полей var oneType = document.getElementById("oneType"); var twoType = document.getElementById("twoType"); //Результаты полей var result = document.getElementById("oneType"); var result = document.getElementById("twoType"); //Общий результат var result = document.getElementById("result"); //Цена в полях по умолчанию var onePrice = 0; var twoPrice = 0; //Общая цена var price = 0; //Умножаем значение на *ЧИСЛО onePrice += parseInt(oneType.value)*500; twoPrice += parseInt(twoType.value)*1000; //Складываем типы полей + имя списка price=onePrice + twoPrice; //Результат для полей oneRezult.innerHTML = onePrice; twoRezult.innerHTML = twoPrice; //Общий результат result.innerHTML = price; } </script>

Калькулятор <input type="checkbox"> + <input type="checkbox">

Калькулятор для использования флажков <input type="checkbox"> возможно использование неограниченного количества.

Добавить значение: <input type="checkbox" id="oneType" value="500" onchange="costCalculator()" /> <div>Сумма: <span id="oneRezult">0</span> руб.</div> Добавить значение1: <input type="checkbox" id="twoType" value="1000" onchange="costCalculator()" /> <div>Сумма: <span id="twoRezult">0</span> руб.</div> <div>Общая сумма:</div> <div><span id="result">0</span> руб.</div> <script> function costCalculator() { //Типы флажков var oneType = document.getElementById("oneType"); var twoType = document.getElementById("twoType"); //Результаты флажков var result = document.getElementById("oneType"); var result = document.getElementById("twoType"); //Общий результат var result = document.getElementById("result"); //Цена для флажков по умолчанию var onePrice = 0; var twoPrice = 0; //Общая цена var price = 0; //Умножаем значение на *ЧИСЛО onePrice += (oneType.checked == true) ? parseInt(oneType.value) : 0; twoPrice += (twoType.checked == true) ? parseInt(twoType.value) : 0; //Складываем типы флажков + имя списка price=onePrice + twoPrice; //Результат для полей oneRezult.innerHTML = onePrice; twoRezult.innerHTML = twoPrice; //Общий результат result.innerHTML = price; } </script>

Калькулятор <select> & <option> + <input type="text"> + <input type="checkbox">

Скрипт калькулятора для тега <select> и элементов списка <option>, а так же для тегов <input type="text"> и <input type="checkbox">.

<select onchange="costCalculator()" id="oneType"> <option value="0">Выберите из списка</option> <option value="1000">Первый в списке</option> <option value="2000">Второй в списке</option> <option value="3000">Третий в списке</option> </select> <div>Сумма: <span id="oneRezult">0</span> руб</div> Добавить значение: <input type="checkbox" id="twoType" value="500" onchange="costCalculator()" /> <div>Сумма: <span id="twoRezult">0</span> руб</div> Ваше значение: <input type="text" id="threeType" value="0" onchange="costCalculator()" /> <div>Сумма: <span id="threeRezult">0</span> руб</div> <div>Общая сумма:</div> <div><span id="result">0</span> руб.</div> <script> function costCalculator() { //Типы выбора var oneType = document.getElementById("oneType"); var twoType = document.getElementById("twoType"); var threeType = document.getElementById("threeType"); //Результаты выбора var result = document.getElementById("oneType"); var result = document.getElementById("twoType"); var result = document.getElementById("threeType"); //Общий результат var result = document.getElementById("result"); //Цена для выбора по умолчанию var onePrice = 0; var twoPrice = 0; var threePrice = 0; //Общая цена var price = 0; //Умножаем значение на *ЧИСЛО onePrice += parseInt(oneType.options[oneType.selectedIndex].value); twoPrice += (twoType.checked == true) ? parseInt(twoType.value) : 0; threePrice += parseInt(threeType.value)*1000; //Складываем типы выбора price=onePrice + twoPrice + threePrice; //Результат для выбора oneRezult.innerHTML = onePrice; twoRezult.innerHTML = twoPrice; threeRezult.innerHTML = threePrice; //Общий результат result.innerHTML = price; } </script>

Калькулятор стоимости для bootstrap

Калькулятор стоимости для сайта с подключенным плагином bootstrap, используются его базовые селекторы, настроены стили и скрипт.

<style> select#oneType { margin:5px 0 8px 0; } .dateTime { font-weight:bold; } hr { margin:10px; } #oneRezult, #twoRezult, #twoRezult1, #threeRezult, #result { font-weight:bold; color:red; } .zakaz { margin-top:20px; } .rub { color:green; } .result { font-weight:bold; font-size:32px; } </style> <div class="container"> <div class="row"> <div class="col-xs-12"> <div class="col-md-6"> <select onchange="costCalculator()" id="oneType" class="form-control"> <option value="0">Заказать изготовление сайта</option> <option value="5000">Landing Page</option> <option value="7000">Сайт портфолио</option> <option value="20000">Интернет магазин</option> </select> <strong>Сумма: от <span id="oneRezult">0</span> <span class="rub">&#8381;</span></strong> <div id="additionally"></div> <div id="5000" style="display: none">Изготовление <span class="dateTime">1</span> неделя</div> <div id="7000" style="display: none">Изготовление <span class="dateTime">2</span> недели</div> <div id="20000" style="display: none">Изготовление <span class="dateTime">1</span> месяц</div> <hr> <p>Подключение домена: <input type="checkbox" id="twoType" value="500" onchange="costCalculator()" /></p> <strong>Сумма: <span id="twoRezult">0</span> <span class="rub">&#8381;</span></strong> <hr> <p>Подключение хостинга 1 год: <input type="checkbox" id="twoType1" value="3600" onchange="costCalculator()" /></p> <strong>Сумма: от <span id="twoRezult1">0</span> <span class="rub">&#8381;</span></strong> <hr> <p>Материалов в магазине: <input type="text" id="threeType" value="0" onchange="costCalculator()" /></p> <strong>Сумма: <span id="threeRezult">0</span> <span class="rub">&#8381;</span> от 100 материалов</strong> <hr> <p class="result text-center">&#126; <span id="result">0</span> <span class="rub">&#8381;</span></p> </div> <div class="col-md-6"> <img src="https://atmpl.ucoz.rubaner/gif/atmpl-650x480.gif" alt="Банэр aTmpl" class="img-responsive center-block" /> </div> <div class="col-md-12"> <a href="https://atmpl.ucoz.ru/index/to_make_responsive_website/0-2" class="btn btn-default btn-lg center-block zakaz">ЗАКАЗАТЬ</a> </div> </div> </div> </div> <script> function costCalculator() { //Типы выбора var oneType = document.getElementById("oneType"); var twoType = document.getElementById("twoType"); var twoType1 = document.getElementById("twoType1"); var threeType = document.getElementById("threeType"); //Результаты выбора var result = document.getElementById("oneType"); var result = document.getElementById("twoType"); var result = document.getElementById("twoType1"); var result = document.getElementById("threeType"); //Общий результат var result = document.getElementById("result"); //Цена для выбора по умолчанию var onePrice = 0; var twoPrice = 0; var twoPrice1 = 0; var threePrice = 0; //Общая цена var price = 0; //Умножаем значение на *ЧИСЛО onePrice += parseInt(oneType.options[oneType.selectedIndex].value); twoPrice += (twoType.checked == true) ? parseInt(twoType.value) : 0; twoPrice1 += (twoType1.checked == true) ? parseInt(twoType1.value) : 0; threePrice += parseInt(threeType.value)*30; //Складываем типы выбора price=onePrice + twoPrice + twoPrice1 + threePrice; //Результат для выбора oneRezult.innerHTML = onePrice; twoRezult.innerHTML = twoPrice; twoRezult1.innerHTML = twoPrice1; threeRezult.innerHTML = threePrice; //Общий результат result.innerHTML = price; //Дополнительная информация document.getElementById('additionally').innerHTML = document.getElementById(document.getElementById('oneType').value).innerHTML } </script>

Скачать скрипт калькулятора стоимости

Скачать с сервера Скачать с GitHub

---

1 2 3 4 5

Рейтинг: 4.8/5 из 18

---

---

• Комментарии
• Комментировать
• Сведения