Показать сообщение отдельно
  #34 (permalink)  
Старый 12.08.2017, 12:00
Аватар для MC-XOBAHCK
Профессор
Отправить личное сообщение для MC-XOBAHCK Посмотреть профиль Найти все сообщения от MC-XOBAHCK
 
Регистрация: 06.08.2017
Сообщений: 473

Вот мой макет калькулятора. Урезал до двух комнат, но в оригинале их очень много, состоящих из самых разных геометрических фигур.

<meta charset="utf-8">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
	<style>
		.plos {padding: 10px;background: #eee;border: solid 1px #bbb;border-radius: 6px;}
		.st1 {display: inline-block;margin-top: 8px;width: 115px;text-align: right;}
		.st2 {display: inline-block;}
		input {width: 110px;}
		input[type="radio"] {width: 25px;}
		.col-sm-4 {display: inline-table;width: 270px;}
	</style>
		<br>
	<label><input type="radio" name="unit" value="2" checked="" /> метры</label>
	<label><input type="radio" name="unit" value="0" /> миллиметры</label>
		<br>
	<h3>Площадь стен первой комнаты</h3>
	<p>Четыре стены прямоугольные - противоположные стены равны</p>
	<img src="">
	<div class="row plos">			
		<div class="col-sm-4">
			<h4>Стена 1</h4>
			<div class="st1">Длина стены: </div>
			<div class="st2"><input id="val_1" /><span class="unit"> м</span></div>
			<div class="st1">Высота стены: </div>
			<div class="st2"><input id="val_2" /><span class="unit"> м</span></div>	
		</div>
		<div class="col-sm-4">
			<h4>Стена 2</h4>
			<div class="st1">Длина стены: </div>
			<div class="st2"><input id="val_3" /><span class="unit"> м</span></div>
			<div class="st1">Высота стены: </div>
			<div class="st2"><input id="val_4" /><span class="unit"> м</span></div>
		</div>
		<div class="col-sm-4">
			Площадь стены 1: <span id="pl_st1"></span> м.кв.<br>
			Площадь стены 2: <span id="pl_st2"></span> м.кв.<br>
			ПЛОЩАДЬ СТЕН КОМНАТЫ = <span id="pl_kom1"></span> м.кв.<br>
		</div>	
	</div>

		<br><br><hr>

	<h3>Площадь второй комнаты</h3>
		<p>Две стены треугольные, две трапецеобразные. Противоположные стены равны</p>
		<img src="http://i.piccy.info/i9/ca5245132c18ab571261f288332729a8/1502519418/5491/1170341/maket_tre_tra.jpg">
	<div class="row plos">			
		<div class="col-sm-4">
			<h4>Треугольная стена</h4>
				<div class="st1">Длина основания: </div>
				<div class="st2"><input id="val_5" /><span class="unit"> м</span></div>
				<div class="st1">Высота стены: </div>
				<div class="st2"><input id="val_6" /><span class="unit"> м</span></div>	
		</div>
		<div class="col-sm-4">
				<h4>Стена трапеция</h4>
				<div class="st1">Длина основания: </div>
				<div class="st2"><input id="val_7" /><span class="unit"> м</span></div>
				<div class="st1">Длина потолка: </div>
				<div class="st2"><input id="val_8" /><span class="unit"> м</span></div>
				<div class="st1">Высота стены: </div>
				<div class="st2"><input id="val_9" /><span class="unit"> м</span></div>
		</div>
		<div class="col-sm-4">
			Площадь треугольной стены: <span id="treugoln"></span> м.кв.<br>
			Площадь трапецеобразной стены:<span id="trapets"></span> м.кв.<br>
			ПЛОЩАДЬ СТЕН КОМНАТЫ = <span id="pl_kom2"></span> м.кв.<br>
		</div>	
	</div>

		<br><br>

<script>
//Площадь прямоугольника
    function s_pr(a, b) {
        a = parseFloat(a);
        b = parseFloat(b);
        var s = a * b;
        return s;
    }
    //Площадь треугольника через высоту
    function s_tr(a, h) {
        a = parseFloat(a);
        h = parseFloat(h);
        var s = a * 0.5 * h;
        return s;
    }
    //Площадь трапеции
   function s_trap(a, b, h) {
	a = parseFloat(a);
	b = parseFloat(b);
	h = parseFloat(h);
	var s = (+a + +b) * 0.5 * h;
	return s;
}
// и так далее по всевозможной геометрии...


//Обработчик
$('document').ready(function(){
    $('input').on('keyup', function(){
        //Площадь стен первой комнаты
        var a = $('#val_1').val().replace(/,/,'.').replace(/[^\d\.]/g,'');
        var b = $('#val_2').val().replace(/,/,'.').replace(/[^\d\.]/g,'');
        var pl_st1;
        pl_st1 = s_pr(a, b);    //обращение к функции  s_pr(a, b) площадь прямоугольника
        $('#pl_st1').html(pl_st1.toFixed(2));  //площадь стены 1
        var a = $('#val_3').val().replace(/,/,'.').replace(/[^\d\.]/g,'');
        var b = $('#val_4').val().replace(/,/,'.').replace(/[^\d\.]/g,'');
        var pl_st2;
        pl_st2 = s_pr(a, b);
        $('#pl_st2').html(pl_st2.toFixed(2));  //площадь стены 2
        var kom1;
        kom1 = (+pl_st1 + +pl_st2) * 2;
        $('#pl_kom1').html(kom1.toFixed(2));   //площадь стен первой комнаты
 
       
       //Площадь второй комнаты
        var a = $('#val_5').val().replace(/,/,'.').replace(/[^\d\.]/g,'');
        var h = $('#val_6').val().replace(/,/,'.').replace(/[^\d\.]/g,'');
        var tr_st_k2 = s_tr(a, h);
        $('#treugoln').html(tr_st_k2.toFixed(2));  //площадь треугольной стены
        var a = $('#val_7').val().replace(/,/,'.').replace(/[^\d\.]/g,'');
        var b = $('#val_8').val().replace(/,/,'.').replace(/[^\d\.]/g,'');
        var h = $('#val_9').val().replace(/,/,'.').replace(/[^\d\.]/g,'');
        var trap_st_k2 = s_trap(a, b, h);
        $('#trapets').html(trap_st_k2.toFixed(2)); //площадь трапецевидной стены
        var kom2 = +tr_st_k2 + +trap_st_k2;
        $('#pl_kom2').html(kom2.toFixed(2));   //площадь стен второй комнаты
 
    });
});

</script>

В скрипте сначала идут функции - расчёты площадей фигур. Фигур много, с разными вариантами расчёта (через высоту, полупериметр и т.п.). Все они в результате отдают площадь конкретной фигуры.
Что касается комнат, то они не ограничиваются только четырьмя стенами (есть 2, 3, 5, 6, 8 стен и т.д.)

Обработчик - парсит данные, делает расчёт и возвращает результат. Я одну комнату прописал, остальные по аналогии - парсят по id и возвращают результаты тоже в id.

Как связать это с кнопками и сделать так же круто как у laimas я не знаю. Но хорошо что есть его вариант - есть к чему стремиться.

Последний раз редактировалось MC-XOBAHCK, 15.08.2017 в 12:14.
Ответить с цитированием