Exemplo de código HTML simples para calculadora

16 mambetovbekzat39

Abrir no Editor Publique Seu Código

Exemplo de código HTML simples para calculadora

Recomendado

26 July 2025

Editor HTML Online | CodeCanvas - Ferramenta de Desenvolvimento Web Gratuita

28 September 2025

Animação de carregamento CSS com imagem de fundo

22 August 2025

Comentário de espaço reservado para código HTML

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

Editor HTML Online | CodeCanvas - Ferramenta de Desenvolvimento Web Gratuita

Animação de carregamento CSS com imagem de fundo

Comentário de espaço reservado para código HTML

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS