Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #31 (permalink)  
Старый 12.08.2017, 10:14
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 7,561

Сообщение от MC-XOBAHCK
У меня полей много, а не только два
Не важно, логика общей задачи от этого не изменится, могут быть только добавлены специфичные условия, операции, или даже разбиение полей на группы в зависимости от арифметической операции например.

Вникните в этот код:

$('input').on('keyup', function(){
        var a = $('#val_a').val().trim().replace(/,/,'.').replace(/[^\d\.]/g,'');
        var b = $('#val_b').val().trim().replace(/,/,'.').replace(/[^\d\.]/g,'');
    //.....


В чем его бессмысленность? Пусть у вас будет даже больше двух рук, вы все равно не сможете произвести ввод в несколько полей одновременно, так как в момент времени фокусом будет обладать только одно из них.

А это означает, что данный обработчик в первую очередь служит для того, чтобы обрабатывать ввод в текущее поле, поле имеющее фокус. А для этого обращаться к нему по ID нет никакой необходимости, ибо он доступен как event.target в обработчике, в JQ просто this.

Расчет же площади, это вторая задача этого обработчика, и можно получить второе поле непосредственно обратившись к нему по селектору. Но использовать для этого уникальные ID, а тем более если полей множество, это не лучший выбор. Ведь поле по которому щелкнули в общем то анонимное и проще использовать селектор братских элементов (в данном случае родителей), чем выяснять какое поле активно, хотя, конечно, можно и это описать. Но выгоднее сразу определить наборы полей которыми придется оперировать, получая из этих коллекций необходимые. И для этого тоже не лучший выбор перечислять ID всех полей когда их множество, лучше обратиться к ним как группе - по классу, типу и прочим общим для них характеристикам.

И что введено в этот момент во второе поле не важно - если оно уже имело фокус, значит прошло обработку ввода и его значение либо отвечает требованию, либо пустое. В первом случае считаем площадь, во втором случае очищаем ранее рассчитанную, если таковой расчет был, смыла то ведь нет вести расчет если заполнено только одно из полей или не одного, отображая 0 квадратных в площади.

Вот в общем-то и вся логика работы приведенного кода.

Все остальное, это лишь мазки макияжа на готовом фейсе. Они могут быть различны, иметь разные оттенки и нанесены различным способом. Фейс при этом будет иметь разный вид, но сам по себе не изменится. Например, охота иметь не м², а м.кв? Возможно добавление и других единиц измерения?

Ну так не проблема, выносим массив описывающий эти единицы вне пределов обработчика, заменяя его на объект - он будет описывать не только м, см, мм, но и операнды на которые нужно корректировать значения полей, количество значений после запятой и прочее, что может потребоваться.

Теперь можно добавлять сколь угодно кнопок, но без всяких ID, определять сколько угодно единиц, а обработчики при этом останутся такими же, править их код не потребуется.

Последний раз редактировалось laimas, 12.08.2017 в 11:37.
Ответить с цитированием
  #32 (permalink)  
Старый 12.08.2017, 11:38
Аватар для MC-XOBAHCK
Аспирант
Отправить личное сообщение для MC-XOBAHCK Посмотреть профиль Найти все сообщения от MC-XOBAHCK
 
Регистрация: 06.08.2017
Сообщений: 75

Я видел и понял на сколько Вы усовершенствовали функционал. Возразить даже не имею права. Моя проблема в том что я только начал изучать JavaScript и не могу сразу писать код. Это как впервые печатать на клавиатуре - сначала каждую букву ищешь по пять минут, со временем пальцы сами делают своё дело.
Поэтому все ответы в этой теме разбираю по крупицам по учебнику сайта и гуглу. Что то откладывается сразу, к чему то возвращаюсь по нескольку раз. Возможно через пару месяцев смогу начать осмысленно писать код, а пока только учусь и лучшая наука - это боевые условия.
Ответить с цитированием
  #33 (permalink)  
Старый 12.08.2017, 11:45
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 7,561

Мы все учились понемногу чему нибудь и как нибудь, это естественно.

Для закрепления - $('#val_a').val().trim().replace(/,/,'.').replace(/[^\d\.]/g,''); - здесь .trim(), это лишняя операция, так как тут .replace(/[^\d\.]/g,''), все что не цифры и точка и так будет вырезано.

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

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

<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 в 13:14.
Ответить с цитированием
  #35 (permalink)  
Старый 12.08.2017, 17:22
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 7,561

Еще раз - не надо увлекаться идентификаторами, в данном случае, это зло.

Для решения этой задачи (специфики расчета) нужно разбить поля ввода на группы по типу стен используя классы. При этом назначение обработчика полей ввода остается прежним - первое, это обработка ввода, второе расчет площадей.

Шаблон замены запятой на точку при вводе в поле изменен на /[,\.]+/ с прежнего /,/. Я не буду уточнять почему, попробуйте понять сами, можно руководствоваться при этом этим. Не получится, тогда можно и пояснить.

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

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

<html>
<head>
<meta charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>
function calculate(group, values) {
    var a, b;
    switch(group) {
        case 'rectangle': a = values[0] * values[1], b = values[2] * values[3];
                          return [a, b, a && b ? (a + b) * 2 : 0];
                          break;
        case 'triangle':  a = values[0] * values[1] * .5, b = (values[2] + values[3]) * values[4] * .5;
                          return [a, b, a && b ? (a + b) * 2 : 0];  
    }   
}

$(function() {
    var dim = ['мм',,'м'], //единицы измерения
        side = $('input.rectangle, input.triangle') //получаем и кешируем все поля ввода
        .on('keyup', function() {
            //обработка ввода в поле
            this.value = this.value.replace(/[,\.]+/,'.').replace(/[^\d.]/,'');
                //имя группы определяющее задачи
            var group = this.className,
                //получаем значения всех полей ввода текущей группы
                values = $.map(side.filter('.'+group), function(e) {
                    var v = parseFloat(e.value);
                    return v || 0
                }),
                //получаем текущие единицы измерения
                u = +unit.filter(':checked').val(),
                //производим расчет
                area = calculate(group, values);
                
            //получаем элементы вывода площадей текущей группы и выводим результаты расчета
            $(this).closest('div.'+group).find('.area').each(function(i, e) {
                $(e).text(
                    area[i] ? area[i].toFixed(u) + ' ' + dim[u]+'²' : ''   
                )
            })            
    }), 
    unit = $('[name="unit"]')
        .change(function() {
            var u = +this.value;
            $('.unit').text(dim[u]); 
            side.val(function() {
                //добавлено в свете подумать, почему нужен шаблон /[,\.]+/ вместо /,/
                var v = parseFloat(this.value); 
                if(v) return u
                        ? v / 1000
                        : v * 1000
            });
            //изменить рассчитанные площади в соответствии выбранных единиц
            $('span.area').text(function(i, v) {
                v = parseFloat(v);
               if(v) return (u ? v / 1000 : v * 1000).toFixed(u) + ' ' + dim[u]+'²'    
            })
    });
});
  </script>
</head>
  
<body>
    <label><input type="radio" name="unit" value="2" checked="" /> метры</label>
    <label><input type="radio" name="unit" value="0" /> миллиметры</label>
    <h3>Площадь стен первой комнаты</h3>
    <p>Четыре стены прямоугольные - противоположные стены равны</p> 
    <div class="row plos rectangle">           
        <div class="col-sm-4">
            <h4>Стена 1</h4>
            <div class="st1">Длина стены: </div>
            <div class="st2"><input class="rectangle" /> <span class="unit">м</span></div>
            <div class="st1">Высота стены: </div>
            <div class="st2"><input class="rectangle" /> <span class="unit">м</span></div>  
        </div>
        <div class="col-sm-4">
            <h4>Стена 2</h4>
            <div class="st1">Длина стены: </div>
            <div class="st2"><input class="rectangle" /> <span class="unit">м</span></div>
            <div class="st1">Высота стены: </div>
            <div class="st2"><input class="rectangle" /> <span class="unit">м</span></div>
        </div>
        <div class="col-sm-4">
            Площадь стены 1: <span class="area"></span><br>
            Площадь стены 2: <span class="area"></span><br>
            ПЛОЩАДЬ СТЕН КОМНАТЫ: <span class="area"></span>
        </div>   
    </div>
 
    <h3>Площадь второй комнаты</h3>
    <p>Две стены треугольные, две трапецеобразные. Противоположные стены равны</p>
    <div class="row plos triangle">           
        <div class="col-sm-4">
            <h4>Треугольная стена</h4>
                <div class="st1">Длина основания: </div>
                <div class="st2"><input class="triangle" /> <span class="unit">м</span></div>
                <div class="st1">Высота стены: </div>
                <div class="st2"><input class="triangle" /> <span class="unit">м</span></div>  
        </div>
        <div class="col-sm-4">
                <h4>Стена трапеция</h4>
                <div class="st1">Длина основания: </div>
                <div class="st2"><input class="triangle" /> <span class="unit">м</span></div>
                <div class="st1">Длина потолка: </div>
                <div class="st2"><input class="triangle" /> <span class="unit">м</span></div>
                <div class="st1">Высота стены: </div>
                <div class="st2"><input class="triangle" /> <span class="unit">м</span></div>
        </div>
        <div class="col-sm-4">
            Площадь треугольной стены: <span class="area"></span><br>
            Площадь трапецеобразной стены: <span class="area"></span><br>
            ПЛОЩАДЬ СТЕН КОМНАТЫ: <span class="area"></span>
        </div>   
    </div>  
</body>
</html>

Последний раз редактировалось laimas, 12.08.2017 в 17:43.
Ответить с цитированием
  #36 (permalink)  
Старый 12.08.2017, 23:01
Аватар для MC-XOBAHCK
Аспирант
Отправить личное сообщение для MC-XOBAHCK Посмотреть профиль Найти все сообщения от MC-XOBAHCK
 
Регистрация: 06.08.2017
Сообщений: 75

Спасибо! Я совсем по другому начал группировать. Теперь вижу как нужно собирать и думаю остальные виды смогу теперь сам добавить. Получается компактно и удобно для редактирования.
Добавлю и вместо боя вернусь обратно к теории. Мне теперь стоит всё это разобрать и понять, я ведь в этом коде ни одной строчки не написал - всё за меня сделали. Но теория без практики бесполезна, так что скоро обратно вернусь с новыми приблудами.
Ответить с цитированием
  #37 (permalink)  
Старый 13.08.2017, 06:02
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 7,561

Сообщение от MC-XOBAHCK
остальные виды смогу теперь сам добавить
Несомненно. Это в качестве коды - теперь будем считать как и ранее предполагалось, делая перерасчет и при смене единиц измерения через триггер. В коде выше он был убран потому, что расчет производился бы только для первой группы и плюс возникали бы некоторые ошибки.

Как работает расчет для группы понятно, теперь мы просто изменим обращение к группе - не по классу текущего поля, а будем циклом обходить их родительские контейнеры. А для того чтобы было удобнее их идентифицировать, индикатором родителя будет не имя класса, а атрибут. Для первой комнаты это будет:

<div class="row plos" data-area="rectangle">

для второй

<div class="row plos" data-area="triangle">

Остальной html-код остается без изменения.

Код обработчиков практически тот же самый, только изменим селекторы полей, ну и циклом обход родителей. Как ранее предлагалось, массив описывающий единицы измерения заменен массивом объектов, в которых описаны единицы измерения, символ квадрата, значений после запятой, множитель. Значения кнопок выбора служат индексами этого массива.

Добавим расчет пирамиды Хеопса, у которой основания смежных сторон может быть не равно, что с добавлением расчета площади основания даст более трех площадей для расчета и вывода. Все это ради показать, что первое задается функцией calculate для соответствующей группы, а второе, количеством элементов вывода и возвращаемым функцией calculate массиве рассчитанных площадей. Основной код при этом не будет изменяться, добавляются только html-элементы группы и расчет для нее в функции calculate.

<html>
<head>
<meta charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>
function calculate(group, values) {
    var a, b;
    switch(group) {
        case 'rectangle': a = values[0] * values[1], b = values[2] * values[3];
                          return [a, b, a && b ? (a + b) * 2 : 0];
                          break;
        case 'triangle':  a = values[0] * values[1] * .5, b = (values[2] + values[3]) * values[4] * .5;
                          return [a, b, a && b ? (a + b) * 2 : 0];
                          break;
        case 'pyramid':   a = values[0] * values[1] * .5, b = values[0] * values[2] * .5;
                          return [a, b, values[1] * values[2], a && b ? (a + b) * 2 : 0];                    
    }   
}

$(function() {
    var dim = [{unt: 'м', sqr: '²', dec: 2, mul: .001}, {unt: 'мм', sqr: '²',  dec: 0, mul: 1000}],
        side = $('input:text')
        .on('keyup', function() {
            this.value = this.value.replace(/[,\.]+/,'.').replace(/[^\d.]/,'');
            
            var u = unit.filter(':checked').val();
            
            //расчет площадей для всех заполненных полей
            $('[data-area]').each(function() {
                //группу определяет атрибут data-area    
                var group = $(this).data('area'),
                    values = $.map(side.filter('.'+group), function(e) {
                        var v = parseFloat(e.value);
                        return v || 0
                    }),
                    area = calculate(group, values);
                
                $(this).find('.area').each(function(i, e) {
                    $(e).text(
                        area[i] ? area[i].toFixed(dim[u].dec) + ' ' + dim[u].unt + dim[u].sqr : ''  
                    )
                })
            })
    }), 
    unit = $('input:radio')
        .change(function() {
            var u = this.value;
            $('.unit').text(dim[u].unt); 
            side.val(function() {
                var v = parseFloat(this.value); 
                if(v) return (v * dim[u].mul).toFixed(dim[u].dec) 
            }).trigger('keyup');
    });
});
  </script>
</head>
  
<body>
    <label><input type="radio" name="unit" value="0" checked="" /> метры</label>
    <label><input type="radio" name="unit" value="1" /> миллиметры</label>
    <h3>Пирамида</h3>
    <p>Стены треугольные. Противоположные стены равны</p>
    <div class="row plos" data-area="pyramid">           
        <div class="col-sm-6">
            <h4>Треугольная стена</h4>
                <div class="st1">Высота стен: </div>
                <div class="st2"><input class="pyramid" /> <span class="unit">м</span></div>
                <div class="st1">Длина основания первой стены: </div>
                <div class="st2"><input class="pyramid" /> <span class="unit">м</span></div>
                <div class="st1">Длина основания второй стены: </div>
                <div class="st2"><input class="pyramid" /> <span class="unit">м</span></div>
        </div>
        <div class="col-sm-6">
            Площадь 1 стены: <span class="area"></span><br>
            Площадь 2 стены: <span class="area"></span><br>
            Площадь основания: <span class="area"></span><br>
            Площадь всех стен: <span class="area"></span>
        </div>   
    </div>  
</body>
</html>


По мере добавления различных расчетов станет ясно, что функция calculate, это в общем то диспетчер-сборщик и расчеты площадей однотипных фигур выгоднее поместить в функции, если они могут быть в различных комнатах. Диспетчер знает к какой из них обратиться и в каком порядке помещать расчеты в возвращаемый массив.

До этого момента в формулах расчета площадей не встречалось деления. Если таковое будет, то надо помнить о делении на ноль. В языках программирования такая ситуация возвращает ошибку, кроме Javascript, который возвращает Infinity. Хрен их знает этих разработчиков JS при чем тут бесконечность, процессоров с бесконечной разрядностью в ближайшем тысячелетии точно не будет. А с точки зрения архитектора бесконечные размеры стен точно беспредел, поэтому такие ситуации нужно проверять, ибо булево значение Infinity равно true.

Последний раз редактировалось laimas, 13.08.2017 в 13:25.
Ответить с цитированием
  #38 (permalink)  
Старый 13.08.2017, 16:14
Аватар для MC-XOBAHCK
Аспирант
Отправить личное сообщение для MC-XOBAHCK Посмотреть профиль Найти все сообщения от MC-XOBAHCK
 
Регистрация: 06.08.2017
Сообщений: 75

Я вашу идею уловил. Конечно не всё мне в коде понятно, но всё же результат есть:
<head>
<meta charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
    <style>
        .st1 {display: inline-block;margin-top: 8px;width: 125px;text-align: right;}
        .st2 {display: inline-block;}h4 {color: #c3410d;}input {width: 110px;}
        input[type="radio"] {width: 25px;}
        .col-sm-6 {width: 270px;display: inline-block;border: solid 1px #888;padding: 10px;margin-left: 15px;background: #eee;}
    </style>
        <br>

<script>
function calculate(group, values) {
    var a, b;
    switch(group) {
        case 'rectangle': a = values[0] * values[1], b = values[2] * values[3];
                          return [a, b, a && b ? (a + b) * 2 : 0];
                          break;
        case 'triangle': a = values[0] * values[1] * .5, b = (values[2] + values[3]) * values[4] * .5;
                          return [a, b, a && b ? (a + b) * 2 : 0];
                          break;
 /*     case 'trapezium': a = (values[0] + values[1]) * .5 * values[2], b = ;
                          return [a, b, a && b ? (a + b) * 2 : 0];
                          break;
*/
        case 'pyramid':   a = values[0] * values[1] * .5, b = values[0] * values[2] * .5;
                          return [a, b, values[1] * values[2], a && b ? (a + b) * 2 : 0];
                          break;

        case 'kom_6st': a = (values[0] + values[1]) * .5 * values[2], b = values[3] * values[4] * .5, c = values[5] * values[6], d = values[7] * values[8], e = values[9] * values[10] * .5, f = (values[11] + values[12]) * .5 * values[13];
                        return [a, b, c, d, e, f, a && b && c && d && e && f ? (a + b + c + d + e + f) : 0];
    }  
}
 
$(function() {
    var dim = [{unt: 'м', sqr: '²', dec: 2, mul: .001}, {unt: 'мм', sqr: '²',  dec: 0, mul: 1000}],
        side = $('input:text')
        .on('keyup', function() {
            this.value = this.value.replace(/[,\.]+/,'.').replace(/[^\d.]/,'');
             
            var u = unit.filter(':checked').val();
             
            //расчет площадей для всех заполненных полей
            $('[data-area]').each(function() {
                //группу определяет атрибут data-area   
                var group = $(this).data('area'),
                    values = $.map(side.filter('.'+group), function(e) {
                        var v = parseFloat(e.value);
                        return v || 0
                    }),
                    area = calculate(group, values);
                 
                $(this).find('.area').each(function(i, e) {
                    $(e).text(
                        area[i] ? area[i].toFixed(dim[u].dec) + ' ' + dim[u].unt + dim[u].sqr : '' 
                    )
                })
            })
    }),
    unit = $('input:radio')
        .change(function() {
            var u = this.value;
            $('.unit').text(dim[u].unt);
            side.val(function() {
                var v = parseFloat(this.value);
                if(v) return v * dim[u].mul
            }).trigger('keyup');
    });
});
  </script>
</head>
   
<body>
    <label><input type="radio" name="unit" value="0" checked="" /> метры</label>
    <label><input type="radio" name="unit" value="1" /> миллиметры</label>
    <h3>Комната из 6-ти стен</h3>
    <p>Две стены треугольные. Две трапеции. Два параллелограма</p>
    <div class="row plos" data-area="kom_6st">          
        <div class="col-sm-6">
            <h4>Стена 1 - трапеция</h4>
                <div class="st1">Основание стены: </div>
                <div class="st2"><input class="kom_6st" /> <span class="unit">м</span></div>
                <div class="st1">Верх стены: </div>
                <div class="st2"><input class="kom_6st" /> <span class="unit">м</span></div>
                <div class="st1">Высота стены: </div>
                <div class="st2"><input class="kom_6st" /> <span class="unit">м</span></div>
            <h4>Стена 2 - треугольная </h4>
                <div class="st1">Длина основания: </div>
                <div class="st2"><input class="kom_6st" /> <span class="unit">м</span></div>
                <div class="st1">Высота стены </div>
                <div class="st2"><input class="kom_6st" /> <span class="unit">м</span></div>
            <h4>Стена 3 - параллелограмм</h4>
                <div class="st1">Основание стены: </div>
                <div class="st2"><input class="kom_6st" /> <span class="unit">м</span></div>
                <div class="st1">Высота стены: </div>
                <div class="st2"><input class="kom_6st" /> <span class="unit">м</span></div>
        </div>
        <div class="col-sm-6">
            <h4>Стена 4 - параллелограмм</h4>
                <div class="st1">Основание стены: </div>
                <div class="st2"><input class="kom_6st" /> <span class="unit">м</span></div>
                <div class="st1">Высота стены: </div>
                <div class="st2"><input class="kom_6st" /> <span class="unit">м</span></div>
            <h4>Стена 5 - треугольная</h4>
                <div class="st1">Длина основания: </div>
                <div class="st2"><input class="kom_6st" /> <span class="unit">м</span></div>
                <div class="st1">Высота стены: </div>
                <div class="st2"><input class="kom_6st" /> <span class="unit">м</span></div>
            <h4>Стена 6 - трапеция</h4>
                <div class="st1">Основание стены: </div>
                <div class="st2"><input class="kom_6st" /> <span class="unit">м</span></div>
                <div class="st1">Верх стены: </div>
                <div class="st2"><input class="kom_6st" /> <span class="unit">м</span></div>
                <div class="st1">Высота стены: </div>
                <div class="st2"><input class="kom_6st" /> <span class="unit">м</span></div>
        </div>

        <div class="col-sm-6">
            <img src="http://i.piccy.info/i9/0321aebbc6513954e3122c8cbbb0f7e9/1502624643/10565/1170341/kom_6st260.jpg"><br><br><br>
            Площадь 1 стены: <span class="area"></span><br>
            Площадь 2 стены: <span class="area"></span><br>
            Площадь 3 стены: <span class="area"></span><br>
            Площадь 4 стены: <span class="area"></span><br>
            Площадь 5 стены: <span class="area"></span><br>
            Площадь 6 стены: <span class="area"></span><br><br>
            Площадь всех стен комнаты: <span class="area"></span>
        </div>  
    </div> 
</body>

Единственное что пытался и не смог - отвязать миллиметры от результатов. При вводе размеров будь то в миллиметрах или метрах - в результате я хотел бы иметь метры квадратные (сейчас есть и мм кв.).

В целом я понял на что мне сейчас нужно обратить внимание для изучения: потренироваться со свич и понять оператор this (я его пока совсем не понимаю). Сайт читать я начал с самого введения, а там подсказка на новый учебник и история ресурса. В общем освоился в навигации и обвыкся к интерфейсу. Думаю правильно будет осваивать понемногу, а не тупо как пылесос прочесть всё как художественную книгу. Много нового сразу вредно - нужно частями чтобы что то освоить. Сдаваться я не собираюсь - ближайшие несколько месяцев прописываюсь здесь на сайте.

И ещё раз спасибо всем кто помогает, когда есть несколько решений для одной задачи, тогда намного проще усваивать материал.

Последний раз редактировалось MC-XOBAHCK, 13.08.2017 в 21:08.
Ответить с цитированием
  #39 (permalink)  
Старый 13.08.2017, 16:26
Аватар для MC-XOBAHCK
Аспирант
Отправить личное сообщение для MC-XOBAHCK Посмотреть профиль Найти все сообщения от MC-XOBAHCK
 
Регистрация: 06.08.2017
Сообщений: 75

Я для удобства просмотра на код поставил конструкцию:
[html run height=600 width=950]
но почему то ширина осталась 600px и всё сползло в один столбик...
Ответить с цитированием
  #40 (permalink)  
Старый 13.08.2017, 17:03
Аватар для join
Профессор
Отправить личное сообщение для join Посмотреть профиль Найти все сообщения от join
 
Регистрация: 05.03.2012
Сообщений: 452

width - ширина,
height - высота.

так правильно, ширина по умолчанию растягивается на весь блок iframe, её можно не писать: [html run height=950]
Ответить с цитированием
Ответ


Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Простейший калькулятор на JS. Нужна помощь. Siverena Общие вопросы Javascript 2 06.04.2017 14:42
Заставить калькулятор считать дробные числа с запятой. webmanss Элементы интерфейса 3 10.03.2016 16:07
Нужно чтобы калькулятор выводил в резултатах только целые числа Valtar7 Общие вопросы Javascript 2 18.08.2015 11:43
калькулятор на javascript vera0907 Events/DOM/Window 7 24.03.2015 15:12
JS задача. Взаимно простые числа sashok Общие вопросы Javascript 5 23.11.2014 10:16