05.06.2019, 15:00
|
|
Аспирант
|
|
Регистрация: 11.05.2019
Сообщений: 30
|
|
|
Калькулятор. Настроить вывод, и добавить историю
Писал я писал и завис...
Есть JS, CSS, html
Пробую сделать калькулятор.
Нужно полученное число, если оно не целое, выводить с 2мя знаками после запятой.
Так же сделать чтобы при вводе было "число-оперяция-число".
И историю предидущей операции.
У меня получилось лишь заменять числа при вводе, и не пойму как, а точнее где именно корректировать вывод с 2мя знаками после запятой.
Буду благодарен помощи, кодом, литературой.
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Калькулятор</title>
<link rel="stylesheet" href="css/my.css">
</head>
<body style="background-image:url(img/backG.jpg);">
<h1>Калькулятор</h1>
<div id="calculator" class="calculator">
<div id="viewer" class="viewer">0</div>
<button class="num" data-num="7">7</button>
<button class="num" data-num="8">8</button>
<button class="num" data-num="9">9</button>
<button data-ops="plus" class="ops">+</button>
<button class="num" data-num="4">4</button>
<button class="num" data-num="5">5</button>
<button class="num" data-num="6">6</button>
<button data-ops="minus" class="ops">-</button>
<button class="num" data-num="1">1</button>
<button class="num" data-num="2">2</button>
<button class="num" data-num="3">3</button>
<button id="clear" class="clear">C</button>
<button class="num" data-num="0">0</button>
<button data-ops="times" class="ops">*</button>
<button data-ops="divided by" class="ops">/</button>
<button id="equals" class="equals" data-result="">=</button>
</div>
<script src="js/my.js"></script>
</body>
</html>
var el = function(element) {
if (element.charAt(0) === "#") {
return document.querySelector(element);
}
return document.querySelectorAll(element);
};
var viewer = el("#viewer"),
equals = el("#equals"),
nums = el(".num"),
ops = el(".ops"),
theNum = "",
oldNum = "",
resultNum,
operator;
var setNum = function() {
if (resultNum) {
theNum = this.getAttribute("data-num");
resultNum = "";
} else {
theNum += this.getAttribute("data-num");
}
viewer.innerHTML = theNum;
};
var moveNum = function() {
oldNum = theNum;
theNum = "";
operator = this.getAttribute("data-ops");
equals.setAttribute("data-result", "");
};
var displayNum = function() {
oldNum = parseInt(oldNum);
theNum = parseInt(theNum);
switch (operator) {
case "plus":
resultNum = oldNum + theNum;
break;
case "minus":
resultNum = oldNum - theNum;
break;
case "times":
resultNum = oldNum * theNum;
break;
case "divided by":
resultNum = oldNum / theNum;
break;
default:
resultNum = theNum;
}
if (!isFinite(resultNum)) {
if (isNaN(resultNum)) {
resultNum = "Ошибка";
}
}
viewer.innerHTML = resultNum;
equals.setAttribute("data-result", resultNum);
oldNum = 0;
theNum = resultNum;
};
var clearAll = function() {
oldNum = "";
theNum = "";
viewer.innerHTML = "0";
equals.setAttribute("data-result", resultNum);
};
for (var i = 0, l = nums.length; i < l; i++) {
nums[i].onclick = setNum;
}
for (var i = 0, l = ops.length; i < l; i++) {
ops[i].onclick = moveNum;
}
equals.onclick = displayNum;
el("#clear").onclick = clearAll;
|
|
05.06.2019, 15:14
|
 |
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,070
|
|
DarkPhoenix,
строка 58
viewer.innerHTML = resultNum == "Ошибка" ? resultNum : +resultNum.toFixed(2);
|
|
05.06.2019, 17:03
|
 |
