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

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

Заявка на бесплатную консультацию

Для бесплатной консультации укажите свое имя и номер телефона в форме ниже. Я перезвоню Вам и отвечу на все вопросы.

    Даю свое согласие на обработку персональных данных.

    ×
    Заказать сайт

    Чтобы заказать сайт заполните форму ниже. Я перезвоню Вам, отвечу на все вопросы, приму Ваш заказ и назову его ориентировочную стоимость.

      Даю свое согласие на обработку персональных данных.

      ×
      Заказать сайт по акции "Все включено"

      Для заказа сайта по акции «Все включено» заполните форму ниже. Я перезвоню Вам, отвечу на все вопросы, и приму Ваш заказ.

        Даю свое согласие на обработку персональных данных.

        ×
        Заказ услуги

        Для заказа услуги заполните форму ниже. Я перезвоню Вам, чтобы уточнить подробности, оговорить сроки и стоимость услуги.

          Даю свое согласие на обработку персональных данных.

          ×