Цитата:
|
Цитата:
|
Цитата:
Я с радиокнопками никогда раньше не работал, поэтому ещё и это нужно осваивать. Нашёл что индификатором является 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%. Но нужно мне свой макет показывать. |
| Часовой пояс GMT +3, время: 03:37. |