js zur Implementierung eines Web-Rechners

Wie erstelle ich mit HTML, CSS und JS einen einfachen Web-Rechner?

Ein Computer hat:

Computer-Gesamtrahmen
Eingabefeld
Eingabetaste

Computer Gesamtrahmen:

/*Div-Stil festlegen*/
 #showdiv{
   Rand: durchgezogen 1px;
   Rahmenradius: 5px;
   Breite: 350px;
   Höhe: 400px;
   Textausrichtung: zentriert;
   Rand: auto;/*Mitte festlegen*/
   Rand oben: 50x;
   Hintergrundfarbe: RGB (214, 219, 190);    
}

Eingabefeld:

/*Stil des Eingabefelds festlegen*/
  Eingabe[Typ=Text]{
      Rand oben: 20px;
      Breite: 290px;
      Höhe: 40px;
      Schriftgröße: 20px;

}

Eingabetaste:

/*Schaltflächenstil festlegen*/
   Eingabe[Typ=Schaltfläche]{
      Breite: 60px;
      Höhe: 60px;
      Rand oben: 20px;
      Rand links: 5px;
      Rand rechts: 5px;
      Schriftgröße: 30px;
      Schriftstärke: fett;
      Schriftfamilie: „楷书“;
}

Verwenden Sie JS-Code, um entsprechende Geschäftslogikvorgänge auszuführen:

<!--JS-Code deklarieren-->
        <Skript>
            Funktionstest (btn) {
                //Holen Sie sich das Buttonobjekt var number = btn.value;
                //Führe den entsprechenden Business-Logik-Switch (Nummer) aus {
                    Fall "=":
                        document.getElementById("Eingabe").Wert = eval(document.getElementById("Eingabe").Wert);
                        brechen;
                    Fall "c":
                        document.getElementById("Eingabe").value="";
                        brechen;
                    Standard:
                        //Den Wert der Schaltfläche dem Eingabefeld zuweisen document.getElementById("input").value+=number;
                        brechen;
                }
                
            }
</Skript>

Verwenden von HTML für den Computersatz:

<Text>
    <div id="div anzeigen">
        <input type="text" id="input" schreibgeschützt="schreibgeschützt"><br>
        <Eingabetyp="Schaltfläche" Wert="1" beim Klicken="test(dies)">
        <Eingabetyp="Schaltfläche" Wert="2" beim Klicken="test(dies)">
        <Eingabetyp="Schaltfläche" Wert="3" beim Klicken="test(dies)">
        <Eingabetyp="Schaltfläche" Wert="4" beim Klicken="test(dies)"><br>
        <Eingabetyp="Schaltfläche" Wert="5" bei Klick="test(dies)">
        <Eingabetyp="Schaltfläche" Wert="6" beim Klicken="test(dies)">
        <Eingabetyp="Schaltfläche" Wert="7" bei Klick="test(dies)">
        <Eingabetyp="Schaltfläche" Wert="8" bei Klick="test(dies)"><br>
        <Eingabetyp="Schaltfläche" Wert="9" beim Klicken="test(dies)">
        <Eingabetyp="Schaltfläche" Wert="+" beim Klicken="test(dies)">
        <Eingabetyp="Schaltfläche" Wert="-" bei Klick="test(dies)">
        <Eingabetyp="Schaltfläche" Wert="*" bei Klick="test(dies)"><br>
        <Eingabetyp="Schaltfläche" Wert="0" beim Klicken="test(dies)">
        <Eingabetyp="Schaltfläche" Wert="/" bei Klick="Test(dies)">
        <Eingabetyp="Schaltfläche" Wert="c" onclick="test(dies)">
        <Eingabetyp="Schaltfläche" Wert="=" bei Klick="test(dies)">
      


    </div>
</body>

Gesamtcode:

