Einen Web-Rechner mit Javascript schreiben

Dieser Artikel beschreibt hauptsächlich die Auswirkungen der Verwendung von JavaScript zur Realisierung eines Web-Rechners zu Ihrer Information. Der spezifische Inhalt ist wie folgt

Ohne weitere Umschweife lautet der Code wie folgt:

Zuerst der HTML-Code:

<!DOCTYPE html>
<html lang="de">
<Kopf>
    <meta charset="UTF-8">
    <title>Verwenden von JS zur Implementierung eines Web-Rechners</title>
    <link rel="stylesheet" href="cal.css" >
</Kopf>
<Text>
<div id="Container" Klasse="Container">
    <input id="Ergebnis" class="Ergebnis">
    <div id="cal" Klasse="clearfix">
        <div id="num" Klasse="fl">
            <div id="oben" Klasse="clearfix">
                <input id="löschen" type="button" value="C">
                <input id="Antonyme" type="button" value="+/-">
                <input id="Rest" Typ="Schaltfläche" Wert="%">
            </div>
            <div id="bonttom" Klasse="clearfix">
                <Eingabetyp="Schaltfläche" Wert="7">
                <Eingabetyp="Schaltfläche" Wert="8">
                <Eingabetyp="Schaltfläche" Wert="9">
                <Eingabetyp="Schaltfläche" Wert="4">
                <Eingabetyp="Schaltfläche" Wert="5">
                <Eingabetyp="Schaltfläche" Wert="6">
                <Eingabetyp="Schaltfläche" Wert="1">
                <Eingabetyp="Schaltfläche" Wert="2">
                <Eingabetyp="Schaltfläche" Wert="3">
                <Eingabe Klasse="Null" Typ="Schaltfläche" Wert="0">
                <Eingabetyp="Schaltfläche" Wert=".">
            </div>
        </div>
        <div id="mathe" class="fr math">
            <Eingabetyp="Schaltfläche" Wert="/" bei Klick="onclicknum('/')">
            <Eingabetyp="Schaltfläche" Wert="＊" bei Klick="bei Klicknum('*')">
            <Eingabetyp="Schaltfläche" Wert="＋" bei Klick="bei Klicknum('+')">
            <Eingabetyp="Schaltfläche" Wert="-" onclick="onclicknum('-')">
        </div>
        <Eingabe-ID="res" Typ="Schaltfläche" Wert="＝">
    </div>
</div>
</body>
</html>

Als nächstes folgt der CSS-Style-Code:

* {
    Rand: 0px;
    Polsterung: 0px;
}

.clearfix:vorher, .clearfix:nachher {
    Inhalt: '';
    Anzeige: Block;
}

.clearfix:nach {
    klar: beides;
}

.klarfix {
    _zoom: 1;
}

Eingabe {
    Anzeige: Block;
}

.container {
    Breite: 240px;
    Höhe: 400px;
    Rand: 2px durchgezogen #eb4509;
    Rand: 100px automatisch;
}

.fl {
    schweben: links;
}

.fr {
    schweben: rechts;
}

Eingabe {
    Breite: 60px;
    Höhe: 60px;
    Rand: 1px durchgezogen #000;
    schweben: links;
    Hintergrund: #ddd;
    Schriftgröße: 24px;
    Farbe: #eb4509;
    -webkit-box-sizing: Rahmenbox;
    -moz-box-sizing: Rahmenbox;
    Box-Größe: Rahmenbox;
}

.math Eingabe {
    Schwimmer: keiner;
}

Eingabe.Null {
    Breite: 120px;
}

#Nummer {
    Breite: 180px;
}

#cal #mathe {
    Breite: 60px;
}

.Ergebnis {
    Breite: 100 %;
    Höhe: 100px;
    Zeilenhöhe: 100px;
    Rand: keiner;
    Hintergrundfarbe: #dfdfdf;
    Schriftgröße: 30px;
    Schwimmer: keiner;
    Gliederung: keine;
    Textausrichtung: rechts;
    Polsterung rechts: 20px;
    -webkit-box-sizing: Rahmenbox;
    -moz-box-sizing: Rahmenbox;
    Box-Größe: Rahmenbox;
}

Zum Schluss der js-Code:

<Skripttyp="text/javascript">
    var Nummernergebnis;
    var str;

    var-Flagge;
    var bot = document.getElementById("bonttom");
    var botInputs = bot.getElementsByTagName("Eingabe");
    var löschen = document.getElementById("löschen");
    var res = document.getElementById("res");
    var math = document.getElementById("math");
    var mathInputs = math.getElementsByTagName("Eingabe");
    var AntonymeBtn = document.getElementById("Antonyme");
    var remainderBtn = document.getElementById("rest");


    //Klicken Sie auf Zahlen und addieren, subtrahieren, multiplizieren und dividieren Sie imporIn(botInputs);
// importieren(mathInputs);

    Funktion imporIn(eles) {
        für (var i = 0; i < eles.length; i++) {
            eles[i].onclick = Funktion () {
                onclicknum(dieser.Wert);
            }
        }
    }

    //Klicken, um die Schaltfläche „c“ zu löschen clear.onclick = function () {
        beim Klicken löschen();
    }

    //Klicken Sie auf das =-Zeichen, um das Ergebnis zu erhalten res.onclick = function () {
        bei Klickergebnis();
    }

    //Klicken Sie auf +/-
    AntonymeBtn.onclick = function () {
        Antonyme();
    }

    //Klick %
    remainderBtn.onclick = Funktion () {
        Rest();
    }

    Funktion onclicknum(nums) {
        wenn (Flagge) {
            Konsole.log("num=" + nums);
            wenn (nums !== "/" && nums !== "+" && nums !== "-" && nums !== "*") {
                str.Wert = "";

                Konsole.log("aa" + Nums);
            }
        }
        Flagge = falsch;
        str = document.getElementById("Ergebnis");
        str.value = str.value + nums;
    }

    //Löschfunktion onclickclear() {
        str = document.getElementById("Ergebnis");
        str.Wert = "";
    }

    //Ergebnis abrufen Funktion onclickresult() {
        str = document.getElementById("Ergebnis");
        numresult = eval(str.value);
        str.value = numresult;
        Flagge = wahr;
    }

    //Positive und negative Zahlen Funktion Antonyme() {
        str = document.getElementById("Ergebnis");
        str.Wert = -str.Wert;
    }

    //%
    Funktion Rest() {
        str = document.getElementById("Ergebnis");
        str.Wert = str.Wert / 100;
    }
</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 einfachen Altersrechners auf Basis von HTML+JS
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
JavaScript-Beispiel – Implementieren eines Taschenrechners

<<: So lösen Sie das Problem, dass bei der Installation von VMware-Tools unter VMware die Installationsdatei nicht angezeigt wird

>>: Zusammenfassung der Wissenspunkte zu MySQL-Index, Sperre und Transaktion