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 Erläuterung des SSR-Server-Side-Rendering-Beispiels von Vue
Warum Server-Side Rendering (SSR) verwenden? Bess...
Lösung für das Problem, dass der Bridge-Modus der virtuellen Maschine von VMware15 nicht auf das Internet zugreifen kann
Beschreibung Lösung Der Bridge-Modus der virtuell...
Detaillierte Erklärung zum MySQL-Dateispeicher
Was ist ein Dateisystem Wir wissen, dass Speicher...
Eine schnelle Lösung für das Problem der PC- und Mobilanpassung
Beim Erstellen einer Webseite müssen wir normaler...
GZIP-Komprimierung Tomcat und Prozessdiagramm zur Verbesserung der Web-Leistung
1. Einleitung Ich habe vor Kurzem an einem Projek...
Problemaufzeichnung bei der Verwendung des Vue+Echarts-Diagramms
Vorwort echarts ist mein am häufigsten verwendete...
Eine einfache Möglichkeit, das Passwort in MySQL 5.7 zu ändern
Dies ist ein offizieller Screenshot. Nach der Ins...
Die Beziehung zwischen JS-Konstruktor und Instanziierung sowie Prototypeinführung
Inhaltsverzeichnis 1. Konstruktor und Instanziier...
HTML-Versionsdeklaration DOCTYPE-Tag
Wenn wir den Quellcode einer normalen Website öff...
HTML-Tags: Sub-Tag und Sup-Tag
Heute stelle ich zwei HTML-Tags vor, die ich nich...
Installieren und verwenden Sie Git und GitHub unter Ubuntu Linux
Einführung in Git Git ist eine Open-Source-Versio...
So implementieren Sie einen Kennwortstärke-Detektor in React
Inhaltsverzeichnis Vorwort verwenden Komponentens...
Nutzungs- und Best-Practice-Handbuch für die Überwachung in Vue3
Inhaltsverzeichnis Vorwort 1. API-Einführung 2. Ü...
js implementiert einen einfachen Rechner
Verwenden Sie natives JS, um einen einfachen Rech...
So passen Sie einen EventEmitter in node.js an
Inhaltsverzeichnis Vorwort 1. Was ist 2. So verwe...