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=" = "> <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> <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 [2260 просмотров]