Калькулятор расчёта потребления и оплаты электроэнергии на Java Script

Для рационального планирования нагрузок на бюджет полезно прогнозировать расход электроэнергии. Вам в помощь онлайн-калькулятор.

Давайте самостоятельно прикинем расход электроэнергии, чтобы понять свои траты на коммунальные услуги.

Все электробытовые приборы имеют на корпусе надпись о потребляемой мощности (Вт) при напряжении 220(v). Либо напряжение (U) и потребляемый ток(I). Они указаны в паспортах и инструкциях на приборы.

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

Калькулятор расчёта потребления  и оплаты электроэнергии  на Java Script К таким приборам относим холодильники, стиральные машины, посудомоечные машины, микроволновые печи, системные блоки компьютеров, ноутбуки, электроплиты, водонагреватели, зарядные устройства и им подобные.

Поэтому при прогнозе потребления такими приборами, принято считать мощности на 20% меньше от номинального значения с учётом не равномерной нагрузки.

На приборы: лампочки, утюги, кипятильники, плойки, фены, пылесосы, паяльники, применяем мощности, указанные на приборах или паспортах.

Если на устройстве не указана его номинальная мощность. Для его определения требуется знать напряжение и силу тока. Напряжение электросетей стандартное 220 В. Зарядные устройства к мобильным гаджетам, используют напряжение 5 В. А сила тока от нескольких миллиампер до 1 или 2 ампер.

Следовательно, мощность будет равна напряжению, умноженному на силу тока P = U * I с соблюдением разрядности единиц измерения. То есть, мощность должна быть выражена в Вт для пользования калькулятором.

Следовательно, мощность будет равна напряжению, умноженному на силу тока P = U * I с соблюдением разрядности единиц измерения. То есть, мощность должна быть выражена в Вт для пользования калькулятором.

Калькуляторы расположены ниже:
1. Калькулятор расчётов потребления электроэнергии.
2. Калькулятор расчётов стоимости и оплаты за электроэнергию.
Теперь вы свободно можете воспользоваться калькулятором расчёта электроэнергии онлайн. Интерфейс калькулятора интуитивно прост и понятен. Вам обеспечено прогнозирование затрат на все виды электропотребителей в квартире.

ДРОБНЫЕ ЧИСЛА ПИСАТЬ ЧЕРЕЗ ТОЧКУ!

Калькулятор расчётов потребления электроэнергии

Укажите паспортную мощность прибора в ваттах:

Укажите время работы прибора за сутки в часах:

Укажите всего суток работы прибора:

-


Калькулятор расчётов стоимости и оплаты за электроэнергию

Укажите количество электороэнергии в кВт*час:

Укажите цену 1 кВт*часа электроэнергии:

-

Создание калькулятора на JS

Калькуляторов расчёта потребления электроэнергии в интернете сотни и все разные. Просмотрел первых три десятка сайтов в поиске и пришёл к выводу – неудобство в расчётах главное их отличие.

Интерфейс некоторых из них затруднён в логике поведения расчётов.Даже просто не работают.

Возникла идея создания на языке Java Script калькулятора расчёта потребления и оплаты электроэнергии интуитивно понятного и надёжного.

Что нужно человеку знающему номиналы потребления по электричеству всех электроприёмников в доме. Просто просчитать сколько электроэнергии тратим и сколько это денег стоит.

Поэтому для параметров расчёта назначаем: P – мощность в Вт, Q – электроэнергия в кВт*час, Т - время в часах, период в сутках. Это позволяет минимизировать построение алгоритма в JavaScript.

Как работает калькулятор тестируйте на этой странице.

Прообразом калькулятора послужил видео урок Александра Лущенко из YouTube, на мой взгляд, одного из лучших лекторов уроков программирования на JS.

Модернизация калькулятора расчёта электроэнергии онлайн заключалась в следующем.

Обратите внимание, что в input вставлены айдишники id="n1”, id="n2", id="n3" соответственно. А так же в них соответственно вставлены классы input-in1, input-in2, input-in3. Айдишники для кодов расчётов, классы для кодов обнуления вводимых данных.

Удобство калькулятора заключается в возможности обнуления вводимых значений без перезагрузки страницы.

Второе, применен метод округления дробных чисел до третьего знака после целого числа. Дело в том, что обычно платёжки за электроэнергию содержат цифры до тёх знаков после целого числа в виду такой же тарификации. Метод parseFloat(Math.round(result * 100) / 100).toFixed(3)

Следущее, при попытках введения не чисел в инпуты, будет выпадать надпись о не корректных действиях. Метод isNaN позволяет спросить, это число? Если , нет, вывести запись о не корректности вводимых данных.

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

Калькулятор работает онлайн и зависать априори не может. Он не связан с внешними библиотеками.

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

Ниже представлены готовые коды HTML страницы, код JS калькулятора, стилевая таблица калькулятора. Можно копировать и пользоваться в дальнейшем на своём сайте. Удобно для лендингов, сайтов визиток, отдельных HTML страниц.

