Wie man einen einfachen HTML-Rechner erstellt

So erstellen Sie einen Rechner mit HTML

Wenn Sie einen schnellen, einfachen Online-Rechner mit Grundfunktionen wie Addition, Subtraktion, Multiplikation und Division benötigen, verwenden Sie einfach den untenstehenden Code. Fügen Sie den HTML-Code dieses Rechners in Ihre HTML-Datei ein und prüfen Sie, wie alles funktioniert. Der Code enthält Kommentare, die Ihnen erklären, wie alles funktioniert, und Ihnen helfen, Stil und Layout dieser Anwendung anzupassen.

<!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 Kalkulators zu helfen, haben wir weitere Hinweise zu seinen Funktionen zusammengestellt:

HTML-Struktur

• Der Rechner befindet sich in einem Div-Element mit der Klasse calculator.
• Ein Input-Element dient als Anzeige für den Rechner und ist deaktiviert, damit Benutzer nicht manuell eingeben können.
• Die Schaltflächen sind in einem Raster angeordnet und verwenden das Schaltflächen div, damit sie wie ein Taschenrechner aussehen.

CSS-Styling

• Der Seiteninhalt ist so gestaltet, dass der Rechner vertikal und horizontal zentriert wird.
• Der Rechner selbst besitzt einen weißen Hintergrund, abgerundete Ecken und einen Schatten, der ihm ein Karten-Design verleiht.
• Die Buttons sind in einheitlicher Größe, Farbe und Hover-Effekt gestaltet – für klares visuelles Feedback.

JavaScript-Funktionalität

• appendNumber() fügt Zahlen zur Anzeige hinzu, wenn ein Benutzer auf eine Schaltfläche klickt.
• setOperator() speichert den ausgewählten Operator (+, -, *, /) und speichert die aktuelle Eingabe als previousInput.
• calculate() führt basierend auf dem gewählten Operator die passende mathematische Operation 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 JavaScript verwendet. Daher sind Optik und Funktionen ziemlich eingeschränkt.

So erstellen Sie einen Rechner für komplexe Aufgaben

Unser einfacher HTML-Rechner oben eignet sich gut für Basis-Operationen und überzeugt durch ein klares, funktionales Design. Ideal für etwas Spaß oder zum Verfolgen Ihres Lernfortschritts beim Programmieren. Bei professionellen oder komplexeren Aufgaben benötigen Sie jedoch möglicherweise fortschrittlichere Lösungen. Ob Sie ein Familienbudget planen oder eine Reise organisieren – erweiterte Rechenfunktionen können den Unterschied machen. Welche Optionen haben Sie?

Programmieren lernen

Der beste Weg, komplexere Projekte anzugehen, besteht darin, tiefer in HTML, CSS und JavaScript einzutauchen. Mit fortgeschrittenem Wissen können Sie Berechnungen mit mehreren Feldern, Optionen, Bedingungen und Variablen erstellen. An diesem Punkt gehen Ihre Programmierkenntnisse weit über das Erstellen eines einfachen HTML-Rechners hinaus. Das ist ein langer Weg.

No-Code-Rechner-Widget für HTML testen

Falls Ihre Programmierkenntnisse noch nicht ganz ausgereift sind und Sie jetzt eine leistungsstarke Lösung benötigen, gibt es gute Neuigkeiten für Sie. Sie können ein benutzerdefiniertes Berechnungs-Widget in HTML erstellen, ganz ohne Programmierkenntnisse. Sie können zahlreiche Felder hinzufügen, Bedingungen anpassen und alles klar auf Ihr Szenario abstimmen. Testen Sie es einfach im Editor unten, bevor wir fortfahren.

Ein HTML-Rechner-Widget erstellen: Ohne Code

In diesem Abschnitt erläutern wir ausführlicher, wie Sie Ihr benutzerdefiniertes HTML-Rechner-Widget erstellen. Es lässt sich zudem problemlos in jede Website einbetten und funktioniert sofort. Werfen wir einen Blick darauf, wie alles funktioniert.

1. Wählen Sie eine passende Vorlage. Sie können im Editor, den Sie oben gesehen haben, weiterarbeiten oder unsere Liste vorgefertigter Calculator-Vorlagen durchsuchen und die für Ihren Fall am passendsten passende Situation auswählen.

   

2. “> Erforderliche Felder hinzufügen. Das Widget bietet Schieberegler, Zahlen, Auswahlmöglichkeiten, Dropdowns und weitere Felder, um Ihre Situation genau abzubilden.

   

