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
Ein kurzes Verständnis der relevanten Sperren in MySQL
Dieser Artikel soll Ihnen vor allem dabei helfen,...
JS verwendet Clip-Pfad, um eine dynamische Bereichs-Clipping-Funktion zu implementieren
Hintergrund Heute habe ich CodePen durchsucht und...
Eine detaillierte Einführung in den wget-Befehl in Linux
Inhaltsverzeichnis Installieren Sie zuerst wget H...
Beispiele für den Import und Export von MySQL-Tabellendaten
Dieser Artikel beschreibt die Import- und Exportv...
Detaillierte Erläuterung der Selbstimplementierung von Dispatch und Broadcast (Dispatch und Broadcast) durch Vue
Zu lösendes Problem Hauptsächlich für die ebenenü...
Details zur JS-Array-Deduplizierung
Inhaltsverzeichnis 1 Testfälle 2 JS-Array-Dedupli...
Lösung für den ineffektiven globalen Stil der benutzerdefinierten Miniprogrammkomponente
Inhaltsverzeichnis Zu lang zum Lesen Isolierung d...
40 Webseiten-Designs mit supergroßen Schriftarten
Heutige Webdesigns neigen dazu, sehr große Schrif...
Centos7.3 So installieren und implementieren Sie Nginx und konfigurieren https
Installationsumgebung 1. gcc-Installation Um ngin...
Über die Konvertierung von Textbereichstext in HTML, d. h. Wagenrücklauf und Zeilenumbruch
Beschreibung: Ändern Sie den Wagenrücklauf im Text...
Reflexion und Proxy in Front-End-JavaScript
Inhaltsverzeichnis 1. Was ist Reflexion? 2. Refle...
Zwei Möglichkeiten, den Zeichensatz der HTML-Seite anzugeben
1. Zwei Möglichkeiten, den Zeichensatz der HTML-S...
XHTML-Tutorial für den Einstieg: Häufig verwendete XHTML-Tags
<br />Genau wie ein Artikel sollten unsere W...
Detaillierte Erklärung zum Erstellen gespeicherter Prozeduren und Funktionen in MySQL
Inhaltsverzeichnis 1. Gespeicherte Prozedur 1.1. ...
SQL-Implementierung von LeetCode (184. Das höchste Gehalt der Abteilung)
[LeetCode] 184. Abteilung Höchstes Gehalt Die Mit...