Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #21 (permalink)  
Старый 11.08.2017, 13:13
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,070

Сообщение от MC-XOBAHCK
как правильно организовать логику выбора ввода данных в метрах или в миллиметрах
а зачем этот выбор нужен?
Ответить с цитированием
  #22 (permalink)  
Старый 11.08.2017, 13:41
Профессор
Отправить личное сообщение для Dilettante_Pro Посмотреть профиль Найти все сообщения от Dilettante_Pro
 
Регистрация: 27.11.2015
Сообщений: 2,899

Сообщение от MC-XOBAHCK
как правильно организовать логику выбора ввода данных в метрах или в миллиметрах
Сантиметры еще забыли.
Ответить с цитированием
  #23 (permalink)  
Старый 11.08.2017, 14:59
Аватар для MC-XOBAHCK
Профессор
Отправить личное сообщение для MC-XOBAHCK Посмотреть профиль Найти все сообщения от MC-XOBAHCK
 
Регистрация: 06.08.2017
Сообщений: 473

Сообщение от j0hnik Посмотреть сообщение
просто дели на 1млн. результат.
переключатель радиобатоном я бы сделал.
Точно, поставить переключатель правильнее и удобнее будет.

Я с радиокнопками никогда раньше не работал, поэтому ещё и это нужно осваивать. Нашёл что индификатором является checked. Не знаю правильно ли я его вставляю:
<p><input name="metric" type="radio" value="m"  checked="checked">В метрах</p>
<p><input name="metric" type="radio" value="mm">В миллиметрах</p>

Пока задумался как обрабатывать checked в скрипте калькулятора.

Сообщение от рони Посмотреть сообщение
а зачем этот выбор нужен?
Как вариант - строительство.
По народному - значения в метрах. По научному (чертежам) - все значения только в миллиметрах.
Ответить с цитированием
  #24 (permalink)  
Старый 11.08.2017, 15:10
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,070

Ответить с цитированием
  #25 (permalink)  
Старый 11.08.2017, 15:10
Аватар для j0hnik
Профессор
Отправить личное сообщение для j0hnik Посмотреть профиль Найти все сообщения от j0hnik
 
Регистрация: 01.12.2016
Сообщений: 3,650

Сообщение от MC-XOBAHCK Посмотреть сообщение
Пока задумался как обрабатывать 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>
Ответить с цитированием
  #26 (permalink)  
Старый 11.08.2017, 15:12
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,990

MC-XOBAHCK,
value="m" и value="mn", это зря, лучше для метров 1, а для миллиметров 1000, умножая на эту величину некий расчет.
Ответить с цитированием
  #27 (permalink)  
Старый 11.08.2017, 17:51
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 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() { 
    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>

Последний раз редактировалось laimas, 11.08.2017 в 19:09.
Ответить с цитированием
  #28 (permalink)  
Старый 11.08.2017, 22:01
Аватар для MC-XOBAHCK
Профессор
Отправить личное сообщение для MC-XOBAHCK Посмотреть профиль Найти все сообщения от MC-XOBAHCK
 
Регистрация: 06.08.2017
Сообщений: 473

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 подкинул ещё отличный функционал. Буду искать решение как это теперь правильно прикрутить к скрипту.
Ответить с цитированием
  #29 (permalink)  
Старый 12.08.2017, 04:27
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,990

Сообщение от MC-XOBAHCK
может быть ещё зайдёте и подскажите, возможно ли переключатель вынести в отдельную функцию
Заглянул, но ничего не понял. Идентификатор вещь хорошая и нужная, но к месту, вы же, даже можно сказать, злоупотребляете им. На поля ввода устанавливается обработчик, а это означает, что как минимум один из них непосредственно в обработчике уже "в наших руках" и при этом творить такое безобразие var a = $('#val_a'), var b = $('#val_b')?

Какая отдельная функция вам нужна, если переключение единиц и так есть отдельная функция, обработчик?

Словами:

Не видно, чтобы требовались сотые доли миллиметров, а значит и в отображении они не нужны. При этом выбор единиц измерения должен изменять как текст, так и определять наличие сотых у величин. Это просто сделать указав значениями кнопок управления единицами величину сотых после запятой - 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, 12.08.2017 в 06:35.
Ответить с цитированием
  #30 (permalink)  
Старый 12.08.2017, 08:22
Аватар для MC-XOBAHCK
Профессор
Отправить личное сообщение для MC-XOBAHCK Посмотреть профиль Найти все сообщения от MC-XOBAHCK
 
Регистрация: 06.08.2017
Сообщений: 473

laimas, СПАСИБО Вам за расставленные комменты - по ним видно что мне нужно изучать.

Я на черновике напишу макет того что мне нужно, чтобы более понятно было - выложу. У меня полей много, а не только два - нужно их показать чтобы понятнее было. Проверка на заполненность, кеш, ед.изм. - то что нужно 100%.
Но нужно мне свой макет показывать.
Ответить с цитированием
Ответ


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

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


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