Wie man einen einfachen HTML-Rechner erstellt

Lesen Sie eine einfache Anleitung zur Erstellung eines Rechners in HTML, den Sie selbst in einem benutzerfreundlichen Editor erstellen oder einfach den Code aus dem Artikel kopieren können. Holen Sie sich den Code für einen einfachen HTML-Rechner, um ihn auf Ihrer Website zu verwenden.

Rechner-Widget erstellen

Valeria Polyakova

1 Woche zuvor

Wie man einen Rechner mit HTML erstellt

Wenn Sie einen schnellen und einfachen Rechner mit grundlegenden Funktionen wie Addition, Subtraktion, Multiplikation und Division benötigen, verwenden Sie einfach den folgenden Code. Sie können den HTML-Code dieses Rechners in Ihre HTML-Datei einfügen und prüfen, wie alles funktioniert. Der Code enthält Kommentare, damit Sie verstehen, wie alles funktioniert, und Änderungen am Stil und Layout dieser Anwendung vornehmen können.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Simple Calculator</title>
  <style>
    /* Style for the entire body, centering the calculator */
    body {
      font-family: Arial, sans-serif;
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
      background-color: #f0f0f0;
    }

    /* Style for the calculator container */
    .calculator {
      background-color: white;
      padding: 20px;
      border-radius: 10px;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    }

    /* Style for the display area */
    .display {
      width: 160px;
      height: 40px;
      text-align: right;
      margin-bottom: 10px;
      font-size: 1.5em;
      padding: 5px;
    }

    /* Grid layout for the calculator buttons */
    .buttons {
      display: grid;
      grid-template-columns: repeat(4, 40px);
      gap: 10px;
    }

    /* Style for the buttons */
    .buttons button {
      width: 40px;
      height: 40px;
      font-size: 1.2em;
      border: none;
      background-color: #4CAF50;
      color: white;
      border-radius: 5px;
      cursor: pointer;
    }

    /* Hover effect for the buttons */
    .buttons button:hover {
      background-color: #45a049;
    }

    /* Special style for the equals button */
    .buttons .equals {
      grid-column: span 2; /* Spans over 2 columns */
      background-color: #2196F3;
    }

    /* Hover effect for the equals button */
    .buttons .equals:hover {
      background-color: #0b7dda;
    }
  </style>
</head>
<body>
  <div class="calculator">
    <!-- Input field to display the calculator results -->
    <input type="text" class="display" id="display" disabled>
    
    <!-- Calculator buttons laid out in a grid -->
    <div class="buttons">
      <button onclick="appendNumber('1')">1</button>
      <button onclick="appendNumber('2')">2</button>
      <button onclick="appendNumber('3')">3</button>
      <button onclick="setOperator('+')">+</button>

      <button onclick="appendNumber('4')">4</button>
      <button onclick="appendNumber('5')">5</button>
      <button onclick="appendNumber('6')">6</button>
      <button onclick="setOperator('-')">-</button>

      <button onclick="appendNumber('7')">7</button>
      <button onclick="appendNumber('8')">8</button>
      <button onclick="appendNumber('9')">9</button>
      <button onclick="setOperator('*')">*</button>

      <button onclick="clearDisplay()">C</button>
      <button onclick="appendNumber('0')">0</button>
      <button onclick="calculate()" class="equals">=</button>
      <button onclick="setOperator('/')">/</button>
    </div>
  </div>

  <script>
    /* Variables to store current input, previous input, and operator */
    let currentInput = '';
    let operator = '';
    let previousInput = '';

    /* Function to append numbers to the current input */
    function appendNumber(number) {
      currentInput += number; // Append the clicked number to current input
      document.getElementById('display').value = currentInput; // Update the display
    }

    /* Function to set the operator and prepare for the next input */
    function setOperator(op) {
      operator = op; // Store the chosen operator
      previousInput = currentInput; // Store the current input as previous
      currentInput = ''; // Clear the current input for the next number
    }

    /* Function to perform the calculation based on the operator */
    function calculate() {
      let result;
      // Perform the appropriate operation based on the operator
      if (operator === '+') {
        result = parseFloat(previousInput) + parseFloat(currentInput);
      } else if (operator === '-') {
        result = parseFloat(previousInput) - parseFloat(currentInput);
      } else if (operator === '*') {
        result = parseFloat(previousInput) * parseFloat(currentInput);
      } else if (operator === '/') {
        result = parseFloat(previousInput) / parseFloat(currentInput);
      }
      document.getElementById('display').value = result; // Display the result
      currentInput = result.toString(); // Store the result as the new current input
      operator = ''; // Reset the operator
    }

    /* Function to clear the display and reset the calculator */
    function clearDisplay() {
      currentInput = '';
      previousInput = '';
      operator = '';
      document.getElementById('display').value = ''; // Clear the display
    }
  </script>
