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
Beispielmethode zum Anzeigen von IP in Linux
Die Kenntnis der IP-Adresse eines Geräts ist wich...
SMS-Bestätigungscode-Anmeldefunktion basierend auf Antd Pro (Prozessanalyse)
Inhaltsverzeichnis Zusammenfassung Gesamtprozess ...
Detaillierte Einführung in das MySQL-Installationstutorial unter Windows
Inhaltsverzeichnis 1. Einige Konzepte, die Sie vo...
Detaillierte Erläuterung der Sicherung und Wiederherstellung von PSSQL-Datenbanken in Docker
1. Postgres-Datenbanksicherung in Docker Befehl: ...
Automatisiertes Frontend-Deployment basierend auf Docker, Nginx und Jenkins
Inhaltsverzeichnis Vorbereitende Vorbereitung Ber...
Detailliertes Tutorial zur Installation von MySQL 5.7.26 auf CentOS7.4
In CentOS ist standardmäßig MariaDB installiert, ...
Detaillierte Analyse der Replikation in MySQL
1.MySQL-Replikationskonzept Dies bedeutet, dass d...
HTML-Sonderzeichen-Konvertierungstabelle
Charakter Dezimal Zeichennummer Entitätsname --- ...
Prinzip der Ereignisdelegierung in JavaScript
Inhaltsverzeichnis 1. Was ist Eventdelegation? 2....
Detailliertes Installations- und Konfigurationstutorial zum MySQL-Flashback-Tool binlog2sql
Überblick binlog2sql ist ein in Python entwickelt...
Lösen Sie das Problem des IDEA-Konfigurations-Tomcat-Startfehlers
Beim Konfigurieren unterschiedlicher Servlet-Pfad...
Gründe und Lösungen für das Nicht-Wirksamwerden der MySQL-SQL-Modus-Änderung
Inhaltsverzeichnis Vorwort Szenariosimulation Zus...
Lösen Sie das Problem der Containerverwaltung mit Docker Compose
Im Docker-Design führt ein Container nur eine Anw...
25 Beispiele für die Verwendung kreisförmiger Elemente im Webdesign
Heute listet dieser Beitrag einige großartige Beis...
So überprüfen Sie, ob die Firewall in Linux ausgeschaltet ist
1. Servicemethode Überprüfen Sie den Firewall-Sta...