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: