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
Detaillierte Erklärung der Kommunikation zwischen hierarchisch verschachtelten Komponenten in der Vue-Frontend-Entwicklung
Inhaltsverzeichnis Vorwort Beispiel Zusammenfassu...
Detaillierte Schritte zur Verwendung von Jib für die Docker-Bereitstellung in Spring Cloud
Einführung in Jib Jib ist eine von Google entwick...
Übersicht über MySQL-Statistiken
MySQL führt SQL durch den Prozess der SQL-Analyse...
JavaScript implementiert die asynchrone Übermittlung von Formulardaten
In diesem Artikelbeispiel wird der spezifische Ja...
Implementierungsmethode für den Apache AB-Stresstest zur gleichzeitigen Belastung
ab-Befehlsprinzip Der Befehl ab von Apache simuli...
Tutorial zur Installation von Elasticsearch 7.6.2 in Docker
Docker installieren Sie müssen Docker installiere...
So verwenden Sie eine Bildschaltfläche als Schaltfläche zum Zurücksetzen des Formulars
Wenn wir ein Formular erstellen, legen wir häufig ...
Docker-Einstellung für den Windows-Speicherpfadvorgang
Wenn Sie Docker unter Windows 10 installieren und...
Zusammenfassung zur Anwendung dekorativer Elemente im Webdesign
<br />Vorwort: Bevor Sie dieses Tutorial les...
JavaScript verwendet Promise zur Verarbeitung mehrerer wiederholter Anfragen
1. Warum diesen Artikel schreiben? Sie haben sich...
Überwachung sowie Betrieb und Wartung von Linux-Diensten
Inhaltsverzeichnis 1. Installieren Sie das psutil...
So verwenden Sie .htaccess, um einer bestimmten IP den Zugriff auf die Website zu verbieten
Vorwort Aus Kostengründen kaufen die meisten Webm...
Detaillierte Erläuterung der Multiversion-Parallelitätskontrolle großer Objekte in MySQL
MySQL 8.0: MVCC für große Objekte in InnoDB In di...
Ausführliche Erläuterung der Konzepte und Verwendung von MySQL-Transaktionen
Inhaltsverzeichnis Der Begriff der Affären Der St...
Beispiel für eine Vue-Datenanzeige auf einem großen Bildschirm
Um die Anforderungen effizient zu erfüllen und au...