Показать сообщение отдельно
  #1 (permalink)  
Старый 05.06.2019, 15:00
Аспирант
Отправить личное сообщение для DarkPhoenix Посмотреть профиль Найти все сообщения от DarkPhoenix
 
Регистрация: 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;
Ответить с цитированием