Jan 01, 1970
2,440 Lesungen
Der beste Weg, einen einfachen Rechner mit HTML und JavaScript zu erstellen
Zu lang; Lesen
Hier sind die Schritte zum Erstellen eines einfachen Taschenrechners mit HTML und JavaScript, der einfache Arithmetik für ganzzahlige Zahlen durchführen kann.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 hier veröffentlicht
L O A D I N G
. . . comments & more!
. . . comments & more!
