js, um einen einfachen Taschenrechner zu erstellen

js, um einen einfachen Taschenrechner zu erstellen

In diesem Artikel finden Sie den spezifischen Code zum Erstellen eines einfachen Taschenrechners mit js als Referenz. Der spezifische Inhalt ist wie folgt

Um einen einfachen Rechner wie in der Abbildung zu erstellen, müssen Sie zunächst ein Formular erstellen und es wie in der Abbildung aussehen lassen.

<Tabellenrand="1" Zellenabstand="0" >
   <tr><th colspan="2">Einkaufsrechner</th></tr>
   <tr>
    <td>Die erste Zahl</td>
       <td><Eingabetyp="text" id="inputId1" /></td>
   </tr>
   <tr>
    <td>Die zweite Zahl</td>
       <td><Eingabetyp="text" id="inputId2" /></td>
   </tr>
   <tr>
    <td><button type="button" onclick="cal('+')" >+</button></td>
    <td><button Typ="button" beim Klicken="cal('-')" >-</button>
    <Schaltfläche Typ="Schaltfläche" beim Klicken="cal('*')" >*</Schaltfläche>
    <button type="button" onclick="cal('/')" >/</button></td>
   </tr>
   <tr>
    <td>Berechnungsergebnisse</td>
    <td><input Typ="Text" id="Ergebnis-ID"/></td>
   </tr>
</Tabelle>

Onclick verwendet die Methode cal(). Tatsächlich habe ich zunächst die Methoden add, sub, mul und div verwendet. Später stellte ich fest, dass diese vier Methoden bis auf die Rechenoperatoren gleich sind. Daher habe ich mich für eine Methode entschieden. Beim Klicken auf die Schaltfläche ist der an die Methode übergebene Rechenoperator anders. Der Code lautet wie folgt:

<Skripttyp="text/javascript">
 Funktion cal(Typ){
  var num1 = document.getElementById('inputId1');
  var num2 = document.getElementById('inputId2');
  var Ergebnis;
   Schalter(Typ){
    Fall '+':
    Ergebnis = parseInt(num1.value) + parseInt(num2.value);
    brechen;
    Fall '-':
    Ergebnis = parseInt(num1.value) – parseInt(num2.value);
    brechen;
    Fall '*':
    Ergebnis = parseInt(num1.value) * parseInt(num2.value);
    brechen;
    Fall '/':
    Ergebnis = parseInt(num1.value) / parseInt(num2.value);
    brechen;
  }
 var resultObj = document.getElementById('resultId');
 resultObj.value = Ergebnis;
 }
</Skript>

Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, er wird für jedermanns Studium hilfreich sein. Ich hoffe auch, dass jeder 123WORDPRESS.COM unterstützen wird.

Das könnte Sie auch interessieren:
  • Implementierung eines Web-Rechners mit nativem JavaScript
  • Detaillierte Erläuterung des Prozesses zur Realisierung der Rechnerfunktion in Javascript
  • JavaScript implementiert einfache Rechnerfunktion
  • js-Version zur Realisierung der Rechnerfunktion
  • Natives JS zur Implementierung eines einfachen Rechners
  • Implementierung eines einfachen Rechners mit Javascript
  • Einen Web-Rechner mit Javascript schreiben
  • Schreiben Sie einen einfachen Rechner mit JavaScript

<<:  Zusammenfassung der MySQL-Sperrwissenspunkte

>>:  Analyse der zum Ausführen von Docker erforderlichen Berechtigungen

Artikel empfehlen

TinyEditor ist ein einfacher und benutzerfreundlicher HTML-WYSIWYG-Editor

Vor einigen Tagen habe ich Ihnen einen inländisch...

Details zur Funktionsverschachtelung und zu Funktionsabschlüssen in js

Inhaltsverzeichnis 1. Geltungsbereich 2. Funktion...

CSS3 erzielt einen coolen 3D-Rotationsperspektiveneffekt

CSS3 erreicht coole 3D-Rotationsperspektive 3D-An...

So verwenden Sie JS zum Implementieren des Wasserfalllayouts von Webseiten

Inhaltsverzeichnis Vorwort: Was ist ein Wasserfal...

js-Objekt, um einen Daten-Paging-Effekt zu erzielen

In diesem Artikelbeispiel wird der spezifische Co...

Grafisches Tutorial zur Installation und Konfiguration von MySQL 5.7.17

Funktionen von MySQL: MySQL ist ein relationales ...

Detaillierte Erklärung des Linux-Befehls unzip

Inhaltsverzeichnis 1. Unzip-Befehl 1.1 Syntax 1.2...

Detaillierte Erläuterung zur Verwendung der WeChat-Miniprogrammkarte

In diesem Artikelbeispiel wird der spezifische Im...

So richten Sie einen URL-Link im Nginx-Server ein

Websites mit einer Architektur wie LNMP werden im...

Ausführliche Erklärung des Maximalwerts von int in MySQL

Einführung Ich werde ausführlich über das Problem...