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
4 Möglichkeiten, mit CSS ein zweispaltiges Layout mit fester linker Spalte und adaptiver rechter Spalte zu erreichen
1. Float + Überlauf: versteckt Diese Methode löst...
Erläuterung des MySQL-Nicht-Null-Einschränkungsfalls
Inhaltsverzeichnis Legen Sie beim Erstellen einer...
Hinweise zu Fallstricken bei Vuex und Pinia in Vue3
Inhaltsverzeichnis einführen Installation und Ver...
Natives JS zur Implementierung der Dropdown-Box-Auswahlkomponente
In diesem Artikelbeispiel wird der spezifische JS...
Detaillierte Erklärung zur Verwendung von Vue Smooth DnD, einer verschiebbaren Komponente von Vue
Inhaltsverzeichnis Einführung und Demo API: Conta...
Redo-Dateiwartungsmethode der InnoDB-Engine
Wenn Sie die Größe und Anzahl der InnoDB-Redo-Log...
Eine kurze Einführung in Protobuf und ein Installationstutorial in der Ubuntu 16.04-Umgebung
Eine kurze Einführung in protobuf Protobuf ist Go...
Die entsprechenden Attribute und Verwendung von XHTML-Tags in CSS
Als ich anfing, Webseiten mit XHTML CSS zu entwer...
Vermeidung von durch Closures verursachten Problemen in JavaScript
Über let, um Probleme durch Schließung zu vermeid...
JavaScript zum Erzielen eines Akkordeoneffekts
In diesem Artikel wird der spezifische Code für J...
Analyse der Prinzipien verschiedener Möglichkeiten zur Nachahmung des Lupeneffekts in CSS3
Warum lautet der Titel des Artikels „Imitierte Lu...
Super ausführliches Tutorial zur Installation und Konfiguration von MySQL8.0.22
Hallo zusammen, heute lernen wir die Installation...
Hauptfunktionen von MySQL Innodb: Einfügepuffer
Inhaltsverzeichnis Was ist ein Einfügepuffer? Was...
Javascript-Grundlagen: Detaillierte Erklärung der Operatoren und der Flusskontrolle
Inhaltsverzeichnis 1. Betreiber 1.1 Arithmetische...
CSS zur Erzielung eines schwebenden Kundenservice-Effekts
<div Klasse="Seitenleiste"> <d...