Javascript: считаем проценты от числа и процентное отношение двух значений

В этом учебном скрипте я, увы, некогда не применил нужного сейчас подхода, основанного на делегировании событий , но пример может пригодиться несмотря на отсутствие функции-замыкания, переменной-обёртки или класса - по крайней мере, блок подключения обработчиков событий отдельный, а не атрибут onclick для ленивых :)

Простейшую калькуляцию процентов мы выполняем обычно в одном из двух вариантов:

• взять проценты от значения с вычислением остатка (или напротив "прибыли");
• узнать, сколько первое значение составляет в процентах от второго.

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

Ниже приводится мини-приложение в работе и основная (без стандартного обрамления HTML) часть исходника. К коду не подключены какие-либо стили CSS, но из-за наличия стиля в блоге вид элементов может отличаться от стандартного.

 <form id="form1">
  <p>
   <input type="radio" id="mode1" value="1" name="mode" checked>
   <label for="mode1">% от значения</label>
   <input type="radio" id="mode2" value="2" name="mode">
   <label for="mode2">значение от значения в %</label>
  </p>
  <p>
   <span id="val1msg">от значения</span>
   <input id="val1" type="text" size="12" maxlength="10">
   <span id="val2msg">взять</span>
   <input id="val2" type="text" size="12" maxlength="10"> 
   <span id="percent">%</span>
   <input id="btn1" type="button" value="&nbsp;=&nbsp;">
   <span id="res">...</span>
  </p>
  <p>
   знаков в дробной части: 
   <select id="fixedN" size="1">
     <option value="-1" selected>авто</option>
     <option value="0">ноль</option>
     <option value="1">1 знак</option>
     <option value="2">2 знака</option>
     <option value="3">3 знака</option>
     <option value="4">4 знака</option>
     <option value="5">5 знаков</option>
     <option value="6">6 знаков</option>
     <option value="7">7 знаков</option>
     <option value="8">8 знаков</option>
     <option value="9">9 знаков</option>
   </select>
   &nbsp;&nbsp;&nbsp;
   <input id="btnC" type="button" value="очистить всё">
  </p>  
 </form>

 <script>
  //Функции приложения
  function isNumber (val) { return !isNaN(val) && isFinite(val); }

  function trimAll (val) { return val.trim().replace (/\s+/g,""); }

  function toFixed (val, z) {
   return (z==-1 ? val : val.toFixed(z));
  }

  function _set (id, msg) { 
   let elem = document.getElementById(id);
   if (!elem) { alert ('Нет элемента '+elem); return false; }
   document.getElementById(id).textContent = msg; 
   return true;
  }

  function calculate (val1,val2,resid,z,mode) {
   let v1 = parseFloat (val1), v2 = parseFloat (val2);
   if (!isNumber(v1) || !isNumber(v2)) {
    _set(resid,'... жду 2 допустимых числа');
    return false;
   }
   let res;
   if (mode == 1) {
    res = toFixed (v1 * v2 / 100, z);
    ost = toFixed (v1 - res, z);
    res += (ost >= 0 ? ' с остатком ' + ost : ' с добавлением ' + Math.abs(ost));
   }
   else {
    res = toFixed (v1 / v2 * 100, z) + '%';
   }
    _set(resid, res);
   return true;
  }

  //Назначение обработчиков событий
  function main1 (evt, mode) {
   evt.preventDefault();
   let form = document.forms.form1;
   calculate (form.val1.value, form.val2.value, 'res', 
    parseInt(form.fixedN.options[form.fixedN.selectedIndex].value), mode);
  }

  let mode = 1;
  document.forms.form1.val1.addEventListener ('change', function(evt) { main1(evt,mode); });
  document.forms.form1.val2.addEventListener ('change', function(evt) { main1(evt,mode); });
  document.forms.form1.btn1.addEventListener ('click', function(evt) { main1(evt,mode); });
  document.forms.form1.fixedN.addEventListener ('change', function(evt) { main1(evt,mode); });
  document.forms.form1.btnC.addEventListener ('click', function(evt) { 
   evt.preventDefault();
   let form = document.forms.form1;
   form.val1.value = '';
   form.val2.value = '';
   _set ('res','...');
  });
  if (document.querySelector('input[name="mode"]')) {
   document.querySelectorAll('input[name="mode"]').forEach((elem) => {
    elem.addEventListener("change", function(evt) {
     mode = evt.target.value;
     if (mode == 1) {
      _set ('val1msg','от значения');
      _set ('val2msg','взять');
      _set ('percent','%');
     }
     else {
      _set ('val1msg','значение');
      _set ('val2msg','от значения');
      _set ('percent','');
     }
     _set ('res','...');
    });
  });
 } 
 </script>
 <noscript>
  <p>Для работы приложения включите Javascript в браузере</p>
 </noscript>

21.08.2021, 16:43 [2055 просмотров]