Natives JS zur Implementierung eines einfachen Rechners
|
In diesem Artikelbeispiel wird der spezifische Code von js zur Implementierung eines einfachen Rechners zu Ihrer Information geteilt. Der spezifische Inhalt ist wie folgt Vor kurzem war der Blogger gelangweilt und hat mit JS einen einfachen Rechner geschrieben (der Blogger arbeitet am Backend, nicht am Frontend >_<). Tatsächlich macht mir die Arbeit am Frontend großen Spaß. Es ist sehr erfüllend, selbst etwas zu erschaffen. Und nun, ohne weitere Umschweife, hier der Quellcode.
<!DOCTYPE html>
<html>
<Kopf>
<meta charset="utf-8">
<title>Rechner</title>
<Stil>
#b1{
Textausrichtung: zentriert;
Hintergrundfarbe: hellblau;
Breite: 650px;
Höhe: 650px;
Rand: 1px tief schwarz;
Rand links: 400px;
Rahmenradius: 18px;
}
#b2{
Textausrichtung: zentriert;
Breite: 300px;
Höhe: 80px;
Rand oben: 30px;
Schriftfamilie: „Microsoft YaHei“;
Schriftgröße: 20px;
Rahmenradius: 8px;
Umriss: keiner;
}
ul{
Listenstiltyp: keiner;
}
li{
schweben: links;
Rand links: 40px;
Rand oben: 30px;
}
li-Eingabe{
Breite: 100px;
Höhe: 50px;
Rahmenradius: 8px;
Schriftfamilie: „Microsoft YaHei“;
Schriftgröße: 20px;
Umriss: keiner;
}
li Eingabe:Hover{
Hintergrundfarbe: rot;
}
</Stil>
<Skript>
var vorNum=0;
Funktion addNum(a){
beforeNum=document.getElementById("b2").value;
var jetztNummer=vorNummer;
wenn(vorAnzahl!=0){
jetztNummer=vorNummer+a;
}anders{
wenn(beforeNum.substring(beforeNum.length-2,beforeNum.length-1)=="."){
jetztNummer=vorNummer+a;
}
wenn(a!="+"&&a!="-"&&a!="*"&&a!="/"&&(beforeNum.substring(beforeNum.length-2,beforeNum.length-1)!=".")){
jetztNum=a;
}
}
document.getElementById("b2").value=nowNum;
}
Funktion jisuan(){
document.getElementById("b2").value=eval(document.getElementById("b2").value);
}
Funktion ClearNum(){
document.getElementById("b2").Wert=0;
}
Funktion backAgain(){
beforeNum=document.getElementById("b2").value;
wenn(vorAnzahl.Länge!=1){
document.getElementById("b2").value=beforeNum.substring(0,beforeNum.length-1);
}sonst wenn(vorAnzahl.Länge==1){
document.getElementById("b2").Wert=0;
}
}
Funktion addPoint(b){
beforeNum=document.getElementById("b2").value;
wenn((vorAnzahl.indexVon(".")!=vorAnzahl.länge-1)){
document.getElementById("b2").value=beforeNum+b;
}
}
Funktion offCl(){
document.getElementById("b2").value="";
}
</Skript>
</Kopf>
<Text>
<div id="b1">
<p style="font-size: 20px;">Einfacher Online-Rechner</p>
<div><input id="b2" name="wenben" value="0"/></div>
<div>
<ul>
<li><input Typ="Schaltfläche" Wert="1" beim Klicken="addNum(dieser.Wert);"/></li>
<li><input Typ="Schaltfläche" Wert="2" beim Klicken="addNum(dieser.Wert);"/></li>
<li><input Typ="Schaltfläche" Wert="3" beim Klicken="addNum(dieser.Wert);"/></li>
<li><input Typ="Schaltfläche" Wert="4" beim Klicken="addNum(dieser.Wert);"/></li>
</ul>
<ul>
<li><input Typ="Schaltfläche" Wert="5" beim Klicken="addNum(dieser.Wert);"/></li>
<li><input Typ="Schaltfläche" Wert="6" beim Klicken="addNum(dieser.Wert);"/></li>
<li><input Typ="Schaltfläche" Wert="7" beim Klicken="addNum(dieser.Wert);"/></li>
<li><input Typ="Schaltfläche" Wert="8" beim Klicken="addNum(dieser.Wert);"/></li>
</ul>
<ul>
<li><input Typ="Schaltfläche" Wert="9" beim Klicken="addNum(dieser.Wert);"/></li>
<li><input Typ="Schaltfläche" Wert="0" beim Klicken="addNum(dieser.Wert);"/></li>
<li><input Typ="Schaltfläche" Wert="+" beim Klicken="addNum(this.value);"/></li>
<li><input Typ="Schaltfläche" Wert="-" beim Klicken="addNum(this.value);"/></li>
</ul>
<ul>
<li><input Typ="Schaltfläche" Wert="*" beim Klicken="addNum(dieser.Wert);"/></li>
<li><input Typ="Schaltfläche" Wert="/" beim Klicken="addNum(dieser.Wert);"/></li>
<li><input Typ="Schaltfläche" Wert="." bei Klick="addPoint(this.value);"/></li>
<li><input Typ="Schaltfläche" Wert="=" beimKlick="jisuan();"/></li>
</ul>
</ul>
<ul>
<li><input type="button" value="Zurück" onclick="backAgain();"/></li>
<li><input type="button" value="Löschen" onclick="clearNum();"/></li>
<li><input type="button" value="Herunterfahren" onclick="offCl();"/></li>
</ul>
</div>
</div>
</body>
</html>Das Effektdiagramm der Codeausführung.
Darüber hinaus hat der Blogger beim Schreiben von JS-Funktionen eine Reihe von Algorithmusbeurteilungen durchgeführt und einige nicht standardmäßige Algorithmen herausgefiltert. Wenn Sie interessiert sind, können Sie diese Algorithmusüberprüfungen erweitern. Wenn Sie Ideen oder Vorschläge haben, können Sie mit dem Blogger kommunizieren. 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:
|
>>: Lösung zum Vergessen des Root-Passworts der MySQL 5.7- und 8.0-Datenbank
Artikel empfehlen
Detaillierte Schritte zum Konfigurieren des Tomcat-Servers in IDEA 2020
Die Schritte zum Konfigurieren von Tomcat in IDEA...
Detaillierte Erläuterung von MySQL-Abfragebeispielen für mehrere Tabellen [Linkabfrage, Unterabfrage usw.]
Dieser Artikel beschreibt MySQL-Mehrtabellenabfra...
Detaillierte Erläuterung des Docker-Arbeitsmodus und -Prinzips
Wie in der folgenden Abbildung dargestellt: Wenn ...
Beispiel für die Verwendung von Docker zum Erstellen eines ELK-Protokollsystems
Die folgenden Installationen verwenden alle das V...
Tipps zum Mischen von OR und AND in SQL-Anweisungen
Heute gibt es eine solche Anforderung. Wenn die a...
Detaillierte Erklärung des Rewrite-Moduls von Nginx
Das Umschreibmodul ist das Modul ngx_http_rewrite...
Ein kleines Problem mit Nullwerten in MySQL
Heute habe ich beim Testen des Nullwertes ein kle...
Detailliertes Tutorial zur Verwendung von VMware WorkStation mit Docker für Windows
Inhaltsverzeichnis 1. Einleitung 2. Installieren ...
Prinzip der Docker-Containerüberwachung und Anweisungen zur Installation und Verwendung von cAdvisor
Es ist sehr wichtig, den Betriebsstatus von Conta...
PageSpeed Optimierung im Überblick
Ich glaube, dass das Internet zu einem immer unve...
11 Gründe, warum Bootstrap so beliebt ist
Vorwort Bootstrap, das beliebteste Front-End-Entw...
Oberflächliches Webdesign
<br />Ich war schon immer der Meinung, dass ...
Grundlegendes zu MySQL-Clusterindizes und wie Clusterindizes wachsen
In dieser Anmerkung beschreiben wir kurz Was ist ...
Der Effekt des Heranzoomens in einem Taobao-Shop ähnelt dem Prinzip einer Diashow.
Heute habe ich den Mauszoom-Effekt auf der Vorders...
【Webdesign】Teilen Sie E-WebTemplates exquisite Vorlagen für ausländische Webseiten (FLASH + PSD-Quelldatei + HTML).
Es handelt sich dabei ausschließlich um Webseiten...