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 Erklärung der Bind-Mounts für die Docker-Datenspeicherung
Bevor Sie diesen Artikel lesen, hoffe ich, dass S...
Docker+Gitlab+Jenkins erstellt automatisierte Bereitstellung von Grund auf
Inhaltsverzeichnis Vorwort: 1. Docker installiere...
Nginx Reverse Proxy Springboot JAR-Paket-Prozessanalyse
Die übliche Methode zum Bereitstellen eines Sprin...
Detaillierte Erklärung der langsamen Remote-Verbindung von Navicat zu MySQL
Die endgültige Lösung ist im letzten Bild Wenn Si...
So starten Sie die RabbitMq-Software automatisch, wenn CentOS gestartet wird
1. Erstellen Sie ein neues Rabbitmq im Verzeichni...
MySQL implementiert das automatische Hinzufügen von Zeit und das automatische Aktualisieren von Zeit
Zeitfelder werden häufig bei der Datenbanknutzung...
Die Rolle und Öffnung des MySQL-Protokolls für langsame Abfragen
Vorwort Das MySQL Slow Query Log ist ein Protokol...
Welcher Befehl eignet sich besser für die unscharfe Suche nach Dateien in Linux?
1. Einleitung In diesem Artikel wird hauptsächlic...
Bei MySQL-Zeichentypen wird die Groß-/Kleinschreibung beachtet.
Standardmäßig sind MySQL-Zeichentypen nicht case-...
Lösen Sie das Problem beim Zurücksetzen des Kennworts für das Mysql-Root-Benutzerkonto
Problembeschreibung: Beim Ausführen eines Befehls...
Detaillierte Erklärung des Plattformbusses des Linux-Treibers
Inhaltsverzeichnis 1. Einführung in den Plattform...
Zusammenfassung der Lösung für den Webpack -v-Fehler von Vue
Xiaobai lernte Vue kennen, dann lernte er Webpack...
Detaillierte Schritte zum Verpacken und Hochladen von Spring Boot in ein Docker-Repository
Wichtiger Hinweis: Bevor Sie diesen Artikel lesen...
Dieser Artikel zeigt Ihnen, wie Sie CSS wie JS-Module importieren
Inhaltsverzeichnis Vorwort Was sind erstellbare S...
JS beherrscht schnell die Verwendung von ES6-Klassen
1. Wie konstruieren? Lassen Sie uns die allgemein...