Калькулятор натяжных потолков

Опубликовано: Июнь 27, 2019 в 9:54 дп

Простой калькулятор расчета стоимости услуг на строительный сайт сделать не очень сложно. Мы будем рассматривать простой калькулятор натяжных потолков, то есть расчета стоимости натяжных потолков. Хотя этот калькулятор можно с таким же успехом использовать для расчета стоимости укладки ламината, или другого вида строительных услуг, расчет которых зависит от стоимости материала и площади помещения.

Посмотреть пример работы простого калькулятора натяжных потолков можно здесь: калькулятор расчета стоимости натяжных потолков

А вот так я реализовал этот скрипт на одном из созданных сайтов:

калькулятор натяжных потолков

В общем, все что вам необходимо для создания калькулятора расчета стоимости натяжных потолков на своем сайте, это вставить в необходимое место код ниже:

<div class="slidecontainer">
<div >
<label for="spisok"><h4>Тип потолка:</h4></label>
<select class="spisok" name="spisok" id="spisok">
<option value="150"selected>Белый</option>
<option value="200">Цветной</option>
<option value="300">Матовый</option>
</select> <br/>
</div>
<div>
<label for="slider"><h4>Площадь помещения: <span id="demo"></span> м.кв.</h4></label>
<input type="range" name="slider" class="slider" id="slider" value="10" min="0" max="100" />
</div> <br />
<button onclick="Start();">Рассчитать!</button> <br/> <br />
<div style="font-weight:bold" id="result"></div> <!-- вывод результатов --></div> 

 

А перед закрывающимся тегом </body> вставить код самого скрипта:

<script>
var slider = document.getElementById("slider");
var output = document.getElementById("demo");
output.innerHTML = slider.value;

slider.oninput = function() {
output.innerHTML = this.value;
}

function Start(){
var spisok = document.getElementById('spisok').value;
var slider = document.getElementById('slider').value;
var result = spisok * slider;
document.getElementById('result').innerHTML = '<h4>Стоимость установки потолка: ' + result + ' руб.</h4>';//выводим получившееся значение в div с id="result"
}
</script>

И последнее, прописать стили CSS либо файл стилей, либо перед закрывающимся тегом </head>

Примерно так:

<style type="text/css">
.slidecontainer {
width: 100%;
display: inline-block;
}

.slider {
-webkit-appearance: none;
appearance: none;
color:#0000cc;
font-weight:bold;
width: 300px;
height: 25px;
border:3px solid #0000ff;
background: #d3d3d3;
outline: none;
opacity: 0.7;
-webkit-transition: .2s;
transition: opacity .2s;
}

/* Mouse-over effects */
.slider:hover {
opacity: 1;
}

.slider::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 25px;
height: 30px;
background: #0000cc;
cursor: pointer;
}
</style>

Соответственно стили можно изменять и настраивать под тему вашего сайта. Вот так просто можно установить калькулятор натяжных потолков или калькулятор других строительных услуг на ваш сайт.

Конечно этот калькулятор можно и усложнить, то есть добавить к нему например расчет углов (если это калькулятор расчета стоимости натяжных потолков), либо какие-то другие, необходимы для расчета данные.

Если необходим более сложный калькулятор, обращайтесь, всегда буду рад помочь за долю малую, например за 500 рублей)) Звоните, пишите! Всем удачи!

Понравился сайт? Поделись!

Всего комментариев: 0

Оставить комментарий

Ваш email не будет опубликован.