Профессор
|
|
Регистрация: 20.12.2009
Сообщений: 1,714
|
|
DarkPhoenix, ничего так калькулятор: 2 + 3 + 4 = 7
Может нужно узнать о стеке?
Вот простейшая реализация стека на JavaScript (pop и push уже есть 😀 )...
class Stack extends Array {
peek() {
return this[this.length - 1];
}
}
Последний раз редактировалось Malleys, 05.06.2019 в 17:14.
|
|
05.06.2019, 18:22
|
|
Профессор
|
|
Регистрация: 27.11.2015
Сообщений: 2,899
|
|
|
Malleys,
Зато 4 + 3 + 2 = 5
|
|
05.06.2019, 18:37
|
|
Профессор
|
|
Регистрация: 27.11.2015
Сообщений: 2,899
|
|
DarkPhoenix,
Если не хотите использовать eval, нужно для ввода выражений использовать обратную польскую запись
Вот работающий черновичок Пример с обратной польской записью
В этом примере можно и так делать: (1+2)*3=9
Последний раз редактировалось Dilettante_Pro, 05.06.2019 в 18:39.
|
|
09.06.2019, 09:04
|
|
Профессор
|
|
Регистрация: 20.12.2009
Сообщений: 1,714
|
|
|
А что так трудно найти в интернете пример калькулятора на jQuery? Оказывается да! То один калькулятор на 2+2±= выдаёт 22, то 2+== вообще не работает, то можно сколько хочешь десятичных точек наставить (один калькулятор посчитал даже .+.=+3= получилось 5.718281828459045, другой вообще исчез document.body.innerHTML+='5+5';, и даже предложил печать print(5+5))
В другом можно ...---... но оно ничего не отправляет!
Ещё в одном ткнул не туда наверное, так оно потом на всё, что не нажми, всё NaN да Infinity выводит...
В одном ткнул два раза на делить, так оно вычисляет, что 21 ÷ 3 = 21
Надо же, погромисты на jQuery истину нам твердят, что 3 × 3 ÷ 3 = 0.09090909090909091
Ещё я долго думал, но так и не смог понять, что бы могло значить NaN.0
Или не надо называть такие поделия калькуляторами, которые выводят NaN целых и 0 десятых и делают кучу других странностей!
Самые лучшие в мире строители форм при помощи jQuery не могут сделать такую простую формочку...
Меня интересует то, что настоящие калькуляторы, типа CASIO или CITIZEN, насколько бы они не были ограничены по количеству операции, они адекватно обрабатывают ввод пользователя! Может всё дело в jQuery, что она не подходит для реальных вещей и всё, что вы при помощи неё будете делать, вопреки мнению laimas, что она для новичков, будет с багами... А как же может быть иначе, если вся логика приложения заключается в поиске по селектору, чтобы найти ещё больше элементов, когда ты добавишь кода в DOM при помощи метода html.
Последний раз редактировалось Malleys, 09.06.2019 в 09:06.
|
|
09.06.2019, 09:13
|
|
Профессор
|
|
Регистрация: 14.01.2015
Сообщений: 12,990
|
|
|
Сообщение от Malleys
|
|
Может всё дело в jQuery, что она не подходит для реальных вещей и всё, что вы при помощи неё будете делать, вопреки мнению laimas
|
Шило в заднице покоя не дает, jQuery то причем? Нерадивому разработчику как-то по барабану на чем писать, что на старославянском, что на традиционном китайском, один хрен толкового не получится. Не надо пороть бредятины, а тем более вам. |
|
09.06.2019, 09:46
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,070
|
|
|
Сообщение от Malleys
|
|
Может всё дело в jQuery, что она не подходит для реальных вещей
|
почему вы ошибки программирования, называите ошибками jQuery, бред какой-то, при всём уважении к вам. |
|
09.06.2019, 15:46
|
|
Профессор
|
|
Регистрация: 20.12.2009
Сообщений: 1,714
|
|
|
Сообщение от laimas
|
|
jQuery то причем?
|
Я хотел научиться писать на jQuery на примере калькулятора.
|
Сообщение от laimas
|
|
что на старославянском
|
|
Сообщение от laimas
|
|
что на традиционном китайском
|
Вот...
var Ꙛ = 2, Ꙝ = 3, Ꙙ = 5;
alert(Ꙛ * Ꙝ * Ꙙ);
var 㽈 = 2, 㽥 = 3, 㽩 = 5;
alert(㽈 * 㽥 * 㽩);
Ладно, сделать калькулятор, я начал с селекторов и элементов, которые подходят под эти селекторы... с нажать и вывести цифру на экран проблемы нет, но дальнейшая логика получается настолько запутанной...
|
Сообщение от рони
|
|
почему вы ошибки программирования, называете ошибками jQuery, бред какой-то
|
20 минут не понимать, почему селектор в jQuery не работает... И где там пиши меньше, делай больше, как её пропагандируют? DOM API или React.js показали бы в консоли, что не так, а здесь типо всё правильно...
Вычисление на калькуляторе можно рассматривать как свёртку текущего состояния и нажатой кнопки в новое состояние [State, Button] => State
Только я не понял, как такое реализовать на jQuery... вот без jQuery
https://codepen.io/Malleys/pen/gJyowr?editors=0010
Обычно показывают какой-нибудь страшный и длинный код 10 строчек, а потом говорят, что jQuery наше всё, и показывают одну, две строчки... Значит мои 54 строчки можно написать в 5 или 6 строчек... Я так обрадовался, что даже решил такое изучить, только оно так не получается у меня... может так показывают в специально подобранных примерах, чтобы набрать адептов! Не знаю! Меня бы интересовала реализация функции process из моего примера на jQuery.
|
|
09.06.2019, 16:03
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,070
|
|
|
Сообщение от Malleys
|
|
а здесь типо всё правильно...
|
одной из задач jQuery, как раз и было такое поведение, люди старались, чтоб код не рухнул при типичных ошибках новичков.
максимальная защита от дурака, когда например аргументом одной и той же функции, может быть, массив, строка, обьект, или другая функция.
Последний раз редактировалось рони, 09.06.2019 в 16:07.
|
|
|
|
