12.08.2017, 09:14
|
|
Профессор
|
|
Регистрация: 14.01.2015
Сообщений: 12,990
|
|
|
Сообщение от 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 в 10:37.
|
|
12.08.2017, 10:38
|
 |
Профессор
|
|
Регистрация: 06.08.2017
Сообщений: 473
|
|
|
Я видел и понял на сколько Вы усовершенствовали функционал. Возразить даже не имею права. Моя проблема в том что я только начал изучать JavaScript и не могу сразу писать код. Это как впервые печатать на клавиатуре - сначала каждую букву ищешь по пять минут, со временем пальцы сами делают своё дело.
Поэтому все ответы в этой теме разбираю по крупицам по учебнику сайта и гуглу. Что то откладывается сразу, к чему то возвращаюсь по нескольку раз. Возможно через пару месяцев смогу начать осмысленно писать код, а пока только учусь и лучшая наука - это боевые условия.
|
|
12.08.2017, 10:45
|
|
Профессор
|
|
Регистрация: 14.01.2015
Сообщений: 12,990
|
|
Мы все учились понемногу чему нибудь и как нибудь, это естественно. 
Для закрепления - $('#val_a').val().trim().replace(/,/,'.').replace(/[^\d\.]/g,''); - здесь .trim(), это лишняя операция, так как тут .replace(/[^\d\.]/g,''), все что не цифры и точка и так будет вырезано.
Последний раз редактировалось laimas, 12.08.2017 в 10:47.
|
|
12.08.2017, 12:00
|
|
Профессор
|
|
Регистрация: 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.
|
|
12.08.2017, 16:22
|
|
Профессор
|
|
Регистрация: 14.01.2015
Сообщений: 12,990
|
|
Еще раз - не надо увлекаться идентификаторами, в данном случае, это зло.
Для решения этой задачи (специфики расчета) нужно разбить поля ввода на группы по типу стен используя классы. При этом назначение обработчика полей ввода остается прежним - первое, это обработка ввода, второе расчет площадей.
Шаблон замены запятой на точку при вводе в поле изменен на /[,\.]+/ с прежнего /,/. Я не буду уточнять почему, попробуйте понять сами, можно руководствоваться при этом этим. Не получится, тогда можно и пояснить.
Идентификатором группы является ее класс, он же определяет формулу расчета площадей. Вывод площадей производится циклом, так как их несколько, согласно их индексу в наборе.
При смене единиц перерасчет площадей в этом же обработчике, без триггера. В остальном все осталось прежним, благодаря как раз тому, что обрабатывается сразу коллекция полей и элементов.
<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 в 16:43.
|
|
12.08.2017, 22:01
|
|
Профессор
|
|
Регистрация: 06.08.2017
Сообщений: 473
|
|
|
Спасибо! Я совсем по другому начал группировать. Теперь вижу как нужно собирать и думаю остальные виды смогу теперь сам добавить. Получается компактно и удобно для редактирования.
Добавлю и вместо боя вернусь обратно к теории. Мне теперь стоит всё это разобрать и понять, я ведь в этом коде ни одной строчки не написал - всё за меня сделали. Но теория без практики бесполезна, так что скоро обратно вернусь с новыми приблудами.
|
|
13.08.2017, 05:02
|
|
Профессор
|
|
Регистрация: 14.01.2015
Сообщений: 12,990
|
|
|
Сообщение от 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 в 12:25.
|
|
13.08.2017, 15:14
|
|
Профессор
|
|
Регистрация: 06.08.2017
Сообщений: 473
|
|
Я вашу идею уловил. Конечно не всё мне в коде понятно, но всё же результат есть:
<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 в 20:08.
|
|
13.08.2017, 15:26
|
|
Профессор
|
|
Регистрация: 06.08.2017
Сообщений: 473
|
|
|
Я для удобства просмотра на код поставил конструкцию:
[html run height=600 width=950]
но почему то ширина осталась 600px и всё сползло в один столбик...
|
|
13.08.2017, 16:03
|
 |
Профессор
|
|
Регистрация: 05.03.2012
Сообщений: 477
|
|
|
width - ширина,
height - высота.
так правильно, ширина по умолчанию растягивается на весь блок iframe, её можно не писать: [html run height=950]
|
|
|
|
