{"id":10267,"date":"2025-06-19T19:40:45","date_gmt":"2025-06-19T19:40:45","guid":{"rendered":"https:\/\/elfsight.com\/it\/?p=10267"},"modified":"2025-11-18T13:44:31","modified_gmt":"2025-11-18T13:44:31","slug":"how-to-make-a-simple-html-calculator","status":"publish","type":"post","link":"https:\/\/elfsight.com\/it\/blog\/how-to-make-a-simple-html-calculator\/","title":{"rendered":"Come creare una semplice calcolatrice in HTML"},"content":{"rendered":"
\r\n\t\t\t
Contents<\/div>\r\n\t\t\t
  1. Come Creare Una Calcolatrice Usando HTML<\/a><\/li>
  2. Come Realizzare Una Calcolatrice per Compiti Complessi<\/a><\/li>
  3. Creare Un Widget Calcolatrice HTML: Senza Programmare<\/a><\/li>
  4. Esempi di Calcolatrici in HTML<\/a><\/li>
  5. Considerazioni Finali<\/a><\/li>
  6. Editor: Crea Calcolatrice HTML Gratis<\/a><\/li><\/ol>\r\n\t\t<\/div>\n

    Come Creare Una Calcolatrice Usando HTML<\/h2>

    Se ti serve una calcolatrice semplice e veloce con funzioni base come addizione, sottrazione, moltiplicazione e divisione, usa il codice qui sotto. Puoi inserire questo codice HTML della calcolatrice nel tuo file HTML e vedere come funziona tutto. Il codice contiene commenti per aiutarti a capire il funzionamento e modificare lo stile e il layout dell\u2019applicazione.<\/p>

    <!DOCTYPE html><html lang=\"en\"><head>  <meta charset=\"UTF-8\">  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">  <title>Calcolatrice Semplice<\/title>  <style>    \/* Stile per tutto il corpo, centrando la calcolatrice *\/    body {      font-family: Arial, sans-serif;      display: flex;      justify-content: center;      align-items: center;      height: 100vh;      background-color: #f0f0f0;    }    \/* Stile per il contenitore della calcolatrice *\/    .calculator {      background-color: white;      padding: 20px;      border-radius: 10px;      box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);    }    \/* Stile per l\u2019area di visualizzazione *\/    .display {      width: 160px;      height: 40px;      text-align: right;      margin-bottom: 10px;      font-size: 1.5em;      padding: 5px;    }    \/* Layout a griglia per i pulsanti della calcolatrice *\/    .buttons {      display: grid;      grid-template-columns: repeat(4, 40px);      gap: 10px;    }    \/* Stile per i pulsanti *\/    .buttons button {      width: 40px;      height: 40px;      font-size: 1.2em;      border: none;      background-color: #4CAF50;      color: white;      border-radius: 5px;      cursor: pointer;    }    \/* Effetto hover per i pulsanti *\/    .buttons button:hover {      background-color: #45a049;    }    \/* Stile speciale per il pulsante uguale *\/    .buttons .equals {      grid-column: span 2; \/* Occupa 2 colonne *\/      background-color: #2196F3;    }    \/* Effetto hover per il pulsante uguale *\/    .buttons .equals:hover {      background-color: #0b7dda;    }  <\/style><\/head><body>  <div class=\"calculator\">    <!-- Campo di input per mostrare i risultati della calcolatrice -->    <input type=\"text\" class=\"display\" id=\"display\" disabled>        <!-- Pulsanti della calcolatrice disposti a griglia -->    <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>    \/* Variabili per memorizzare l\u2019input corrente, precedente e l\u2019operatore *\/    let currentInput = '';    let operator = '';    let previousInput = '';    \/* Funzione per aggiungere numeri all\u2019input corrente *\/    function appendNumber(number) {      currentInput += number; \/\/ Aggiunge il numero cliccato all\u2019input corrente      document.getElementById('display').value = currentInput; \/\/ Aggiorna il display    }    \/* Funzione per impostare l\u2019operatore e prepararsi al prossimo input *\/    function setOperator(op) {      operator = op; \/\/ Memorizza l\u2019operatore scelto      previousInput = currentInput; \/\/ Memorizza l\u2019input corrente come precedente      currentInput = ''; \/\/ Pulisce l\u2019input corrente per il prossimo numero    }    \/* Funzione per eseguire il calcolo in base all\u2019operatore *\/    function calculate() {      let result;      \/\/ Esegue l\u2019operazione corretta in base all\u2019operatore      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; \/\/ Mostra il risultato      currentInput = result.toString(); \/\/ Memorizza il risultato come nuovo input corrente      operator = ''; \/\/ Resetta l\u2019operatore    }    \/* Funzione per pulire il display e resettare la calcolatrice *\/    function clearDisplay() {      currentInput = '';      previousInput = '';      operator = '';      document.getElementById('display').value = ''; \/\/ Pulisce il display    }  <\/script><\/body><\/html><\/code><\/pre>
    Spiegazione delle sezioni principali<\/h3>
    Per aiutarti a gestire e modificare la calcolatrice, abbiamo scritto alcune indicazioni sulle sue funzionalit\u00e0:<\/p>
    Struttura HTML<\/h4>