Калькулятор. Настроить вывод, и добавить историю
Писал я писал и завис...
Есть 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;
|
DarkPhoenix,
строка 58 viewer.innerHTML = resultNum == "Ошибка" ? resultNum : +resultNum.toFixed(2); |
DarkPhoenix, ничего так калькулятор: 2 + 3 + 4 = 7
Может нужно узнать о стеке? Вот простейшая реализация стека на JavaScript (pop и push уже есть 😀 )...
class Stack extends Array {
peek() {
return this[this.length - 1];
}
}
|
Malleys,
Зато 4 + 3 + 2 = 5 |
DarkPhoenix,
Если не хотите использовать eval, нужно для ввода выражений использовать обратную польскую запись Вот работающий черновичок Пример с обратной польской записью В этом примере можно и так делать: (1+2)*3=9 |
А что так трудно найти в интернете пример калькулятора на 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. |
Цитата:
|
Цитата:
|
Цитата:
Цитата:
Цитата:
var Ꙛ = 2, Ꙝ = 3, Ꙙ = 5; alert(Ꙛ * Ꙝ * Ꙙ); var 㽈 = 2, 㽥 = 3, 㽩 = 5; alert(㽈 * 㽥 * 㽩); Ладно, сделать калькулятор, я начал с селекторов и элементов, которые подходят под эти селекторы... с нажать и вывести цифру на экран проблемы нет, но дальнейшая логика получается настолько запутанной... Цитата:
Вычисление на калькуляторе можно рассматривать как свёртку текущего состояния и нажатой кнопки в новое состояние [State, Button] => State Только я не понял, как такое реализовать на jQuery... вот без jQuery https://codepen.io/Malleys/pen/gJyowr?editors=0010 Обычно показывают какой-нибудь страшный и длинный код 10 строчек, а потом говорят, что jQuery наше всё, и показывают одну, две строчки... Значит мои 54 строчки можно написать в 5 или 6 строчек... Я так обрадовался, что даже решил такое изучить, только оно так не получается у меня... может так показывают в специально подобранных примерах, чтобы набрать адептов! Не знаю! Меня бы интересовала реализация функции process из моего примера на jQuery. |
Цитата:
максимальная защита от дурака, когда например аргументом одной и той же функции, может быть, массив, строка, обьект, или другая функция. |
| Часовой пояс GMT +3, время: 17:45. |