</body>
</html>

Erklärung der wichtigsten Abschnitte

Um Ihnen bei der Verwaltung und Anpassung des Rechners zu helfen, haben wir einige zusätzliche Anleitungen zu seinen Funktionen geschrieben:

HTML-Struktur

Der Rechner befindet sich innerhalb eines div-Elements mit der Klasse calculator.
Ein input-Element wird als Anzeige für den Rechner verwendet und ist deaktiviert, sodass Benutzer nicht manuell eingeben können.
Die Tasten sind in einem Rasterformat innerhalb des buttons-div organisiert und so angeordnet, dass sie wie ein Taschenrechner aussehen.

CSS-Styling

Der Body der Seite ist so gestaltet, dass der Rechner vertikal und horizontal zentriert wird.
Der Rechner selbst hat einen weißen Hintergrund mit abgerundeten Ecken und einem Schatten, um ihm ein kartenähnliches Aussehen zu verleihen.
Die Tasten sind mit einer einheitlichen Größe, Farbe und einem Hover-Effekt für visuelles Feedback gestaltet.

JavaScript-Funktionalität

appendNumber() fügt Zahlen zur Anzeige hinzu, wenn ein Benutzer eine Taste drückt.
setOperator() speichert den ausgewählten Operator (+, -, *, /) und speichert die aktuelle Eingabe als vorherige Eingabe.
calculate() führt die entsprechende mathematische Operation basierend auf dem ausgewählten Operator aus und zeigt das Ergebnis an.
clearDisplay() setzt den Rechner zurück, indem alle Eingaben und die Anzeige gelöscht werden.

Dies ist ein einfacher Rechner, der nur grundlegendes HTML, CSS und JS verwendet. Daher sind seine Optik und Funktionen recht eingeschränkt.

Wie man einen Rechner für komplexe Aufgaben erstellt

Unser einfacher HTML-Rechner oben ist für grundlegende Berechnungen geeignet und hat ein sauberes, funktionales Design. Er eignet sich für kleine Aufgaben oder als Übungsprojekt beim Programmierenlernen. Aber für professionelle oder komplexere Berechnungen benötigen Sie möglicherweise eine erweiterte Lösung. Ob Sie ein Haushaltsbudget planen oder eine Reise organisieren, erweiterte Berechnungsfunktionen können einen großen Unterschied machen. Welche Möglichkeiten gibt es?

Mehr Programmieren lernen

Der beste Weg, komplexere Projekte anzugehen, besteht darin, sich tiefer mit HTML, CSS und JavaScript zu beschäftigen. Mit fortgeschrittenem Wissen können Sie Berechnungen mit mehreren Feldern, Optionen, Bedingungen und Variablen erstellen. An diesem Punkt gehen Ihre Programmierkenntnisse weit über das einfache Erstellen eines HTML-Rechners hinaus. Es ist ein weiter Weg, aber es lohnt sich.

Probieren Sie das No-Code-Rechner-Widget für HTML aus

Falls Ihre Programmierkenntnisse noch nicht fortgeschritten sind und Sie sofort eine leistungsstarke Lösung benötigen, gibt es gute Nachrichten. Sie können ein individuelles Rechner-Widget in HTML ohne jegliche Programmierkenntnisse erstellen. Sie können zahlreiche eigene Felder hinzufügen, Bedingungen anpassen und alles klar benennen. Testen Sie es einfach im Editor unten, bevor wir fortfahren.

In diesem Abschnitt beschreiben wir detailliert, wie Sie Ihr eigenes HTML-Rechner-Widget erstellen können. Außerdem kann es problemlos in jede Website eingebettet werden und funktioniert sofort. Schauen wir uns an, wie es funktioniert.

