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
Implementierungsschritte zum Erstellen eines Webpack5-React-Gerüsts von Grund auf (mit Quellcode)
Inhaltsverzeichnis webpack5 Offizieller Start Bau...
Implementierung von erzwungenen Zeilenumbrüchen und Nicht-Zeilenumbrüchen in div, td, p und anderen Containern in HTML
1. Erzwingen Sie keinen Zeilenumbruch und beenden ...
MySQL max_allowed_packet-Einstellung
max_allowed_packet ist ein Parameter in MySQL, de...
So verwenden Sie die JSX-Syntax richtig in Vue
Inhaltsverzeichnis Vorwort Virtueller DOM Was ist...
Gründe und Lösungen für das Nicht-Wirksamwerden der MySQL-SQL-Modus-Änderung
Inhaltsverzeichnis Vorwort Szenariosimulation Zus...
Erfahren Sie mehr über das V-Modell und seine Modifikatoren in einem Artikel
Inhaltsverzeichnis Vorwort Modifikatoren des V-Mo...
Tutorial zur Installation von lamp-php7.0 in einer Centos7.4-Umgebung
Dieser Artikel beschreibt, wie lamp-php7.0 in ein...
So installieren Sie Composer unter Linux
1. Laden Sie das Installationsskript - composer-s...
Detaillierte Erläuterung mehrerer Methoden zur Deduplizierung im Javascript-Array
Inhaltsverzeichnis Array-Deduplizierung 1 Doppels...
Nodejs konvertiert JSON-String in JSON-Objekt-Fehlerlösung
Wie konvertiere ich eine JSON-Zeichenfolge in ein...
So kapseln Sie Paging-Komponenten manuell in Vue3.0
In diesem Artikel wird der spezifische Code der m...
Beispiel für die Ausführung eines MySQL-Befehlszeilenskripts
Dieser Artikel veranschaulicht anhand eines Beisp...
Lösen Sie das Problem des hässlichen blauen Rahmens nach dem Hinzufügen eines Hyperlinks zum HTML-Bild img
HTML-Bild erzeugt nach dem Hinzufügen eines Hyper...
So entfernen Sie MySQL aus Ubuntu und installieren es neu
Löschen Sie zuerst MySQL: sudo apt-get remove mys...
So fügen Sie Docker dynamisch Ports hinzu, ohne das Image neu zu erstellen
Manchmal müssen Sie während des Betriebs freigege...