Implementierung eines Web-Rechners mit nativem JavaScript
|
In diesem Artikel wird der spezifische JavaScript-Code zur Implementierung der Webversion des Rechners zu Ihrer Information bereitgestellt. Der spezifische Inhalt ist wie folgt Weil ich aus Langeweile die Systemsoftware auf meinem Computer durchgesehen habe, bin ich auf die Rechnerfunktion gestoßen. Deshalb werde ich einfach über die Funktionen dieses Rechners schreiben. Diese Webversion des Rechners verfügt über alle Grundfunktionen, ist jedoch nicht sehr vollständig und dient daher nur als Referenz.
Erstens: Wenn Sie den Stil des Web-Rechners nicht von Hand schreiben möchten, können Sie ihn einfach kopieren.
<!DOCTYPE html>
<html lang="de">
<Kopf>
<meta charset="UTF-8">
<meta http-equiv="X-UA-kompatibel" content="IE=edge">
<meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1.0">
<title>Dokument</title>
<Stil>
* {
Rand: 0;
Polsterung: 0;
Box-Größe: Rahmenbox;
}
.cal {
Breite: 420px;
Rand: 100px automatisch;
Hintergrundfarbe: #E6E6E6;
Polsterung: 2px;
Überlauf: versteckt;
}
.zeigen {
Position: relativ;
Breite: 416px;
Höhe: 120px;
Schriftgröße: 50px;
Zeilenhöhe: 50px;
Schriftstärke: 700;
}
.Schaltfläche anzeigen {
Anzeige: keine;
Position: absolut;
oben: -2px;
rechts: -2px;
Breite: 60px;
Höhe: 40px;
Zeilenhöhe: 40px;
Textausrichtung: zentriert;
Rand: transparent;
Hintergrundfarbe: #E6E6E6;
Schriftgröße: 30px;
Schriftstärke: 100;
Cursor: Zeiger;
}
.show button:hover {
Hintergrundfarbe: #e81123;
Farbe: #f0f0f0
}
.res,
.links,
.Rechts {
Position: absolut;
unten: 0;
Höhe: 60px;
Zeilenhöhe: 60px;
Polsterung: 0 3px;
}
.res {
rechts: 0;
/* Breite: 100 %; */
Textausrichtung: rechts;
}
.links {
Anzeige: keine;
Hintergrundfarbe: #E6E6E6;
}
.Rechts {
Anzeige: keine;
rechts: 0;
Hintergrundfarbe: #E6E6E6;
}
.links:schweben,
.rechts:schweben {
Farbe: #2e8eda;
}
.Tastatur {
Anzeige: Flex;
Flex-Wrap: Umwickeln;
Inhalt ausrichten: zentriert;
}
.btn {
Anzeige: Flex;
Inhalt ausrichten: zentriert;
Breite: 100px;
Höhe: 60px;
Zeilenhöhe: 60px;
Rand: 2px;
Hintergrundfarbe: #f0f0f0;
Rand: transparent;
Schriftgröße: groß;
}
.btn:hover {
Hintergrundfarbe: #d6d6d6;
}
.digital {
Hintergrundfarbe: #fafafa;
Schriftstärke: 700;
}
.gleich {
Hintergrundfarbe: #8abae0;
}
.gleich:hover {
Hintergrundfarbe: #4599db;
}
</Stil>
</Kopf>
<Text>
<div Klasse="cal">
<div Klasse="anzeigen">
<button class="schließen">×</button>
<div Klasse="res">0</div>
<div Klasse="links"><</div>
<div Klasse="rechts">></div>
</div>
<div Klasse="Tastatur">
<!-- 0 -->
<button class="btn Prozent">%</button>
<!-- 1 -->
<button class="btn clearOne">CE</button>
<!-- 2 -->
<button class="btn clearAll">C</button>
<!-- 3 -->
<button class="btn zurück">entf</button>
<!-- 4 -->
<button class="btn div1">1/x</button>
<!-- 5 -->
<button class="btn square">x²</button>
<!-- 6 -->
<button class="btn sqrt">²√x</button>
<!-- 7 -->
<button class="btn div">÷</button>
<!-- 8 -->
<button class="btn digital">7</button>
<!-- 9 -->
<button class="btn digital">8</button>
<!-- 10 -->
<button class="btn digital">9</button>
<!-- 11 -->
<button class="btn mul">x</button>
<!-- 12 -->
<button class="btn digital">4</button>
<!-- 13 -->
<button class="btn digital">5</button>
<!-- 14 -->
<button class="btn digital">6</button>
<!-- 15 -->
<button class="btn sub">-</button>
<!-- 16 -->
<button class="btn digital">1</button>
<!-- 17 -->
<button class="btn digital">2</button>
<!-- 18 -->
<button class="btn digital">3</button>
<!-- 19 -->
<button class="btn hinzufügen">+</button>
<!-- 20 -->
<button class="btn neg">+/-</button>
<!-- 21 -->
<button class="btn digital">0</button>
<!-- 22 -->
<button class="btn digital">.</button>
<!-- 23 -->
<button class="btn gleich">=</button>
</div>
</div>
<script src="./computer.js"></script>
</body>
</html>js-Teil:
const bt = document.querySelectorAll('.Tastaturtaste')
const schließen = document.querySelector('.schließen')
const res = document.querySelector('.res')
//Wenn die Zahl angeklickt wird, sei k = 0
lass einen
lass zwei
Funktion arr(num) {
bt[num].onclick = Funktion () {
res.innerText += bt[num].innerText
res.innerText = parseFloat(res.innerText)
// konsole.log(eins)
}
}
//Dezimalpunkt //Das Ergebnis als Dezimalpunkt speichern function fn() {
wenn (res.innerText.length > 8) {
res.innerText = res.innerText.slice(0, 10)
}
wenn (res.innerText == 'NaN') {
res.innerText = 0
}
}
//Wenn der Operator angeklickt wird, function symbol(str, fu) {
bt[str].onclick = Funktion () {
k++
wenn (k > 1) {
zurückkehren
}
eins = parseFloat(res.innerText)
// Schalter (fu) {
// Fall '+':
// eins += eins
// brechen;
// Fall '-':
// eins -= eins
// brechen;
// Fall '*':
// eins *= eins
// brechen;
// Fall '/':
// eins /= eins
// brechen;
// }
res.innerText = ''
schließen.style.display = "Block"
schließen.innerText = bt[str].innerText
console.log(eins)
}
}
Ankunft(21)
arr(18)
arr(17)
arr(16)
arr(14)
arr(13)
arr(12)
arr(10)
arr(9)
arr(8)
arr(22)
//Operationssymbol symbol(0)
Symbol(7, '/')
Symbol (11, '*')
Symbol(15, '-')
Symbol (19, '+')
Konsole.log(bt[22].innerText)
bt[22].onclick = Funktion () {
res.innerText += bt[22].innerText
konsole.log(565)
}
bt[23].onclick = Funktion () {
zwei = parseFloat(res.innerText)
Schalter (schließen.innerText) {
Fall '%':
// toFixed(11) behält 11 Dezimalstellen bei res.innerText = eins % zwei
k = 0
brechen;
Fall '+':
res.innerText = eins + zwei
k = 0
brechen;
Fall '-':
res.innerText = eins - zwei
k = 0
brechen;
Fall 'x':
res.innerText = eins * zwei
k = 0
brechen;
Fall '÷':
res.innerText = eins / zwei
k = 0
brechen;
}
// konsole.log(res.innerText.length)
fn()
}
bt[1].onclick = Funktion () {
res.innerText = ''
}
bt[2].onclick = Funktion () {
res.innerText = "0"
close.innerText = "x"
schließen.style.display = ''
eins = 0
zwei = 0
}
bt[3].onclick = Funktion () {
res.innerText = res.innerText.slice(0, res.innerText.length - 1)
wenn (res.innerText.length === 0) {
res.innerText = "0"
zurückkehren
}
}
bt[4].onclick = Funktion () {
res.innerText = 1 / parseFloat(res.innerText)
fn()
}
bt[5].onclick = Funktion () {
res.innerText = parseFloat(res.innerText) * parseFloat(res.innerText)
fn()
}
bt[6].onclick = Funktion () {
res.innerText = Math.sqrt(parseFloat(res.innerText))
fn()
}
bt[20].onclick = Funktion () {
res.innerText = 0 – parseFloat(res.innerText)
fn()
}Der obige Code erstellt einen einfachen Computer. Ich hoffe, er wird für jedermanns Studium hilfreich sein. Ich hoffe auch, dass jeder 123WORDPRESS.COM unterstützt. Das könnte Sie auch interessieren:
|
>>: Detaillierte Analyse des MySQL 8.0-Speicherverbrauchs
Artikel empfehlen
Docker-Bereitstellungs- und Installationsschritte für Jenkins
Zuerst benötigen wir einen Server mit installiert...
So entfernen Sie in Linux ganz einfach installierte Quellpakete
Schritt 1: Stow installieren In diesem Beispiel v...
CentOS 7: Beispielcode zum Festlegen des Grub-Passworts und zur Einzelbenutzeranmeldung
Es gibt erhebliche Unterschiede zwischen CentOS7 ...
Eine vollständige Liste häufig gestellter JavaScript-Fragen für Front-End-Interviews
Inhaltsverzeichnis 1. Handschriftliche Instanz vo...
Detaillierte Erläuterung der Implementierung einer regelmäßigen Sicherung von MySQL-Datenbanktabellen
Durchführung regelmäßiger Backups von Mysql-Daten...
Einige Dinge, die Sie über den Varchar-Typ in MySQL wissen sollten
Speicherregeln für varchar In Versionen unter 4.0...
Reines CSS zum Erzielen eines schmelzenden Kerzenmusters (Wassertropfen) – Beispielcode
Ergebnisse erzielen Umsetzungsideen Der Schmelzef...
MySQL InnoDB-Quellcodeanalyse für Transaktionssperren
Inhaltsverzeichnis 1. Schloss und Riegel 2. Wiede...
So fügen Sie einen Docker-Port hinzu und erhalten eine Docker-Datei
Holen Sie sich das Dockerfile aus dem Docker-Imag...
Gängige Reparaturmethoden für die Trennung der MySQL Master-Slave-Replikation
Inhaltsverzeichnis 01 Problembeschreibung 02 Lösu...
Bootstrap 3.0 Studiennotizen CSS-bezogene Ergänzung
Die wesentlichen Inhalte dieses Artikels sind wie...
Verwenden Sie CSS, um die Breite von INPUT in TD festzulegen
Als ich kürzlich mit C# ein Webprogramm erstellte,...
Detaillierte Erläuterung der Docker Swarm-Dienstorchestrierungsbefehle
1. Einleitung Docker verfügt über ein Orchestrier...
Reines CSS und Flutter realisieren jeweils einen atmenden Lichteffekt (Beispielcode)
Beim letzten Mal fragte ein sehr fleißiger Fan, o...
Tiefgreifendes Verständnis der CSS @font-face-Leistungsoptimierung
In diesem Artikel werden hauptsächlich allgemeine...