Wählen Sie eine geeignete Vorlage. Sie können im Editor oben weitermachen oder unsere Liste vordefinierter Rechner-Vorlagen durchstöbern und die passende Lösung für Ihren Fall wählen.
Fügen Sie die erforderlichen Felder hinzu. Das Widget bietet Schieberegler, Zahlen, Auswahlmöglichkeiten, Dropdowns und andere Felder, um Ihr Szenario genau darzustellen.
Passen Sie das Design an. Verwenden Sie die Registerkarte „Stil“ im Editor, um Ihren Rechner nach Ihrem Geschmack, Ihrer Marke oder den Farben Ihrer Website zu gestalten.
Passen Sie weitere Einstellungen an. Gehen Sie zur Registerkarte „Einstellungen“, um Ihr Widget zu finalisieren, Trennzeichen zu setzen und weitere Regeln für Ihren Rechner festzulegen. Falls Sie eigene HTML- und JS-Ideen haben, können Sie sie dort einfügen.
Speichern und verwenden. Wenn Sie mit dem Ergebnis zufrieden sind, veröffentlichen Sie Ihr Widget, um den HTML-Code Ihres Rechners zu erhalten. Sie erhalten einige Codezeilen, die in jede Website-Plattform eingefügt werden können.

Auf einer Website können Sie dieses HTML-Rechner-Widget so lange verwenden, wie Sie möchten. Planen Sie Ihre Kosten oder Ersparnisse, nutzen Sie es zur Bewerbung Ihrer kommerziellen Dienstleistungen oder fügen Sie Ihrem Blog Interaktivität hinzu. Sie können jetzt kurze Anleitungen zum Hinzufügen Ihres Rechners zu den beliebtesten CMS-Plattformen lesen oder Ihren Website-Builder in der Liste der Plattformen finden.

Beispiele für Rechner in HTML

Hier sind einige Beispiele für Rechner, die Sie ohne Programmierkenntnisse in nur 5–10 Minuten selbst erstellen können. Denken Sie an Ihr Anwendungsbeispiel und versuchen Sie, alle Ideen in das Rechner-Formular im Editor aufzunehmen.

Das Rechner-Widget wird durch KI unterstützt. Sie können einen Rechner generieren, indem Sie dem Widget einfach mitteilen, was Sie berechnen möchten. Die entsprechenden Felder für Ihre Beschreibung erscheinen dann automatisch.

Hypothekenrechner

Helfen Sie Benutzern, ihre monatlichen Hypothekenzahlungen basierend auf Darlehensbetrag, Zinssatz und Laufzeit einfach zu berechnen. Probieren Sie unseren anpassbaren Hypothekenrechner aus.

ROI-Rechner

Ermöglichen Sie Unternehmen, potenzielle Renditen ihrer Investitionen einfach zu berechnen. Schauen Sie sich unsere ROI-Rechner-Vorlage an.

BMI-Rechner

Berechnen Sie den Body-Mass-Index anhand von Größe und Gewicht, um wertvolle Gesundheitsinformationen bereitzustellen. Starten Sie mit unserem BMI-Rechner.

Abschließende Gedanken

Zusammenfassend haben wir Ihnen gezeigt, wie Sie einen einfachen HTML-Rechner erstellen können, einschließlich sofort einsatzbereitem Code, um Ihnen den Einstieg zu erleichtern. Während dies perfekt für grundlegende Aufgaben und Lernzwecke ist, ist für fortgeschrittene Berechnungen und komplexe Szenarien ein vielseitiges Widget die bessere Wahl.

Unser Widget lässt sich nahtlos in jede Website integrieren und deckt eine breite Palette beliebter Anwendungsfälle ab, indem es erweiterte Funktionen und Flexibilität bietet. Egal, ob Sie Finanzen verwalten oder komplexe Berechnungen durchführen müssen, unsere Lösung bietet Ihnen die notwendigen Werkzeuge.

Editor: HTML-Rechner kostenlos erstellen

Bereit, Ihren eigenen benutzerdefinierten HTML-Rechner zu erstellen und alle Funktionen zu entdecken? Probieren Sie den Rechner-Editor aus, um das Widget in Aktion zu sehen!

Kontaktieren Sie uns

Wir hoffen, dass dieser Leitfaden für Sie hilfreich war! Wenn Sie einen benutzerdefinierten Rechner für Ihre Website erstellen möchten, können Sie uns gerne kontaktieren. Unsere Mission bei Elfsight ist es, Ihnen mit unseren No-Code-Widgets eine mühelose und erfolgreiche Erfahrung zu ermöglichen.

Werden Sie Teil unserer lebendigen Community, in der ständig Ideen und Einblicke ausgetauscht werden. Wir sind offen für Ihre Verbesserungsvorschläge – fügen Sie sie einfach unserer Wunschliste hinzu!