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

Опубликовано: 27 июня, 2019 в категории: Полезное на сайт

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

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

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

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

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

<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 не будет опубликован.

Обратный звонок


Оставьте номер Вашего телефона и я перезвоню Вам!