Как сделать калькулятор в javascript?

Пользователь

sylvester

от sylvester , в категории: JavaScript , год назад

44 | 0

language

2 ответа

Пользователь

Ekaterina_90

от Ekaterina_90 , год назад

@sylvester Калькулятор в javascript можно сделать следующим образом:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
  </head>
  <body>
    <!-- Число 1 -->
    <input id="number1" />


    <!-- Кнопки -->
    <select class="operator">
      <option value="+">+</option>
      <option value="-">-</option>
      <option value="*">*</option>
      <option value="/">:</option>
    </div>


    <!-- Число 2 -->
    <input id="number2" />


    <!-- Кнопка для расчетов -->
    <button id="calculate">Посчитать</button>


    <!-- Ответ -->
    <p id="result"></p>


    <script>
    document.querySelector("#calculate").addEventListener("click", () => {
      let result;


      let number1 = Number(document.getElementById("number1").value);
      let number2 = Number(document.getElementById("number2").value);
      let op = document.querySelector(".operator").value;


      switch (op) {
        case "+":
          result = number1 + number2;
          break;
        case "-":
          result = number1 - number2;
          break;
        case "*":
          result = number1 * number2;
          break;
        case "/":
          result = number1 / number2;
          break;
        default:
          result = "No";
      }

      document.getElementById("result").innerHTML = result;
    });
    </script>
  </body>
</html>

1 | 0

Пользователь

krista

от krista , 7 месяцев назад

@sylvester

Существует множество способов создания калькулятора на JavaScript, но вот простой пример, который можно использовать как отправную точку:

HTML:

<div>
  <input type="text" id="input" disabled>
</div>

<div>
  <button onclick="addNumber('1')">1</button>
  <button onclick="addNumber('2')">2</button>
  <button onclick="addNumber('3')">3</button>
  <button onclick="addOperator('+')">+</button>
</div>

<div>
  <button onclick="addNumber('4')">4</button>
  <button onclick="addNumber('5')">5</button>
  <button onclick="addNumber('6')">6</button>
  <button onclick="addOperator('-')">-</button>
</div>

<div>
  <button onclick="addNumber('7')">7</button>
  <button onclick="addNumber('8')">8</button>
  <button onclick="addNumber('9')">9</button>
  <button onclick="addOperator('*')">*</button>
</div>

<div>
  <button onclick="addNumber('0')">0</button>
  <button onclick="addDecimal()">.</button>
  <button onclick="clearInput()">C</button>
  <button onclick="addOperator('/')">/</button>
</div>

<div>
  <button onclick="calculate()">=</button>
</div>

JavaScript:

let input = document.getElementById('input');
let operator = '';
let firstNumber = '';
let secondNumber = '';

function addNumber(number) {
  if (operator === '') {
    firstNumber += number;
    input.value = firstNumber;
  } else {
    secondNumber += number;
    input.value = secondNumber;
  }
}

function addOperator(op) {
  operator = op;
}

function addDecimal() {
  if (operator === '') {
    if (firstNumber.includes('.')) {
      return;
    }
    firstNumber += '.';
    input.value = firstNumber;
  } else {
    if (secondNumber.includes('.')) {
      return;
    }
    secondNumber += '.';
    input.value = secondNumber;
  }
}

function clearInput() {
  input.value = '';
  operator = '';
  firstNumber = '';
  secondNumber = '';
}

function calculate() {
  let result;
  let num1 = parseFloat(firstNumber);
  let num2 = parseFloat(secondNumber);

  switch (operator) {
    case '+':
      result = num1 + num2;
      break;
    case '-':
      result = num1 - num2;
      break;
    case '*':
      result = num1 * num2;
      break;
    case '/':
      result = num1 / num2;
      break;
    default:
      return;
  }

  input.value = result;
  operator = '';
  firstNumber = result.toString();
  secondNumber = '';
}

В этом примере мы создали простой калькулятор с возможностью выполнять основные арифметические операции (сложение, вычитание, умножение, деление) с использованием чисел с плавающей точкой. Мы также добавили кнопку "C", которая очищает ввод. Код использует DOM-элементы для получения ссылок на HTML-элементы, а затем обрабатывает события onclick, вызывая соответствующие функции для

0 | 0

Как сделать калькулятор в javascript?

2 ответа

Похожие обсуждения: