Der endgültige Effekt ist wie in Abbildung 2 dargestellt. Es gibt einen Fehler: Das Ergebnis des Klickens % nach der Ganzzahl ist korrekt. Wenn % nach Dezimalal geklickt wird, ist das Ergebnis falsch! Der Rest ist normal, bitte geben Sie mir einen Rat: Der Wert der Eingabe ist von String -Typ. Wie kann ich mit dem IF-Teil in Abbildung 1 in JS korrekt umgehen? ?
Abbildung 1
Abbildung 2
Der HTML -Code ist wie folgt
<body><div id="calculator"> <div> <span>Simple Calculator</span> <span>@walker</span> </div> <div id="shuRu"> <!--screen input bar--> <div> <input type="text" id="screenName" name="screenName"> </div> </div> <div id="keys"> <!-- j --> <!--first row--> <input type = "button" id = "7" onclick = "jsq (this.id)" value = "7"> <Eingabe type = "button" id = "8" onclick = "jsq (this.id)" value = "8"> <Eingabetyp = "Button" Id = "9" auf Butty "Butty" Id ". value = "zurück"> <input type = "button" id = "c" onclick = "clearnum ()" value = "c" style = "margin-right: 0px"> <!-zweite Zeile-> <Eingabe type = "button" id = "4" onclick = "jsq (this.id)" value = "4". <input type = "button" id = "6" onclick = "jsq (this.id)" value = "6"> <Eingabe type = "button" id = "*" onclick = "jsq (this.id)" value = "x"> <Eingabe type = "button" id = "/" onclick = "jsq (this.Id)" value ". type="button" id="1" onclick="jsq(this.id)" value="1"> <input type="button" id="2" onclick="jsq(this.id)" value="2"> <input type="button" id="3" onclick="jsq(this.id)" value="3"> <input type="button" id="+" onclick = "jsq (this.id)" value = "+"> <Eingabe type = "button" id = "-" onclick = "jsq (this.id)" value = "-" style = "margin-right: 0px"> <!-viertes Zeile-> <Eingabe-Typ "Taste" id = "0" 0 ". onclick = "jsq (this.id)" value = "00"> <Eingabe type = "button" id = ". onclick = "jsq (this.id)" value = ". <a href = "#" target = "_ leer"> Feedback </a> </span> </div> </div> </body>
Der CSS -Code lautet wie folgt:
<Styles> /*Basic Reset* /*{Margin: 0; Polsterung: 0; Kastengrößen: Border-Box; Schriftart: 14px Arial, sans-serif;} html {Höhe: 100%; Hintergrundfarbe: LightsLategrey;}#Calculator {Margin: 15px Auto; Breite: 330px; Höhe: 400px; Grenze: 1PX Solid Lightgray; Hintergrundfarbe: Darkgrey; Padding: 15px;}/*Logo*/. Logo {Höhe: 20px;}. Logo .Name {float: links; Zeilenhöhe: 30px;}. Logo .verson {float: rechts; Zeilenhöhe: 30px;}/*Bildschirm*/#Shuru {Margin-Top: 15px;}. Bildschirm {Margin-Top: 5px; Breite: 300px; Höhe: 40px; Text-Align: Recht; Padding-Right: 10px; Schriftgröße: 20px;}#Tasten {Border: 1px Solid LightGray; Höhe: 223px; Randtop: 25px; Padding: 8px;}#Schlüssel. Last {Margin-Light: 0px;}. Fußzone {Margin-Top: 20px; Höhe: 20px;}. footer .link {float: rechts;}#Keys .buttons {float: links; Breite: 42px; Höhe: 36px; Text-Align: Mitte; Hintergrundfarbe: Lightgray; Rand: 0 17px 20px 0;} </style>Der JavaScript -Code lautet wie folgt:
<Script> var num = 0; // Definieren Sie die Daten der ersten Eingabefunktion JSQ (num) {// Die aktuelle Eingabe abrufen if (num == "%") {document.getElementById ('screenName'). Value = math.round (document.getElementById ('screenname'). Value)/100; } else {document.getElementById ('screenName'). value += document.getElementById (num) .Value; }} Funktion eva () {// Berechnen Sie das Eingabeergebnis -Dokument. } function clearnum () {// 0 clear 0 document.getElementById ("screenName"). value = null; document.getElementById ("screenname"). Focus (); } function tuige () {// Backspace var arr = document.getElementById ("screenName"); arr.Value = arr.Value.substring (0, arr.Value.Length - 1); } </script>Der obige Artikel JavaScript implementiert einen einfachen Taschenrechner -Effekt [empfohlen] ist der gesamte Inhalt, den ich mit Ihnen teile. Ich hoffe, Sie können Ihnen eine Referenz geben und ich hoffe, Sie können wulin.com mehr unterstützen.