Das Erstellen eines einfachen Taschenrechners mit HTML und JavaScript kann für Webentwickler, die gerade erst anfangen, eine unterhaltsame und lehrreiche Aufgabe sein.  Durch die Kombination der Funktionen von HTML für die Gestaltung der Benutzeroberfläche und JavaScript für die Berechnungsverarbeitung können Sie direkt in Ihrem Browser einen interaktiven und funktionierenden Taschenrechner erstellen.  In diesem Beitrag führen wir Sie Schritt für Schritt durch den Prozess der Erstellung eines einfachen Taschenrechners von Grund auf und erkunden dabei auch die Prinzipien der Webprogrammierung.  Zunächst müssen wir die Projektumgebung erstellen. Wir erstellen das grundlegende HTML-Framework, das als Grundlage für unseren Rechner dient. Um den Rechner außerdem optisch ansprechender zu gestalten, richten wir sein Aussehen mithilfe von CSS ein.  Abschließend konfigurieren wir die JavaScript-Umgebung, um unserem Rechner Funktionalität hinzuzufügen.   Inhaltsverzeichnis  Schritte zum Erstellen eines einfachen Taschenrechners mit HTML und JavaScript  Entwerfen der Benutzeroberfläche  Umgang mit der Benutzereingabe  Durchführen der Berechnung  Vollständiger HTML-Code für einen einfachen HTML-Rechner  Vorschau des einfachen HTML-Rechners  Abschluss  Schritte zum Erstellen eines einfachen Rechners mit HTML und JavaScript  Hier sind die Schritte zum Erstellen eines einfachen Taschenrechners mit HTML und JavaScript, der einfache Arithmetik für ganzzahlige Zahlen durchführen kann.  Text- und Schaltflächeneingaben werden in einer Tabelle innerhalb eines Formularelements verwendet, und das OnClick-Ereignis wurde verwendet, um Schaltflächenwerte auf dem Bildschirm zu platzieren oder die Zahlen auszuwerten.  1. Entwerfen der Benutzeroberfläche  Die Benutzeroberfläche (UI) ist die Vorderseite des Rechners. Wir erstellen eine saubere Anzeige zur Anzeige von Eingaben und Ergebnissen. Wir stellen auch interaktive Schaltflächen für Ganzzahlen und Operatoren bereit. Unser Ziel ist es, ein intuitives und benutzerfreundliches Design zu entwickeln, das alle Aspekte der Rechnerbenutzer bereichert.  Führen Sie die folgenden Schritte aus, um die Benutzeroberfläche des Rechners zu gestalten.  Schritt 1. Erstellen Sie zunächst das <html>-Tag zusammen mit dem <form>-Element und dem <body>-Tag wie unten angegeben.   <html> <head><title>A Simple Calculator Using HTML</title></head> <body> <h3>A Simple Calculator Using HTML</h3> <form Name="calc"> </form> </body> </html>  Schritt 2. Erstellen Sie nun eine Tabelle innerhalb des Tags <form>……</form> mit dem Tag <table> …..</table> und fügen Sie mit <tr zwei Arten von Eingabetext und Schaltflächen in die Tabellendaten der Tabellenzeile ein ><td>….</td></tr>-Tag.   <table id="calc" border=2> <tr> <td colspan=5><input id="btn" name="display" type="text"></td> <td style="display:none"><input name="M" type="number"></td> </tr> </table>  Schritt 3. Erstellen Sie dann Schaltflächen mit dem <input>-Tag und legen Sie außerdem die „ID“ und den „Wert“ dieser Schaltflächen in der Tabellenzeile mit den Tags <tr><td>….</td></tr> fest Nachstehend dargestellt.   <tr> <td><input id="btn" type=button value="MC"></td> <td><input id="btn" type=button value="0"></td> <td><input id="btn" type=button value="1"></td> <td><input id="btn" type=button value="2"></td> <td><input id="btn" type=button value="+"></td> </tr> <tr> <td><input id="btn" type=button value="MS"></td> <td><input id="btn" type=button value="3"></td> <td><input id="btn" type=button value="4"></td> <td><input id="btn" type=button value="5"></td> <td><input id="btn" type=button value="-"></td> </tr> <tr> <td><input id="btn" type=button value="MR"></td> <td><input id="btn" type=button value="6"></td> <td><input id="btn" type=button value="7"></td> <td><input id="btn" type=button value="8"></td> <td><input id="btn" type=button value="x"></td> </tr> <tr> <td><input id="btn" type=button value="M+"></td> <td><input id="btn" type=button value="9"></td> <td><input id="btn" type=button value="±"></td> <td><input id="btn" type=button value="="></td> <td><input id="btn" type=button value="/"></td> </tr> <tr> <td><input id="btn" type=button value="1/x"></td> <td><input id="btn" type=button value="."></td> <td><input id="btn" type=button value="x2"></td> <td><input id="btn" type=button value="√"></td> <td><input id="btn" type=button value="C"></td> </tr>  Schritt 4. Fügen Sie abschließend den folgenden CSS-Code hinzu, um das Design für den Taschenrechner mit dem Tag <style>…..</style> wie unten angegeben zu erstellen.   <style> #calc{width:300px;height:250px;} #btn{width:100%;height:40px;font-size:20px;} </style>  2. Umgang mit der Benutzereingabe  Führen Sie die folgenden Schritte aus, um die Benutzeroberfläche des Rechners zu gestalten.  #Schritt 1. Weisen Sie einer Anzeigeschaltfläche, die zur Anzeige der Eingabe und des Ergebnisses der Berechnung erstellt wurde, ein „onkeypress“-Ereignis zu, wie unten angegeben.   <tr> <td colspan=5><input id="btn" name="display" onkeypress="return event.charCode >= 48 && event.charCode <= 57" type="text"></td> <td style="display:none"><input name="M" type="number"></td> </tr>  Schritt 2: Weisen Sie allen Schaltflächen mit Zahlen und arithmetischen Operatoren ein OnClick-Ereignis zu, wie unten angegeben.   <tr> <td><input id="btn" type=button value="MC" OnClick="calc.M.value=''"></td> <td><input id="btn" type=button value="0" OnClick="calc.display.value+='0'"></td> <td><input id="btn" type=button value="1" OnClick="calc.display.value+='1'"></td> <td><input id="btn" type=button value="2" OnClick="calc.display.value+='2'"></td> <td><input id="btn" type=button value="+" OnClick="calc.display.value+='+'"></td> </tr> <tr> <td><input id="btn" type=button value="MS" OnClick="calc.M.value=calc.display.value"></td> <td><input id="btn" type=button value="3" OnClick="calc.display.value+='3'"></td> <td><input id="btn" type=button value="4" OnClick="calc.display.value+='4'"></td> <td><input id="btn" type=button value="5" OnClick="calc.display.value+='5'"></td> <td><input id="btn" type=button value="-" OnClick="calc.display.value+='-'"></td> </tr> <tr> <td><input id="btn" type=button value="MR" OnClick="calc.display.value=calc.M.value"></td> <td><input id="btn" type=button value="6" OnClick="calc.display.value+='6'"></td> <td><input id="btn" type=button value="7" OnClick="calc.display.value+='7'"></td> <td><input id="btn" type=button value="8" OnClick="calc.display.value+='8'"></td> <td><input id="btn" type=button value="x" OnClick="calc.display.value+='*'"></td> </tr>  3. Durchführen der Berechnung  Weisen Sie allen arithmetischen Operatoren ein OnClick-Ereignis zu, geben Sie für die Schaltfläche „Clear(C)“ doppelte Anführungszeichen mit Leerzeichen („“) ein und verwenden Sie die Funktion eval(), um die Zahlen im OnClick-Ereignis wie unten angegeben auszuwerten.   <tr> <td><input id="btn" type=button value="M+" OnClick="calc.M.value=(Number(calc.M.value))+(Number(calc.display.value))"></td> <td><input id="btn" type=button value="9" OnClick="calc.display.value+='9'"></td> <td><input id="btn" type=button value="±" OnClick="calc.display.value=(calc.display.value==Math.abs(calc.display.value)?-(calc.display.value):Math.abs(calc.display.value))"> </td> <td><input id="btn" type=button value="=" OnClick="calc.display.value=eval(calc.display.value)"></td> <td><input id="btn" type=button value="/" OnClick="calc.display.value+='/'"></td> </tr> <tr> <td><input id="btn" type=button value="1/x" OnClick="calc.display.value=1/calc.display.value"></td> <td><input id="btn" type=button value="." OnClick="calc.display.value+='.'"></td> <td><input id="btn" type=button value="x2" OnClick="calc.display.value=Math.pow(calc.display.value,2)"></td> <td><input id="btn" type=button value="√" OnClick="calc.display.value=Math.sqrt(calc.display.value)"></td> <td><input id="btn" type=button value="C" OnClick="calc.display.value=''"></td> </tr>  Vollständiger HTML-Code für einen einfachen HTML-Rechner   <html> <head></head> <body> <h3>Simple Calculator</h3> <br/> <style> #calc{width:300px;height:250px;} #btn{width:100%;height:40px;font-size:20px;} </style> <form Name="calc"> <table id="calc" border=2> <tr> <td colspan=5><input id="btn" name="display" onkeypress="return event.charCode >= 48 && event.charCode <= 57" type="text"></td> <td style="display:none"><input name="M" type="number"></td> </tr> <tr> <td><input id="btn" type=button value="MC" OnClick="calc.M.value=''"></td> <td><input id="btn" type=button value="0" OnClick="calc.display.value+='0'"></td> <td><input id="btn" type=button value="1" OnClick="calc.display.value+='1'"></td> <td><input id="btn" type=button value="2" OnClick="calc.display.value+='2'"></td> <td><input id="btn" type=button value="+" OnClick="calc.display.value+='+'"></td> </tr> <tr> <td><input id="btn" type=button value="MS" OnClick="calc.M.value=calc.display.value"></td> <td><input id="btn" type=button value="3" OnClick="calc.display.value+='3'"></td> <td><input id="btn" type=button value="4" OnClick="calc.display.value+='4'"></td> <td><input id="btn" type=button value="5" OnClick="calc.display.value+='5'"></td> <td><input id="btn" type=button value="-" OnClick="calc.display.value+='-'"></td> </tr> <tr> <td><input id="btn" type=button value="MR" OnClick="calc.display.value=calc.M.value"></td> <td><input id="btn" type=button value="6" OnClick="calc.display.value+='6'"></td> <td><input id="btn" type=button value="7" OnClick="calc.display.value+='7'"></td> <td><input id="btn" type=button value="8" OnClick="calc.display.value+='8'"></td> <td><input id="btn" type=button value="x" OnClick="calc.display.value+='*'"></td> </tr> <tr> <td><input id="btn" type=button value="M+" OnClick="calc.M.value=(Number(calc.M.value))+(Number(calc.display.value))"></td> <td><input id="btn" type=button value="9" OnClick="calc.display.value+='9'"></td> <td><input id="btn" type=button value="±" OnClick="calc.display.value=(calc.display.value==Math.abs(calc.display.value)?-(calc.display.value):Math.abs(calc.display.value))"> </td> <td><input id="btn" type=button value="=" OnClick="calc.display.value=eval(calc.display.value)"></td> <td><input id="btn" type=button value="/" OnClick="calc.display.value+='/'"></td> </tr> <tr> <td><input id="btn" type=button value="1/x" OnClick="calc.display.value=1/calc.display.value"></td> <td><input id="btn" type=button value="." OnClick="calc.display.value+='.'"></td> <td><input id="btn" type=button value="x2" OnClick="calc.display.value=Math.pow(calc.display.value,2)"></td> <td><input id="btn" type=button value="√" OnClick="calc.display.value=Math.sqrt(calc.display.value)"></td> <td><input id="btn" type=button value="C" OnClick="calc.display.value=''"></td> </tr> </table> </form> </body> </html>  Vorschau des einfachen HTML-Rechners  Sie können den HTML-Rechner aus dem auf InfoTechSite veröffentlichten Originalartikel sehen und verwenden.   Klicken Sie hier, um den HTML-Rechner anzuzeigen.   Auch   veröffentlicht hier

The code in this story is for educational purposes. The readers are solely responsible for whatever they build with it.

Get free Tech Tutorials Now!

Read My Stories

Dieses Audio ist in der Originalsprache der Geschichte produziert!

Der beste Weg, einen einfachen Rechner mit HTML und JavaScript zu erstellen

About Author

KOMMENTARE

Hängeetiketten

DIESER ARTIKEL WURDE VORGESTELLT IN

Related Stories

HackerNoon Decoded 2024: Celebrating Our AI Community!

HackerNoon Decoded 2024: Wir feiern unsere Gaming-Community!

HackerNoon Decoded 2024: Celebrating Our Writing Community!

HackerNoon Decoded 2024: Wir feiern unsere Produktmanagement-Community!

HackerNoon Decoded 2024: Celebrating Our AI Community!

HackerNoon Decoded 2024: Wir feiern unsere Gaming-Community!

HackerNoon Decoded 2024: Celebrating Our Writing Community!

HackerNoon Decoded 2024: Wir feiern unsere Produktmanagement-Community!

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps