JS-Implementierung des Apple-Rechners
|
In diesem Artikelbeispiel wird der spezifische JS-Code zur Implementierung des Apple-Rechners zu Ihrer Information geteilt. Der spezifische Inhalt ist wie folgt
<!DOCTYPE html>
<html>
<Kopf>
<meta charset="utf-8">
<title>Mobiltelefon</title>
<style type="text/css">
#Telefon{
Position: relativ;
Breite: 380px;
Höhe: 700px;
Kastenschatten: 1px 1px 10px #808080;
Rand: automatisch;
Rahmenradius: 30px;
}
.kj{
Position: absolut;
Breite: 8px;
Höhe: 60px;
Hintergrundfarbe: schwarz;
rechts: -8px;
oben: 100px;
}
.yl{
Position: absolut;
Breite: 8px;
Höhe: 80px;
Hintergrundfarbe: schwarz;
links: -8px;
oben: 85px;
}
.Spitze{
Breite: 120px;
Höhe: 50px;
/* Boxschatten: 1px 1px 10px #808080; */
Rand: automatisch;
}
.mkf{
schweben: links;
Breite: 100px;
Höhe: 10px;
Rahmenradius: 5px;
Hintergrundfarbe: schwarz;
Rand rechts: 10px;
Rand oben: 20px;
}
.sxj{
schweben: links;
Breite: 10px;
Höhe: 10px;
Rahmenradius: 5px;
Hintergrundfarbe: schwarz;
Rand oben: 20px;
}
.Bildschirm{
Breite: 370px;
Höhe: 600px;
Hintergrundfarbe: schwarz;
Rand: automatisch;
}
.Ergebnis-Nummer{
Höhe: 120px;
/* Polsterung oben: 30px; */
}
.sp{
schweben: rechts;
Farbe: weiß;
Schriftgröße: 50px;
Rand oben: 50px;
}
.Nummer{
Höhe: 480px;
}
.Schlüssel{
Breite: 82,5px;
Höhe: 82,5px;
Rahmenradius: 50px;
Hintergrundfarbe: #808080;
schweben: links;
Rand: 5px;
Textausrichtung: zentriert;
Zeilenhöhe: 80px;
Schriftgröße: 20px;
Farbe: weiß;
}
.Erste{
Hintergrundfarbe: #B0B0B0;
Farbe: Schwarz;
}
.zweite{
Hintergrundfarbe: orange;
}
.dritte{
Breite: 175px;
}
.heim{
Breite: 45px;
Höhe: 45px;
Rahmenradius: 25px;
Hintergrundfarbe: #B0B0B0;
Rand: 3px automatisch 0px automatisch;
}
</Stil>
</Kopf>
<Text>
<div id="Telefon">
<!--Einschaltknopf-->
<div Klasse="kj"></div>
<!--Volumen-->
<div Klasse="yl"></div>
<!-- Oberseite des Telefons -->
<div Klasse="oben">
<!-- Mikrofon -->
<div Klasse="mkf"></div>
<!-- Kamera -->
<div Klasse="sxj"></div>
</div>
<!-- Bildschirm -->
<div Klasse="Bildschirm">
<div Klasse="Ergebnis-Nummer">
<span class="sp">0</span>
</div>
<div Klasse="Nummer">
<div Klasse="Schlüssel zuerst" onclick="clearCompute()">AC</div>
<div class="Schlüssel zuerst" onclick="deleteLastNum()">←</div>
<div Klasse="Schlüssel zuerst">%</div>
<div Klasse = "Schlüssel Sekunde" onclick = "Spaß ('/')">/</div>
<div Klasse="Schlüssel Schlüsselnummer" onclick="Spaß(7)">7</div>
<div Klasse="Schlüssel Schlüsselnummer" onclick="Spaß(8)">8</div>
<div Klasse="Schlüssel Schlüsselnummer" onclick="Spaß(9)">9</div>
<div Klasse="Schlüssel Sekunde" onclick="Spaß('*')">*</div>
<div Klasse="Schlüssel Schlüsselnummer" onclick="Spaß(4)">4</div>
<div Klasse="Schlüssel Schlüsselnummer" onclick="Spaß(5)">5</div>
<div Klasse="Schlüssel Schlüsselnummer" onclick="Spaß(6)">6</div>
<div Klasse="Schlüssel Sekunde" onclick="Spaß('-')">-</div>
<div Klasse="Schlüssel Schlüsselnummer" onclick="Spaß(1)">1</div>
<div Klasse="Schlüssel Schlüsselnummer" onclick="Spaß(2)">2</div>
<div Klasse="Schlüssel Schlüsselnummer" onclick="Spaß(3)">3</div>
<div Klasse="Schlüssel Sekunde" onclick="Spaß('+')">+</div>
<div Klasse="Schlüssel dritter Schlüsselwert" onclick="Spaß(0)">0</div>
<div Klasse="Schlüssel" onclick="Spaß('.')">.</div>
<div Klasse = "Schlüssel Sekunde" onclick = "compute()"> = </div>
</div>
</div>
<!-- Home-Taste -->
<div Klasse="Startseite">
</div>
</div>
<Skripttyp="text/javascript">
var span = document.querySelector(".sp");
/**
* @param {Objekt} Nummer
* Klicken Sie auf den Ziffernblock, um die Zahl innerhalb unseres Span-Tags zu ersetzen */
Funktion Spaß(Zahl){
var-Wert = span.innerText;
wenn(Wert == 0){
span.innerText = num;
}anders{
span.innerText = span.innerText.concat(num);
}
}
/**
* Berechnungsergebnis */
Funktion berechnen(){
var-Wert = span.innerText;
var Ergebnis = eval(Wert);
span.innerText = Ergebnis;
}
/**
* Berechnungsbereich löschen und auf 0 zurücksetzen
*/
Funktion ClearCompute(){
span.innerText="0";
}
/**
* Letztes Zeichen im Berechnungsbereich löschen*/
Funktion deleteLastNum(){
var-Wert = span.innerText;
console.log(Typ von(Wert))
wenn(Wert == 0){
}
anders{
/**
* Wert ist eine Zeichenfolge * zs123
* Byte: Wenn Text im Computer gespeichert wird, wird er in Bytes gespeichert. Der Kodierungssatz wandelt Zeichen in bestimmte Bytes um und speichert sie auf dem Computer. * Zeichen: Ein Buchstabe oder ein chinesisches Zeichen, das Menschen verstehen können. * ab Chinesisch aj
*
* Ein String ist eine Sammlung von Zeichen. String bietet viele allgemeine Methoden, mit denen wir verwandte Operationen an diesem Zeichenarray durchführen können*/
wenn(Wert.Länge!=1){
span.innerText = Wert.Teilzeichenfolge(0,Wert.Länge-1)
}anders{
span.innerText="0";
}
}
}
</Skript>
</body>
</html>Effektbild:
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:
|
<<: Detaillierte Erklärung der Verwendung des Bash-Befehls
>>: Detaillierte Erläuterung des MySql-Beispiels für automatische Kürzung
Artikel empfehlen
18 Web-Usability-Prinzipien, die Sie kennen müssen
Sie können über die besten visuellen Designfähigk...
Problem mit fehlgeschlagener tzselect-Einstellungszeit in Ubuntu20, Raspberry Pi-Server (empfohlen)
Ich habe meinen Raspberry Pi-Server vor zwei Tage...
Detaillierte Erläuterung der Fallstricke des Nginx-Proxy-Socket.io-Dienstes
Inhaltsverzeichnis Nginx fungiert als Proxy für z...
Nginx: Lernen, wie man einen Dienst zum Schutz von Datei-Hotlinks erstellt – Beispiel
Vorwort Jeder weiß, dass viele Websites mittlerwe...
Nginx verwendet Reverse-Proxy, um eine Analyse des Lastausgleichsprozesses zu implementieren
Einführung Basierend auf Docker-Containern und Do...
Lösen Sie das Problem des Startfehlers von PHPStudy MySQL unter Windows
Einen Fehler melden Der Apache\Nginx-Dienst wurde...
Detaillierte Erklärung der perfekten Lösung für das VMware-Problem mit dem schwarzen Bildschirm nach dem Upgrade auf MacOS Catalina
Perfekte Lösung für den schwarzen VMware-Bildschi...
So installieren und konfigurieren Sie Docker nginx
Laden Sie das Nginx-Image in Docker herunter Dock...
Von CSS 3D zur räumlichen Koordinatenachse mit Quellcode
Einmal haben wir über das Würfelspiel gesprochen....
Fallstudie zur Implementierung eines jQuery Ajax-Chatbots
Chatbots können viel manuelle Arbeit sparen und i...
Vue integriert PDF.js, um eine PDF-Vorschau zu implementieren und Schritte zum Hinzufügen von Wasserzeichen durchzuführen
Inhaltsverzeichnis Ergebnisse erzielen Einführung...
Detaillierte Erklärung der Prinzipien des responsiven Systems von Vue
Inhaltsverzeichnis Die Grundprinzipien des respon...
Lösung für das Problem mit transparenten Schriftarten nach dem Aktivieren von ClearType im Internet Explorer
Die Lösung für das Problem mit der transparenten S...
Rufen Sie die Schriftart entsprechend dem Schriftnamen auf, damit der Browser die gewünschte Schriftart anzeigt
Frage 1: Wie weisen Sie den Browser an, die gewüns...
Verwenden Sie CSS, um einen 3D-Fotowandeffekt zu erstellen
Verwenden Sie CSS, um eine 3D-Fotowand zu erstell...