3. Stil anpassen. Verwenden Sie den Tab „Stil“ im Editor, um Ihren Rechner zu gestalten und ihn Ihrem Geschmack, Ihrer Marke oder den Farben Ihrer Website anzupassen.
4. Weitere Einstellungen vornehmen. Besuchen Sie die Registerkarte ‘Einstellungen’, um Ihr Widget abzuschließen, indem Sie Trennzeichen und weitere Regeln für Ihren Rechner festlegen. Falls Sie eigene HTML- und JS-Ideen haben, können Sie dort auch HTML- und JS-Einfügungen hinzufügen.
5. Speichern und sofort loslegen. Wenn Sie mit dem Ergebnis zufrieden sind, veröffentlichen Sie Ihr Widget, um den HTML-Code Ihres Rechners zu erhalten. Sie sehen anschließend einige Zeilen, die sich nun auf jeder Website-Plattform einbinden lassen.

adding your Calculator to the most popular CMS platforms or find your website builder in the list of platforms.”>Auf einer Website können Sie dieses HTML-Rechner-Widget beliebig lange verwenden. Planen Sie Ihre Kosten oder Ersparnisse, nutzen Sie es, um Ihre kommerziellen Dienstleistungen zu bewerben, oder bringen Sie Interaktivität in Ihren Blog. Sie können jetzt kurze Anleitungen dazu lesen, Ihren Rechner zu den beliebtesten CMS-Plattformen hinzufügen oder finden Sie Ihren Website-Builder in der Liste der Plattformen.

HTML-Rechner-Beispiele

Hier sind nur einige Beispiele dafür, was Sie in nur 5–10 Minuten ganz ohne Programmierung selbst erstellen können. Berücksichtigen Sie einfach Ihren Anwendungsfall und versuchen Sie, alle Ideen im Kalkulationsformular zu erfassen, wenn Sie im Editor arbeiten.

Hypothekenrechner

Helfen Sie Nutzern, ihre monatlichen Hypothekenzahlungen einfach anhand von Darlehensbetrag, Zinssatz und Laufzeit zu schätzen. Probieren Sie unseren anpassbaren Hypothekenrechner.

ROI-Rechner

Unternehmen befähigen, potenzielle Renditen aus Investitionen mühelos zu berechnen. Werfen Sie einen Blick auf unsere ROI-Rechner Vorlage.

BMI-Rechner

Berechne den Body-Mass-Index anhand von Größe und Gewicht, um wertvolle Gesundheitsdaten zu liefern. Starte mit unserem BMI-Rechner.

Abschließende Gedanken

Zusammenfassend haben wir Ihnen gezeigt, wie Sie einen einfachen HTML-Rechner erstellen – inklusive einsatzbereitem Code, der Ihnen den Einstieg erleichtert. Obwohl dies ideal für grundlegende Aufgaben und Lernzwecke ist, sind für fortgeschrittene Berechnungen und komplexe Szenarien vielseitige Widgets der richtige Weg.

Unser Widget lässt sich nahtlos in jede Website integrieren und deckt eine breite Palette gängiger Anwendungsfälle ab – mit erweiterten Funktionen und Flexibilität. Ob Sie Finanzen verwalten oder komplexere Berechnungen durchführen, bietet unsere Lösung die Werkzeuge, die Sie benötigen, um den Job zu erledigen.

Editor: Kostenlose HTML-Rechner erstellen

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

Kontaktieren Sie uns

Wir hoffen, dieser Leitfaden war hilfreich für Sie! Wenn Sie einen benutzerdefinierten Rechner für Ihre Website erstellen möchten, melden Sie sich gerne bei uns. Kontakt aufnehmen. Unsere Mission bei Elfsight ist es, Ihnen mit unseren No-Code-Widgets ein reibungsloses und erfolgreiches Erlebnis zu bieten.

Werde Teil unserer lebendigen Community, in der Ideen und Einblicke geteilt werden. Wir freuen uns über deine Verbesserungsvorschläge – füge sie einfach unserer Wishlist hinzu!

Artikel von

Ivan Timofeev

Technischer Content-Spezialist

Ivan ist technischer Content-Spezialist bei Elfsight. Er verfasst praxisnahe API-Anleitungen und Entwicklerdokumentationen, die Integrationen für verschiedene Plattformen und Automatisierungs-Workflows abdecken – und manuelle Arbeit reduzieren.

Auf X folgen

Auf LinkedIn folgen

Website