-------------------------------------------------------------------------------------------------------------------------- //HTML код калькулятора: <div class="combo"> <div class="calculator"> <p class="calc">Калькулятор расчётов потребления электроэнергии<span class="red"></span> </p> <p class="calc_item">Укажите паспортную мощность прибора в ваттах:<input type="text" id="n1" class="input-in1"></p> <p class="calc_item">Укажите время работы прибора за сутки в часах:<input type="text" id="n2" class="input-in2"></p> <p class="calc_item">Укажите всего суток работы прибора: <input type="text" id="n3" class="input-in3"></p> <button onclick="multi()">Расcчитать количество э/энергии</button> <button class="button">Очистить ввод</button> <p id="out">-</p> <hr> <p class="calc">Калькулятор расчётов стоимости и оплаты за электроэнергию<span class="red"></span></p> <p class="calc_item">Укажите количество электороэнергии в кВт*час:<input type="text" id="n4" class="input-in4"></p> <p class="calc_item">Укажите цену 1 кВт*часа электроэнергии:<input type="text" id="n5" class="input-in5"></p> <button onclick="multi2()">Расcчитать стоимость э/энергии</button> <button class="button2">Очистить ввод</button> <p id="out2">-</p> </div> --------------------------------------------------------------------------------- // Java Script код калькулятора расчёта количества и оплаты электроэнергии //Калькулятор расчёта количества электроэнергии function multi() { let num1, num2, num3, result, result2, out; num1 = document.getElementById('n1').value;//считываем число из инпута 1 num1 = parseInt(num1); //приводим к целому числу num2 = document.getElementById('n2').value; //считываем число из инпута 2 num3 = document.getElementById('n3').value; //считываем число из инпута 3 num3 = parseInt(num3); //приводим к целому числу if ((num1 * num2) == 0) { //условие не корректности вводимых чисел result2 = 'Не корректный ввод чисел'; } else if (isNaN(num1, num2, num3 )) { //условие, если это не числа result2 = 'Не корректный ввод чисел'; } else { result = (num1 * num2 * num3) / 1000; // перевод в киловаты result2 = parseFloat(Math.round(result * 100) / 100).toFixed(3) + ' ' + 'кВт за весь расчётный период'; }//урезаем дробное число до трёх знаков после точки document.getElementById('out').innerHTML = result2; } //Очистить записи ввода калькулятора расчёта количества электроэнергии let num1 = document.querySelector('.input-in1'); //считываем число из инпута 1 let num2 = document.querySelector('.input-in2'); //считываем число из инпута 2 let num3 = document.querySelector('.input-in3'); //считываем число из инпута 3 let button = document.querySelector('.button'); //хватаем кнопку button.onclick = function(){ //событие клика по кнопке со стираем содержимого в инпутах num1.value = ''; num2.value = ''; num3.value = ''; } //Калькулятор расчёта стоимости электроэнергии function multi2() { let num4, num5, result3, result, out2; num4 = document.getElementById('n4').value; num5 = document.getElementById('n5').value; if ((num4 * num5) == 0) { result3 = 'Не корректный ввод чисел'; } else if (isNaN(num4, num5)) { result3 = 'Не корректный ввод чисел'; } else { result = (num4 * num5); result3 = parseFloat(Math.round(result * 100) / 100).toFixed(3) + ' ' + '(₴) за весь расчётный период'; } document.getElementById('out2').innerHTML = result3; } //Очистить записи - Калькулятор расчёта оплаты электроэнергии let num4 = document.querySelector('.input-in4'); let num5 = document.querySelector('.input-in5'); let button2 = document.querySelector('.button2'); button2.onclick = function(){ num4.value = ''; num5.value = ''; } ------------------------------------ // Стилевые свойства калькулятора *{ margin: 0; padding:0; } h1{ font-size: 22px; text-align:center; } .combo{ max-width: 800px; margin: 10px auto; } .calculator{ font-family: 'Gabriela', serif; font-weight:400; max-width:300px; margin: 10px auto; border:2px solid #8ac1c5; background-color: #c7f0f0; padding:10px; } .calc{ font-size: 22px; font-weight:500; text-align:center; } .calc_item{ font-size:18px; margin: 0.5em; font-weight:500; } .red{ color:red; } button{ display:inline-block; width:98px; margin:5px; font-size:18px; background-color: #eaf1f1; } .button, .button2{ float:right; } #n1{ width:60px; height:30px; text-align:center; font-size:18px; border:1px solid #05f77e; } #n2{ width:60px; height:30px; text-align:center; font-size:18px; border:1px solid #05f77e; } #n3{ width:60px; height:30px; text-align:center; font-size:18px; border:1px solid #05f77e; } #n4{ width:60px; height:30px; text-align:center; font-size:18px; border:1px solid #05f77e; } #n5{ width:60px; height:30px; text-align:center; font-size:18px; border:1px solid #05f77e; } #out{ font-size:20px; color:#0000FF; -webkit-text-stroke:0.5px black; } #out2{ font-size:20px; color:#0000FF; -webkit-text-stroke:0.5px black; } ------------------------------ </div> </body> </html>