Ejemplo de código de calculadora HTML simple

484 mambetovv

Abrir en el editor Publica tu código

Ejemplo de código de calculadora HTML simple

Recomendado

23 May 2025

Inicio de sesión con tarjeta

18 December 2023

Animación de Texto en HTML y CSS

22 November 2025

Plantilla HTML para clínica dental | Clínica Dontel

HTML

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <title>Калькулятор</title>
  <style>
    body { font-family: Arial; display: flex; justify-content: center; margin-top: 50px; }
    .calc { border: 2px solid #444; border-radius: 10px; padding: 20px; background: #f3f3f3; }
    input { width: 200px; height: 30px; margin-bottom: 10px; text-align: right; font-size: 18px; }
    .buttons { display: grid; grid-template-columns: repeat(4, 50px); gap: 5px; }
    button { height: 50px; font-size: 18px; cursor: pointer; }
  </style>
</head>
<body>
  <div class="calc">
    <input id="display" readonly>
    <div class="buttons">
      <button onclick="press('7')">7</button>
      <button onclick="press('8')">8</button>
      <button onclick="press('9')">9</button>
      <button onclick="press('/')">/</button>
      <button onclick="press('4')">4</button>
      <button onclick="press('5')">5</button>
      <button onclick="press('6')">6</button>
      <button onclick="press('*')">*</button>
      <button onclick="press('1')">1</button>
      <button onclick="press('2')">2</button>
      <button onclick="press('3')">3</button>
      <button onclick="press('-')">-</button>
      <button onclick="press('0')">0</button>
      <button onclick="press('.')">.</button>
      <button onclick="calculate()">=</button>
      <button onclick="press('+')">+</button>
      <button onclick="clearDisplay()">C</button>
    </div>
  </div>

function press(symbol) {
      display.value += symbol;
    }

function calculate() {
      try {
        display.value = eval(display.value);
      } catch {
        display.value = "Ошибка";
      }
    }

function clearDisplay() {
      display.value = "";
    }
  </script>
</body>
</html>

Recomendado

Inicio de sesión con tarjeta

Animación de Texto en HTML y CSS

Plantilla HTML para clínica dental | Clínica Dontel

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS