Come Creare Una Calcolatrice Usando HTML
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’applicazione.
<!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’area 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’input corrente, precedente e l’operatore */ let currentInput = ''; let operator = ''; let previousInput = ''; /* Funzione per aggiungere numeri all’input corrente */ function appendNumber(number) { currentInput += number; // Aggiunge il numero cliccato all’input corrente document.getElementById('display').value = currentInput; // Aggiorna il display } /* Funzione per impostare l’operatore e prepararsi al prossimo input */ function setOperator(op) { operator = op; // Memorizza l’operatore scelto previousInput = currentInput; // Memorizza l’input corrente come precedente currentInput = ''; // Pulisce l’input corrente per il prossimo numero } /* Funzione per eseguire il calcolo in base all’operatore */ function calculate() { let result; // Esegue l’operazione corretta in base all’operatore 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’operatore } /* Funzione per pulire il display e resettare la calcolatrice */ function clearDisplay() { currentInput = ''; previousInput = ''; operator = ''; document.getElementById('display').value = ''; // Pulisce il display } </script></body></html>Spiegazione delle sezioni principali
Per aiutarti a gestire e modificare la calcolatrice, abbiamo scritto alcune indicazioni sulle sue funzionalità:
Struttura HTML
- La calcolatrice è contenuta in un elemento div con la classe calculator.
- Un elemento input viene usato come display della calcolatrice, ed è disabilitato per evitare che l’utente scriva manualmente.
- I pulsanti sono organizzati in una griglia tramite il div buttons e disposti per assomigliare a una calcolatrice.
Stile CSS
- Il corpo della pagina è stilizzato per centrare la calcolatrice verticalmente e orizzontalmente.
- La calcolatrice ha uno sfondo bianco con angoli arrotondati e un’ombra che le conferisce un aspetto a scheda.
- I pulsanti hanno dimensioni, colori e un effetto hover coerenti per un feedback visivo.
Funzionalità JavaScript
- appendNumber() aggiunge numeri al display quando l’utente clicca un pulsante.
- setOperator() memorizza l’operatore selezionato (+, -, *, /) e salva l’input corrente come previousInput.
- calculate() esegue l’operazione matematica corretta in base all’operatore selezionato e mostra il risultato.
- clearDisplay() resetta la calcolatrice cancellando tutti gli input e il display.
Questa è una calcolatrice semplice che usa HTML, CSS e JS di base. Di conseguenza, le sue funzionalità e l’aspetto sono piuttosto limitati.
Come Realizzare Una Calcolatrice per Compiti Complessi
La nostra calcolatrice HTML semplice sopra va bene per operazioni base ed ha un design pulito e funzionale. È utile per divertirsi un po’ o per monitorare i tuoi progressi mentre impari a programmare. Ma per compiti professionali o più complessi, potresti aver bisogno di qualcosa di più avanzato. Che tu stia pianificando un budget familiare o organizzando un viaggio, funzionalità di calcolo più sofisticate possono fare la differenza. Quali sono quindi le tue opzioni?
Approfondisci la programmazione
Il modo migliore per affrontare progetti più complessi è approfondire HTML, CSS e JavaScript. Con conoscenze avanzate potrai creare calcoli con più campi, opzioni, condizioni e variabili. A quel punto, le tue capacità di programmazione andranno ben oltre la semplice creazione di una calcolatrice HTML base. È una strada lunga da percorrere.
Prova il widget Calcolatrice no-code per HTML
Se le tue competenze di programmazione non sono ancora avanzate e ti serve subito una soluzione potente, abbiamo una buona notizia. Puoi creare un widget Calcolatrice in HTML senza alcuna conoscenza di codice. Puoi aggiungere numerosi campi, regolare condizioni e nominare tutto in modo chiaro per il tuo scenario. Provalo nell’editor qui sotto prima di continuare.
Creare Un Widget Calcolatrice HTML: Senza Programmare
In questa sezione descriviamo in dettaglio come creare il tuo widget Calcolatrice HTML personalizzato. Inoltre, può essere facilmente integrato in qualsiasi sito web e funzionerà immediatamente. Vediamo come funziona.
- Scegli un modello adatto. Puoi continuare nell’editor che hai visto sopra oppure esplorare la nostra lista di modelli di Calcolatrici predefiniti e scegliere quello più adatto al tuo caso.
- Aggiungi i campi necessari. Il widget offre slider, numeri, scelte, menu a tendina e altri campi per rappresentare accuratamente il tuo scenario.
- Personalizza lo stile. Usa la scheda ‘Stile’ nell’editor per decorare la tua calcolatrice, adattandola ai tuoi gusti, al brand o ai colori del sito.
- Regola altre impostazioni. Vai alla scheda ‘Impostazioni’ per completare il widget, stabilendo separatori e altre regole per la calcolatrice. Puoi inserire anche il tuo codice HTML se hai idee personali da aggiungere.
- Salva e inizia a usare. Quando sei soddisfatto del risultato, pubblica il widget per ottenere il codice HTML della tua calcolatrice. Vedrai un paio di righe da aggiungere a qualsiasi piattaforma web.
Una volta sul sito, puoi usare questo widget Calcolatrice HTML per tutto il tempo che vuoi. Pianifica costi o risparmi, usalo per promuovere i tuoi servizi commerciali o aggiungi interattività al tuo blog. Ora puoi leggere brevi manuali su come aggiungere la tua Calcolatrice alle piattaforme CMS più popolari o trovare il tuo website builder nella lista delle piattaforme.
Esempi di Calcolatrici in HTML
Ecco solo alcuni esempi di ciò che puoi creare da solo senza programmare in soli 5-10 minuti. Tieni presente il tuo caso d’uso e cerca di includere tutte le idee nel modulo della calcolatrice mentre lavori nell’editor.
Calcolatrice Mutuo
Aiuta gli utenti a stimare facilmente le rate mensili del mutuo basandosi su importo del prestito, tasso d’interesse e durata. Prova la nostra Calcolatrice Mutuo personalizzabile.
Calcolatrice ROI
Permetti alle aziende di calcolare facilmente i potenziali ritorni sugli investimenti. Dai un’occhiata al nostro modello Calcolatrice ROI.
Calcolatrice BMI
Calcola l’Indice di Massa Corporea usando altezza e peso per offrire preziose informazioni sulla salute. Inizia a creare con la nostra Calcolatrice BMI.
Considerazioni Finali
In conclusione, ti abbiamo mostrato come creare una calcolatrice HTML semplice, completa di codice pronto all’uso per iniziare subito. Anche se è perfetta per compiti base e scopi didattici, per calcoli più avanzati e scenari complessi, un widget versatile è la soluzione migliore.
Il nostro widget si integra perfettamente in qualsiasi sito web e gestisce una vasta gamma di casi d’uso popolari, offrendo funzionalità avanzate e flessibilità. Che tu stia gestendo finanze o calcoli più intricati, la nostra soluzione ti fornisce gli strumenti necessari per portare a termine il lavoro.
Editor: Crea Calcolatrice HTML Gratis
Pronto a creare la tua calcolatrice HTML personalizzata e scoprire tutte le funzionalità? Prova l’editor della Calcolatrice direttamente in pagina per vedere il widget in azione!
Contattaci
Speriamo che questa guida ti sia stata utile! Se vuoi creare una calcolatrice personalizzata per il tuo sito, non esitare a contattarci. La nostra missione in Elfsight è offrirti un’esperienza semplice e di successo grazie ai nostri widget no-code.
Entra a far parte della nostra vivace Community, dove idee e suggerimenti sono sempre condivisi. Siamo aperti ai tuoi consigli per miglioramenti—aggiungili pure alla nostra Wishlist!
