Exemple de code simple pour une calculatrice HTML

682 mambetovv

Ouvrir dans l'éditeur Video Publiez votre code

Exemple de code simple pour une calculatrice HTML

Recommandé

3 December 2025

Affichage de la grille CSS de la matrice Hadamard

31 October 2025

Effet de texte glitch CSS

16 December 2025

Barre de navigation HTML avec menu déroulant et style

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>

Recommandé

Affichage de la grille CSS de la matrice Hadamard

Effet de texte glitch CSS

Barre de navigation HTML avec menu déroulant et style

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS