Verwenden von JS zum Implementieren eines einfachen Rechners

Verwenden von JS zum Implementieren eines einfachen Rechners

Verwenden Sie JS, um einen einfachen Rechner für Ihre Referenz zu vervollständigen. Die spezifischen Inhalte sind wie folgt

Voraussetzungen: Der Eingabewert kann nur eine Zahl sein, verwenden Sie einen regulären Ausdruck
onchange(): Führt ein Ereignis aus, wenn sich der Wert ändert
onblur(): Führt ein Ereignis aus, wenn die Maus aus dem

<!DOCTYPE html>
<html lang="de">
<Kopf>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1.0">
    <meta http-equiv="X-UA-kompatibel" content="ie=edge">
    <title>Rechner</title>
</Kopf>
<Text>
    <div Stil="Textausrichtung: Mitte;">
        <Eingabetyp="text" id="1" onkeyup="this.value=this.value.replace(/[^\d]/g,'') " >
    <Name auswählen="Auswählen" ID="Auswählen">
        <option value="null">Bitte wählen</option>
        <optionswert="0">+</option>
        <option value="1">-</option>
        <optionswert="2">*</option>
        <optionswert="3">/</option>
    </Auswählen>
    <Eingabetyp="text" id="2" onkeyup="dieser.Wert=dieser.Wert.replace(/[^\d]/g,'') ">
    =
    <Eingabetyp="Text" id="3" onkeyup="dieser.Wert=dieser.Wert.Ersetzen(/[^\d]/g,'') "><br><br>
    </div>
    <div Stil="Textausrichtung: Mitte;">
        <input type="button" id="button"value="berechnen">
    </div>
    <Skript>
        
    Funktion accAdd(arg1,arg2){ 
        var r1,r2,m; 
        versuchen{
            r1=arg1.toString().split(".")[1].Länge
        }fangen(e){
            r1 = 0
        } 
        versuchen{
            r2=arg2.toString().split(".")[1].Länge
        }fangen(e){
            r2 = 0
        } 
        m=Math.pow(10,Math.max(r1,r2)) 
        Rückgabewert (Argument1*m+Argument2*m)/m 
        } 
        Nummer.prototyp.add = Funktion (Argument) { 
        gibt accAdd(arg,dies) zurück; 
        }


    Funktion Subtr(arg1,arg2){
        var r1, r2, m, n;
 
        versuchen{
            r1=arg1.toString().split(".")[1].Länge
        }fangen(e){
            r1 = 0
        }
 
        versuchen{
            r2=arg2.toString().split(".")[1].Länge
        }fangen(e){
            r2 = 0
        }
        m=Math.pow(10,Math.max(r1,r2));
 
     // zuletzt geändert von deeka
     // Die Genauigkeitslänge dynamisch steuern n=(r1>=r2)?r1:r2;
        Rückgabewert ((arg1*m-arg2*m)/m).toFixed(n);
    }
    Funktion accMul(arg1,arg2) //Multiplikation { 
        var m=0,s1=arg1.toString(),s2=arg2.toString(); 
        versuchen{
            m+=s1.split(".")[1].Länge
        }fang(e){} 
        versuchen{
            m+=s2.split(".")[1].Länge
        }fang(e){} 
        returniere Zahl(s1.replace(".",""))*Zahl(s2.replace(".","")) / Math.pow(10,m) 
        } 
 
    //Fügen Sie dem Number-Typ eine Mul-Methode hinzu, um den Aufruf zu vereinfachen. 
    Nummer.prototype.mul = Funktion (Argument) { 
    gibt accMul zurück (arg, dies); 
    } 

    Funktion accDiv(arg1,arg2){ 
    var t1=0,t2=0,r1,r2; 
    versuchen{
        t1=arg1.toString().split(".")[1].Länge
    }fang(e){} 
    versuchen{
        t2=arg2.toString().split(".")[1].Länge
    }fang(e){} 
     mit(Mathe){ 
        r1=Zahl(arg1.toString().replace(".","")) 
        r2=Zahl(arg2.toString().replace(".","")) 
        Rückgabewert (r1/r2)*pow(10,t2-t1); 
        } 
    } 
        Nummer.prototyp.div = Funktion (Argument) { 
        gibt accDiv(dieses, arg) zurück; 
    }


        document.getElementById('Schaltfläche').onclick=Funktion(){
            var num1 = document.getElementById('1').value;
            var num2 = document.getElementById('2').value;
            Variable Nummer3;
            var op = document.getElementById('Auswahl').Wert;
            Schalter(op){
                Fall '0':
                    Zahl3 = accAdd(Zahl1,Zahl2);
                    brechen;
                Fall '1':
                    Zahl3 = Subtr(Zahl1,Zahl2);
                    brechen;
                Fall '2':
                    Anzahl3=accMul(Anzahl1,Anzahl2);
                    brechen;
                Fall '3':
                    Zahl3=accDiv(Zahl1,Zahl2);
                    brechen;
            }
            document.getElementById('3').value=num3;
        }
       
    </Skript>

</body>
</html>

Effektbild:

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:
  • Ein einfacher Rechner, geschrieben in Javascript, mit viel Inhalt und praktischen Methoden. Empfohlen
  • Einfacher JS-Code zur Realisierung des Taschenrechnerbetriebs
  • js implementiert einen einfachen Rechner
  • HTML+JS implementiert einfachen Taschenrechnercode (Addition, Subtraktion, Multiplikation und Division)
  • Einfacher Rechner-Implementierungscode, geschrieben in JS
  • js implementiert einen einfachen Rechner
  • JavaScript - einfache Implementierungsschrittzerlegung für Rechner (mit Bildern)
  • Reiner Javascript-Code zur Implementierung von Rechnerfunktionen (drei Methoden)
  • Einfache Implementierung eines JS-Web-Rechners
  • Web-Rechner Ein JS-Rechner

<<:  Zusammenfassung der allgemeinen MySQL-SQL-Anweisungen einschließlich komplexer SQL-Abfragen

>>:  Zabbix überwacht den Prozess der Linux-Systemdienste

Artikel empfehlen

So beheben Sie den Fehler beim MySQL-Transaktionsvorgang

So beheben Sie den Fehler beim MySQL-Transaktions...

So zeigen Sie verfügbare Netzwerkschnittstellen in Linux an

Vorwort Die häufigste Aufgabe nach der Installati...

Installieren von MySQL 8.0.12 basierend auf Windows

Dieses Tutorial ist nur auf Windows-Systemen anwe...

Eine detaillierte Darstellung des Prozesses zum Erklimmen einer Grube des Docker-Bereitstellungsdienstes

Zum ersten Mal schreiben. Gestatten Sie mir, mich...

Implementierung der Elementzeitleiste

Inhaltsverzeichnis Komponenten - Zeitleiste Benut...

Installations-JDK-Tutorialanalyse für Linux-System (Centos6.5 und höher)

Artikelstruktur 1. Vorbereitung 2. Installieren S...

Detaillierte Erklärung der Linux-Befehle und der Dateisuche

1. Führen Sie eine Dateinamensuche durch which (S...

So verwenden Sie gdb zum Debuggen von Kerndateien in Linux

1.core-Datei Wenn während der Programmausführung ...

Lösung für den Fehler 1045, wenn Navicat eine Verbindung zu MySQL herstellt

Beim Herstellen einer Verbindung mit der lokalen ...

Vue + SSM realisiert den Vorschaueffekt beim Hochladen von Bildern

Die aktuelle Anforderung lautet: Es gibt eine Sch...

MySQL Slow Query-Optimierung: Die Vorteile von Limit aus Theorie und Praxis

Oftmals erwarten wir, dass das Abfrageergebnis hö...

5 Gründe, warum sich Responsive Webdesign nicht lohnt

Dieser Artikel stammt aus Tom Ewers Managewp-Blog ...

Fallstudie zum Löschen und Neuinstallieren eines Mac-Knotens

Mac-Knoten löschen und neu installieren löschen K...

Analyse und Lösung zur Leistungsoptimierung von Vue.js-Anwendungen

Inhaltsverzeichnis 1. Einleitung 2. Warum brauche...

Einführung in Netzwerktreiber für Linux-Geräte

Kabelgebundenes Netzwerk: Ethernet Drahtloses Net...