{"id":24955,"date":"2025-03-20T08:40:58","date_gmt":"2025-03-20T08:40:58","guid":{"rendered":"https:\/\/elfsight.com\/de\/?p=24955"},"modified":"2025-06-26T15:08:49","modified_gmt":"2025-06-26T15:08:49","slug":"how-to-make-a-simple-html-calculator","status":"publish","type":"post","link":"https:\/\/elfsight.com\/de\/blog\/how-to-make-a-simple-html-calculator\/","title":{"rendered":"Wie man einen einfachen HTML-Rechner erstellt"},"content":{"rendered":"
\r\n\t\t\t
Contents<\/div>\r\n\t\t\t

    \n
  1. Wie man einen Rechner mit HTML erstellt<\/a><\/li>
    \n
  2. Wie man einen Rechner f\u00fcr komplexe Aufgaben erstellt<\/a><\/li>
    \n
  3. Einen HTML-Rechner-Widget erstellen: Kein Coding erforderlich<\/a><\/li>
    \n
  4. Beispiele f\u00fcr Rechner in HTML<\/a><\/li>
    \n
  5. Abschlie\u00dfende Gedanken<\/a><\/li>
    \n
  6. Editor: HTML-Rechner kostenlos erstellen<\/a><\/li>
    \n<\/ol>\r\n\t\t<\/div>\n\n\n\n

    Wie man einen Rechner mit HTML erstellt<\/h2>\n\n\n\n

    Wenn Sie einen schnellen und einfachen Rechner mit grundlegenden Funktionen wie Addition, Subtraktion, Multiplikation und Division ben\u00f6tigen, verwenden Sie einfach den folgenden Code. Sie k\u00f6nnen den HTML-Code dieses Rechners in Ihre HTML-Datei einf\u00fcgen und pr\u00fcfen, wie alles funktioniert. Der Code enth\u00e4lt Kommentare, damit Sie verstehen, wie alles funktioniert, und \u00c4nderungen am Stil und Layout dieser Anwendung vornehmen k\u00f6nnen.<\/p>\n\n\n

    <!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\">\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n  <title>Simple Calculator<\/title>\n  <style>\n    \/* Style for the entire body, centering the calculator *\/\n    body {\n      font-family: Arial, sans-serif;\n      display: flex;\n      justify-content: center;\n      align-items: center;\n      height: 100vh;\n      background-color: #f0f0f0;\n    }\n\n    \/* Style for the calculator container *\/\n    .calculator {\n      background-color: white;\n      padding: 20px;\n      border-radius: 10px;\n      box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);\n    }\n\n    \/* Style for the display area *\/\n    .display {\n      width: 160px;\n      height: 40px;\n      text-align: right;\n      margin-bottom: 10px;\n      font-size: 1.5em;\n      padding: 5px;\n    }\n\n    \/* Grid layout for the calculator buttons *\/\n    .buttons {\n      display: grid;\n      grid-template-columns: repeat(4, 40px);\n      gap: 10px;\n    }\n\n    \/* Style for the buttons *\/\n    .buttons button {\n      width: 40px;\n      height: 40px;\n      font-size: 1.2em;\n      border: none;\n      background-color: #4CAF50;\n      color: white;\n      border-radius: 5px;\n      cursor: pointer;\n    }\n\n    \/* Hover effect for the buttons *\/\n    .buttons button:hover {\n      background-color: #45a049;\n    }\n\n    \/* Special style for the equals button *\/\n    .buttons .equals {\n      grid-column: span 2; \/* Spans over 2 columns *\/\n      background-color: #2196F3;\n    }\n\n    \/* Hover effect for the equals button *\/\n    .buttons .equals:hover {\n      background-color: #0b7dda;\n    }\n  <\/style>\n<\/head>\n<body>\n  <div class=\"calculator\">\n    <!-- Input field to display the calculator results -->\n    <input type=\"text\" class=\"display\" id=\"display\" disabled>\n    \n    <!-- Calculator buttons laid out in a grid -->\n    <div class=\"buttons\">\n      <button onclick=\"appendNumber('1')\">1<\/button>\n      <button onclick=\"appendNumber('2')\">2<\/button>\n      <button onclick=\"appendNumber('3')\">3<\/button>\n      <button onclick=\"setOperator('+')\">+<\/button>\n\n      <button onclick=\"appendNumber('4')\">4<\/button>\n      <button onclick=\"appendNumber('5')\">5<\/button>\n      <button onclick=\"appendNumber('6')\">6<\/button>\n      <button onclick=\"setOperator('-')\">-<\/button>\n\n      <button onclick=\"appendNumber('7')\">7<\/button>\n      <button onclick=\"appendNumber('8')\">8<\/button>\n      <button onclick=\"appendNumber('9')\">9<\/button>\n      <button onclick=\"setOperator('*')\">*<\/button>\n\n      <button onclick=\"clearDisplay()\">C<\/button>\n      <button onclick=\"appendNumber('0')\">0<\/button>\n      <button onclick=\"calculate()\" class=\"equals\">=<\/button>\n      <button onclick=\"setOperator('\/')\">\/<\/button>\n    <\/div>\n  <\/div>\n\n  <script>\n    \/* Variables to store current input, previous input, and operator *\/\n    let currentInput = '';\n    let operator = '';\n    let previousInput = '';\n\n    \/* Function to append numbers to the current input *\/\n    function appendNumber(number) {\n      currentInput += number; \/\/ Append the clicked number to current input\n      document.getElementById('display').value = currentInput; \/\/ Update the display\n    }\n\n    \/* Function to set the operator and prepare for the next input *\/\n    function setOperator(op) {\n      operator = op; \/\/ Store the chosen operator\n      previousInput = currentInput; \/\/ Store the current input as previous\n      currentInput = ''; \/\/ Clear the current input for the next number\n    }\n\n    \/* Function to perform the calculation based on the operator *\/\n    function calculate() {\n      let result;\n      \/\/ Perform the appropriate operation based on the operator\n      if (operator === '+') {\n        result = parseFloat(previousInput) + parseFloat(currentInput);\n      } else if (operator === '-') {\n        result = parseFloat(previousInput) - parseFloat(currentInput);\n      } else if (operator === '*') {\n        result = parseFloat(previousInput) * parseFloat(currentInput);\n      } else if (operator === '\/') {\n        result = parseFloat(previousInput) \/ parseFloat(currentInput);\n      }\n      document.getElementById('display').value = result; \/\/ Display the result\n      currentInput = result.toString(); \/\/ Store the result as the new current input\n      operator = ''; \/\/ Reset the operator\n    }\n\n    \/* Function to clear the display and reset the calculator *\/\n    function clearDisplay() {\n      currentInput = '';\n      previousInput = '';\n      operator = '';\n      document.getElementById('display').value = ''; \/\/ Clear the display\n    }\n  <\/script>\n<\/body>\n<\/html><\/code><\/pre>\n\n\n
    Erkl\u00e4rung der wichtigsten Abschnitte<\/h3>\n\n\n\n
    Um Ihnen bei der Verwaltung und Anpassung des Rechners zu helfen, haben wir einige zus\u00e4tzliche Anleitungen zu seinen Funktionen geschrieben:<\/p>\n\n\n\n
    HTML-Struktur<\/h4>\n\n\n\n