Калькулятор - числа с запятой/точкой
Не пинайте жёстко - первый пост. Мне нужен JavaScript и чтобы его освоить нужна помощь на этом форуме. Надеюсь быстро освою форум и буду делать в дальнейшем всё правильно, согласно установленным обычаям.
Пишу калькулятор. Подключена jQuery. Не могу разобраться: проблема чтобы сделать возможность ввода чисел с сотыми (два знака после запятой). Код HTML: <div> <h4>Прямоугольник</h4> <p>Длина прямоугольника: <input id="val_a" type="number" step="0.01" min="0.01" /></p> <p>Ширина прямоугольника: <input id="val_b" type="number" step="any" min="0.01"/></p> <div>Площадь прямоугольника:<span id="pls"></span> м.кв.</div> </div> Скрипт:
var a, b;
a = $('#val_a').val(); //Длина прямоугольника
b = $('#val_b').val(); //Ширина прямоугольника
a = parseInt(a);
b = parseInt(b);
pl_s = a * b; //Площадь
$('#pls').html(pl_s);
У меня получается parseInt игнорирует при расчёте знаки после точки или запятой. А если убираю parseInt - то мозила не пропускает ввод чисел с точкой. Хотелось бы чтобы была возможность использования как точки так и запятой. Можете подсказать или подправить? |
|
<html>
<head>
</head>
<body>
<div>
<h4>Прямоугольник</h4>
<p>Длина прямоугольника: <input id="val_a" type="number" step="0.01" min="0.01" /></p>
<p>Ширина прямоугольника: <input id="val_b" type="number" step="0.01" min="0.01"/></p>
<div>Площадь прямоугольника:<span id="pls"></span> м.кв.</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$('input').on('input', function(){
var a, b;
a = $('#val_a').val(); //Длина прямоугольника
b = $('#val_b').val(); //Ширина прямоугольника
a = parseFloat(a);
b = parseFloat(b);
pl_s = a * b; //Площадь
$('#pls').html(pl_s);
});
</script>
</body>
</html>
|
Спасибо! Теперь считает с дробными числами.
Остаётся вопрос с мазилой, она не хочет пропускать дроби через точку (хром работает как с точкой так и с запятой). Нет ли способа подружить и мазилу с точкой? Или делать подсказку о вводе через запятую и рекомендацией на использование хром-браузера? |
Для данной операции и parseFloat() не потребуется, уж тогда проверять что возвращает parseFloat(), иначе ни к чему.
alert('0.5' * '0.7')
|
Цитата:
|
Цитата:
Хром работает как с точкой так и с запятой, а мазила если цифра с точкой подсвечиваем красным input и в результат ставит 0. Запятую обрабатывает правильно. |
Цитата:
|
можно создать свой кастомный input тогда будет работать
|
MC-XOBAHCK,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script>
$(function() { $('input').on('input', function(){
var a, b, pl_s;
a = $('#val_a').val().trim().replace(/,/,'.'); //Длина прямоугольника
b = $('#val_b').val().trim().replace(/,/,'.');; //Ширина прямоугольника
a = parseFloat(a)||0;
b = parseFloat(b)||0;
pl_s = a * b; //Площадь
$('#pls').html(pl_s.toFixed(2));
})
});
</script>
</head>
<body>
<div>
<h4>Прямоугольник</h4>
<p>Длина прямоугольника: <input id="val_a" /></p>
<p>Ширина прямоугольника: <input id="val_b" /></p>
<div>Площадь прямоугольника:<span id="pls"></span> м.кв.</div>
</div>
</body>
</html>
|
рони,
тогда еще добавить и удаление не цифрового ввода. |
Цитата:
<button>-</button><input id="val_a"/><button>+</button> :) |
|
рони, ну понятно, что не проблема.
|
j0hnik,
кнопки не рационально в данном случае, быстрее ручной ввод |
рони,
Круто! Работает во всех браузерах и с точкой и с запятой + округляет именно так как мне нужно. А чтобы исключить минусовые значения <0, нужно вставлять проверку if или можно ещё код усовершенствовать? |
Цитата:
|
MC-XOBAHCK,
a = $('#val_a').val().trim().replace(/,/,'.').replace(/[^\d\.]/g,''); //Длина прямоугольника
b = $('#val_b').val().trim().replace(/,/,'.').replace(/[^\d\.]/g,'');; //Ширина прямоугольника
|
Спасибо всем кто принимает участие в теме, код и за ссылки на инфу! С этим вопросом вроде как освоился.
Если не напрягает продолжение темы, можете подсказать на более философский вопрос: как правильно организовать логику выбора ввода данных в метрах или в миллиметрах. Планирую поставить кнопки для выбора ввода в метрах или в миллиметрах. По умолчанию берём в метрах. <button class="btn" id="m">В метрах</button> <button class="btn" id="mm">В миллиметрах</button> Макет полей калькулятора: <div> <h4>Прямоугольник</h4> <p>Длина прямоугольника: <input id="val_a" /></p> <p>Ширина прямоугольника: <input id="val_b" /></p> <div>Площадь прямоугольника:<span id="pls"></span> м.кв.</div> </div> Я правильно рассуждаю, что на кнопки для выбора ввода в метрах или в миллиметрах нужно повесить скрипт который будет изменять id в инпутах? А уже по изменённым инпутам делать в скрипте конвертацию из миллиметров в метры? Или подобный манёвр нужно делать другим методом?? При любом типе ввода в результате будут метры квадратные. |
просто дели на 1млн. результат.
переключатель радиобатоном я бы сделал. |
Цитата:
|
Цитата:
|
Цитата:
Я с радиокнопками никогда раньше не работал, поэтому ещё и это нужно осваивать. Нашёл что индификатором является checked. Не знаю правильно ли я его вставляю: <p><input name="metric" type="radio" value="m" checked="checked">В метрах</p> <p><input name="metric" type="radio" value="mm">В миллиметрах</p> Пока задумался как обрабатывать checked в скрипте калькулятора. Цитата:
По народному - значения в метрах. По научному (чертежам) - все значения только в миллиметрах. |
:-?
|
Цитата:
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script>
$(function() { $('input').on('input change', function(){
var a, b, pl_s;
a = $('#val_a').val().trim().replace(/,/,'.'); //Длина прямоугольника
b = $('#val_b').val().trim().replace(/,/,'.');; //Ширина прямоугольника
a = parseFloat(a)||0;
b = parseFloat(b)||0;
pl_s = a * b; //Площадь
if($('#mm').prop('checked')) pl_s /= 1000000;
$('#pls').html(pl_s.toFixed(2));
})
});
</script>
</head>
<body>
<div>
<h4>Прямоугольник</h4>
<input type="radio" name="ed" id="m" checked>метры<input type="radio" name="ed" id="mm">миллиметры
<p>Длина прямоугольника: <input id="val_a" /></p>
<p>Ширина прямоугольника: <input id="val_b" /></p>
<div>Площадь прямоугольника:<span id="pls"></span> м.кв.</div>
</div>
</body>
</html>
|
MC-XOBAHCK,
value="m" и value="mn", это зря, лучше для метров 1, а для миллиметров 1000, умножая на эту величину некий расчет. |
Хотя так, ибо возврат из второго в первые единицы тоже нужно учесть.
<html>
<head>
<meta charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>
$(function() {
var side = $('.side').on('input keyup', function() {
var a = this.value = this.value.replace(/[^\d,.]/,'').replace(/,/,'.'),
b = parseFloat(side.not(this).val()) || '',
u = +unit.filter(':checked').val();
$('#area').text(parseFloat(a) && b ? (a * b).toFixed(u)+ ' ' + ['мм²',,'м²'][u] : '')
}), unit = $('[name="unit"]').change(function() {
var u = +this.value;
side.val(function() {
if(parseFloat(this.value)) return u ? this.value / 1000 : this.value * 1000
}).trigger('keyup')
});
});
</script>
</head>
<body>
<div>
<h4>Прямоугольник</h4>
<label><input type="radio" name="unit" value="2" checked="" /> метры</label>
<label><input type="radio" name="unit" value="0" /> миллиметры</label>
<p>Длина прямоугольника: <input class="side" /></p>
<p>Ширина прямоугольника: <input class="side" /></p>
<div>Площадь прямоугольника: <span id="area"></span></div>
</div>
</body>
</html>
|
j0hnik, Спасибо! Я вернусь к этому коду ещё не раз.
laimas, благодарю! Вы мне отличную идею подкинули. Мой будущий калькулятор должен при переключении делать на автомате перерасчёт введённых значений из мм в метры. К сожелению я не весь код могу прочитать с пониманием. Сейчас засяду за изучение. Я структуру понял и частично понимаю, но пока у меня нет знаний чтобы правильно отредактировать под себя. Мне бы в результате иметь ТОЛЬКО м.кв. (без миллиметров). А так, оч даже круто работает. Не знаю, может быть ещё зайдёте и подскажите, возможно ли переключатель вынести в отдельную функцию и через неё прогонять расчёты. Поэтому в макет инпутов добавил span id="ed_iz", где будет вывод мм или м.
<div class="row plos">
<div class="col-sm-4">
<h4>Прямоугольник</h4>
<div class="st1">Длина:</div>
<div class="st2"><input id="val_a" /><span id="ed_iz"></span></div>
<div class="st1">Ширина:</div>
<div class="st2"><input id="val_b" /><span id="ed_iz"></span></div>
<div class="st1">Площадь прямоугольника:</div>
<div class="st2"><span id="pls"></span> м.кв.</div>
</div>
<div class="col-sm-4">
<img src="" style="margin-bottom: 5px;" />
<div class="rezultat">ПЛОЩАДЬ ДВУХ ПРЯМОУГОЛЬНИКОВ = <span id="pl_dv_pr"></span> м.кв.</div>
</div>
</div>
Отдельным файлом идёт скрипт калькулятора. Основное для данных - это геометрические фигуры и их размеры. Задумка для расчёта самых разных фигур крыш, но для понимания заменю их стенами в комнатах. Например имеем комнату где две стены прямоугольные две треугольные; или две трапеции + два прямоугольника. И так дальше по комбинациям фигур. Поэтому площади самых разных фигур я вынес отдельно в функции:
//Площадь прямоугольника
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;
}
// и так далее по возможной геометрии...
В этом же файле идёт функция которая парсит значения и выводит результаты. Здесь в расчётах идут запросы к функциям площадей фигур:
$('document').ready(function(){
$('input').on('keyup', function(){
//Площадь двух одинаковых прямоугольников
var a = $('#val_a').val().trim().replace(/,/,'.').replace(/[^\d\.]/g,'');
var b = $('#val_b').val().trim().replace(/,/,'.').replace(/[^\d\.]/g,'');
var pl_dvuh_pr;
pl_dvuh_pr = s_pr(a, b) * 2; //обращение к функции s_pr(a, b) площадь прямоугольника
$('#pls').html(s_pr(a, b).toFixed(2)); //вывод площади прямоугольника
$('#pl_dv_pr').html(pl_dvuh_pr.toFixed(2)); //вывод площади двух прямоугольников
//Площадь двух прямоугольников и двух треугольников
var a = $('#val.......;
});
});
Теперь вот остановился на переключателе из метров в миллиметры. Думаю можно ли вывести это в отдельную функцию. Изначально накидал вот такое безобразие:
//Переключатель метры/милиметры
function metric() {
var m;
if($('#mm').prop('checked')) m = 0.000001;
else m = 1;
return m;
}
Думал на это значение умножать площадь фигуры (в функциях площадей фигур) pl_dvuh_pr = s_pr(a, b) * 2 * metric(); но что то не задалось. Вот laimas подкинул ещё отличный функционал. Буду искать решение как это теперь правильно прикрутить к скрипту. |
Цитата:
Какая отдельная функция вам нужна, если переключение единиц и так есть отдельная функция, обработчик? Словами: Не видно, чтобы требовались сотые доли миллиметров, а значит и в отображении они не нужны. При этом выбор единиц измерения должен изменять как текст, так и определять наличие сотых у величин. Это просто сделать указав значениями кнопок управления единицами величину сотых после запятой - 2 и 0. В силу того, что методы jQuery возвращают объект, можно определять для объекта множество методов описывая их цепочкой, т.е. получить, установить обработчик, изменить свойство/атрибут и т.п., и т.д. Зачем же размусоливать все?
<html>
<head>
<meta charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>
$(function() {
var side = $('.side') //получаем и кешируем поля ввода сторон прямоугольника
.on('input keyup', function() { //устанавливаем им обработчик ввода в них
//получаем значение активного поля, удаляем не цифровой ввод в нем, сохраняем в нем эти изменения
this.value = this.value.replace(/[^\d,.]/,'').replace(/,/,'.');
//получаем значение второго поля из ранее кешируемого набора как не равное активному полю
var b = parseFloat(side.not(this).val()),
//получаем состояние кнопок единиц измерения из ранее кешированного их набора и получаем выбранные единицы
u = +unit.filter(':checked').val();
//если в обоих полях введены стороны прямоугольника, рассчитываем площадь с указанием единиц измерения
$('#area').text(
parseFloat(this.value) && b //оба поля заполнены?
? (this.value * b).toFixed(u) //наличие сотых после запятой определяется значением кнопки
+ ' ' + ['мм²',,'м²'][u] //единица измерения из массива, по индексу равному значению кнопки
: '' //одно или оба поля не заполнены, очищаем вывод площади
)
}),
unit = $('[name="unit"]') //получаем и кешируем кнопки выбора единиц измерения
.change(function() { //устанавливаем обработчик выбора единиц
var u = +this.value; //значение выбранных единиц
//установим выбранные единицы у полей сторон из массива по индексу, которым является значение выбранной кнопки
$('.unit').text(['мм',,'м'][u]);
//изменить значение полей сторон (ранее кешированные) на выбранные единицы измерения
side.val(function() {
if(parseFloat(this.value)) //поле заполнено? в противном случае поле будет очищено
return u //выбраны метры?
? this.value / 1000 //да, значение поля делим на миллиметры
: this.value * 1000 //нет, значение поля умножаем на миллиметры
}).
trigger('keyup') //произвести перерасчет площади согласно выбранным единицам измерения
});
});
</script>
</head>
<body>
<div>
<h4>Прямоугольник</h4>
<label><input type="radio" name="unit" value="2" checked="" /> метры</label>
<label><input type="radio" name="unit" value="0" /> миллиметры</label>
<p>Длина прямоугольника: <input class="side" /> <span class="unit">м</span></p>
<p>Ширина прямоугольника: <input class="side" /> <span class="unit">м</span></p>
<div>Площадь прямоугольника: <span id="area"></span></div>
</div>
</body>
</html>
|
laimas, СПАСИБО Вам за расставленные комменты - по ним видно что мне нужно изучать.
Я на черновике напишу макет того что мне нужно, чтобы более понятно было - выложу. У меня полей много, а не только два - нужно их показать чтобы понятнее было. Проверка на заполненность, кеш, ед.изм. - то что нужно 100%. Но нужно мне свой макет показывать. |
Цитата:
Вникните в этот код:
$('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, определять сколько угодно единиц, а обработчики при этом останутся такими же, править их код не потребуется. |
Я видел и понял на сколько Вы усовершенствовали функционал. Возразить даже не имею права. Моя проблема в том что я только начал изучать JavaScript и не могу сразу писать код. Это как впервые печатать на клавиатуре - сначала каждую букву ищешь по пять минут, со временем пальцы сами делают своё дело.
Поэтому все ответы в этой теме разбираю по крупицам по учебнику сайта и гуглу. Что то откладывается сразу, к чему то возвращаюсь по нескольку раз. Возможно через пару месяцев смогу начать осмысленно писать код, а пока только учусь и лучшая наука - это боевые условия. |
Мы все учились понемногу чему нибудь и как нибудь, это естественно. ;)
Для закрепления - $('#val_a').val().trim().replace(/,/,'.').replace(/[^\d\.]/g,''); - здесь .trim(), это лишняя операция, так как тут .replace(/[^\d\.]/g,''), все что не цифры и точка и так будет вырезано. |
Вот мой макет калькулятора. Урезал до двух комнат, но в оригинале их очень много, состоящих из самых разных геометрических фигур.
<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 я не знаю. Но хорошо что есть его вариант - есть к чему стремиться. |
Еще раз - не надо увлекаться идентификаторами, в данном случае, это зло.
Для решения этой задачи (специфики расчета) нужно разбить поля ввода на группы по типу стен используя классы. При этом назначение обработчика полей ввода остается прежним - первое, это обработка ввода, второе расчет площадей. Шаблон замены запятой на точку при вводе в поле изменен на /[,\.]+/ с прежнего /,/. Я не буду уточнять почему, попробуйте понять сами, можно руководствоваться при этом этим. Не получится, тогда можно и пояснить. Идентификатором группы является ее класс, он же определяет формулу расчета площадей. Вывод площадей производится циклом, так как их несколько, согласно их индексу в наборе. При смене единиц перерасчет площадей в этом же обработчике, без триггера. В остальном все осталось прежним, благодаря как раз тому, что обрабатывается сразу коллекция полей и элементов.
<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>
|
Спасибо! Я совсем по другому начал группировать. Теперь вижу как нужно собирать и думаю остальные виды смогу теперь сам добавить. Получается компактно и удобно для редактирования.
Добавлю и вместо боя вернусь обратно к теории. Мне теперь стоит всё это разобрать и понять, я ведь в этом коде ни одной строчки не написал - всё за меня сделали. Но теория без практики бесполезна, так что скоро обратно вернусь с новыми приблудами. |
Цитата:
Как работает расчет для группы понятно, теперь мы просто изменим обращение к группе - не по классу текущего поля, а будем циклом обходить их родительские контейнеры. А для того чтобы было удобнее их идентифицировать, индикатором родителя будет не имя класса, а атрибут. Для первой комнаты это будет: <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. |
Я вашу идею уловил. Конечно не всё мне в коде понятно, но всё же результат есть:
<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 (я его пока совсем не понимаю). Сайт читать я начал с самого введения, а там подсказка на новый учебник и история ресурса. В общем освоился в навигации и обвыкся к интерфейсу. Думаю правильно будет осваивать понемногу, а не тупо как пылесос прочесть всё как художественную книгу. Много нового сразу вредно - нужно частями чтобы что то освоить. Сдаваться я не собираюсь - ближайшие несколько месяцев прописываюсь здесь на сайте. И ещё раз спасибо всем кто помогает, когда есть несколько решений для одной задачи, тогда намного проще усваивать материал. |
Я для удобства просмотра на код поставил конструкцию:
[html run height=600 width=950] но почему то ширина осталась 600px и всё сползло в один столбик... |
width - ширина,
height - высота. так правильно, ширина по умолчанию растягивается на весь блок iframe, её можно не писать: [html run height=950] |
| Часовой пояс GMT +3, время: 22:11. |