<!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">
    <Stil>
        /*Div-Stil festlegen*/
        #showdiv{
            Rand: durchgezogen 1px;
            Rahmenradius: 5px;
            Breite: 350px;
            Höhe: 400px;
            Textausrichtung: zentriert;
            Rand: auto;/*Mitte festlegen*/
            Rand oben: 50x;
            Hintergrundfarbe: RGB (214, 219, 190);    
         }
        /*Stil des Eingabefelds festlegen*/
        Eingabe[Typ=Text]{
            Rand oben: 20px;
            Breite: 290px;
            Höhe: 40px;
            Schriftgröße: 20px;

        }
        /*Schaltflächenstil festlegen*/
        Eingabe[Typ=Schaltfläche]{
            Breite: 60px;
            Höhe: 60px;
            Rand oben: 20px;
            Rand links: 5px;
            Rand rechts: 5px;
            Schriftgröße: 30px;
            Schriftstärke: fett;
            Schriftfamilie: „楷书“;
        }
        </Stil>
        <!--JS-Code deklarieren-->
        <Skript>
            Funktionstest (btn) {
                //Holen Sie sich das Button-Objekt var number = btn.value;
                //Führe den entsprechenden Business-Logik-Switch (Nummer) aus {
                    Fall "=":
                        document.getElementById("Eingabe").Wert = eval(document.getElementById("Eingabe").Wert);
                        brechen;
                    Fall "c":
                        document.getElementById("Eingabe").value="";
                        brechen;
                    Standard:
                        //Den Wert der Schaltfläche dem Eingabefeld zuweisen document.getElementById("input").value+=number;
                        brechen;
                }
                
            }
        </Skript>
        
        
    <title>Dokument</title>
</Kopf>
<Text>
    <div id="div anzeigen">
        <input type="text" id="input" schreibgeschützt="schreibgeschützt"><br>
        <Eingabetyp="Schaltfläche" Wert="1" beim Klicken="test(dies)">
        <Eingabetyp="Schaltfläche" Wert="2" beim Klicken="test(dies)">
        <Eingabetyp="Schaltfläche" Wert="3" beim Klicken="test(dies)">
        <Eingabetyp="Schaltfläche" Wert="4" beim Klicken="test(dies)"><br>
        <Eingabetyp="Schaltfläche" Wert="5" bei Klick="test(dies)">
        <Eingabetyp="Schaltfläche" Wert="6" beim Klicken="test(dies)">
        <Eingabetyp="Schaltfläche" Wert="7" bei Klick="test(dies)">
        <Eingabetyp="Schaltfläche" Wert="8" bei Klick="test(dies)"><br>
        <Eingabetyp="Schaltfläche" Wert="9" beim Klicken="test(dies)">
        <Eingabetyp="Schaltfläche" Wert="+" beim Klicken="test(dies)">
        <Eingabetyp="Schaltfläche" Wert="-" bei Klick="test(dies)">
        <Eingabetyp="Schaltfläche" Wert="*" bei Klick="test(dies)"><br>
        <Eingabetyp="Schaltfläche" Wert="0" beim Klicken="test(dies)">
        <Eingabetyp="Schaltfläche" Wert="/" bei Klick="Test(dies)">
        <Eingabetyp="Schaltfläche" Wert="c" onclick="test(dies)">
        <Eingabetyp="Schaltfläche" Wert="=" bei Klick="test(dies)">
      


    </div>
</body>
</html>

Ergebnis:

Sie müssen gelernt haben, wie man Front-End-Webcomputer erstellt!

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:

Ein einfacher Rechner, geschrieben in Javascript, mit viel Inhalt und praktischen Methoden. Empfohlen
Einfacher JS-Code zur Realisierung des Taschenrechnerbetriebs
js implementiert einen einfachen Rechner
HTML+JS implementiert einfachen Taschenrechnercode (Addition, Subtraktion, Multiplikation und Division)
Einfacher Rechner-Implementierungscode, geschrieben in JS
JavaScript - einfache Implementierungsschrittzerlegung für Rechner (mit Bildern)
js implementiert einen einfachen Rechner
Reiner Javascript-Code zur Implementierung von Rechnerfunktionen (drei Methoden)
Einfache Implementierung eines JS-Web-Rechners
Web-Rechner Ein JS-Rechner

<<: Tutorial-Diagramm zur LAN-Netzwerkkonfiguration für virtuelle Maschinen von VMWare 15.X

>>: Detaillierte Erklärung der Definition und Funktion von Trennzeichen in MySQL