JS implementiert einen einfachen Zähler

JS implementiert einen einfachen Zähler

Verwenden Sie HTML, CSS und JavaScript, um einen einfachen Zähler mit drei Schaltflächen zu implementieren: Plus, Minus und Null, die jeweils die Operationen „Eins addieren“, „Eins subtrahieren“ und „Null zurücksetzen“ implementieren. Schauen wir uns zunächst das Wirkungsdiagramm an.

HTML Code

<div Klasse="Körper">
   <div Klasse="Text">
    <font>Zähler</font>
   </div>
   <div Klasse="Anzahl" >
    <span id="demo" class="ft">
     2
    </span>
   </div>
   <div Klasse="btn">
    <button Typ="button" Klick="Hinzufügen()" Klasse="btn1">+</button>
    <button type="button" click="zero()" class="btn2">Null</button>
    <button type="button" click="sub()" class="btn1">-</button>

   </div>
</div>

CSS Code

 .Körper {
    Breite: 300px;
    Höhe: 500px;
    Hintergrundfarbe: #211d5a;
    Rahmenradius: 20px;
    Anzeige: Flex;
    Flex-Richtung: Spalte;
    Elemente ausrichten: zentrieren;
   }
   
   .text {
    Schriftgröße: 24px;
    Farbe: weiß;
    Rand oben: 60px;
    Textschatten: 2px 2px 2px #fff;
   }
   
   .zählen {
    Position: relativ;
    Breite: 200px;
    Höhe: 200px;
    Rand oben: 60px;
    Rand: 10px durchgezogen;
    Rahmenfarbe: RGB (79, 59, 156);
    Randradius: 50 %;
    Anzeige: Flex;
   }
   
   .ft {
    Schriftgröße: 100px;
    Farbe: #fff;
    /*links: 50 %;
                Rand links: -102px;
                Rand oben: 40px;*/
    Rand: automatisch;
   }
   
   .btn {
    Breite: 220px;
    Anzeige: Flex;
    /*Flex-Richtung: Zeile;*/
    Inhalt ausrichten: Abstand dazwischen;
    Rand oben: 60px;
   }
   
   .btn1 {
    Breite: 50px;
    Höhe: 30px;
    Rand: 0px;
    Rahmenradius: 4px;
    Hintergrundfarbe: rgb(79, 59, 156);
    Schriftgröße: 20px;
    Farbe: #efdaff;
   }
   
   .btn2 {
    Breite: 50px;
    Höhe: 30px;
    Rand: 0px;
    Rahmenradius: 4px;
    Hintergrundfarbe: RGB (79, 59, 156);
    Schriftgröße: 22px;
    Farbe: #efdaff;
   }

Tipps: Flexible Boxanzeige: Flex-Layout + Rand: Automatisch kann eine perfekte Zentrierung erreicht werden.

JS-Code

<Skript>
   var Zähler = document.getElementById("demo").innerHTML;
   Funktion add() {
     Zähler++;
     document.getElementById("demo").innerHTML = Zähler;
   }

   Funktion sub() {
    wenn(Zähler == 0) {
       Zähler = 0;
    } anders {
     Schalter--;
        document.getElementById("demo").innerHTML = Zähler;
    }
   }

   Funktion Null() {
    Zähler = 0;
       document.getElementById("demo").innerHTML = Zähler;
   }
</Skript>

Der obige Code kann den Effekt erzielen.

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:
  • JavaScript implementiert die grundlegende Methode des Zählers
  • So erstellen Sie einen einfachen Zähler mit JavaScript
  • Der Zähler erhöht sich unter Javascript automatisch um 1 pro Sekunde
  • Helfen Sie mir, mit JAVASCRIPT einen Zähler zu schreiben
  • Native JS implementiert einen sehr gut aussehenden Zähler

<<:  Reduzieren Sie die Speicher- und CPU-Auslastung durch die Optimierung von Webseiten

>>:  VMware-Installation der virtuellen CentOS-Maschine und grafisches Tutorial zur Netzwerkkonfiguration

Artikel    

Artikel empfehlen

MySQL-Operator-Zusammenfassung

Inhaltsverzeichnis 1. Arithmetische Operatoren 2....

So erstellen Sie MySQL-Indizes richtig

Die Indizierung ähnelt dem Erstellen bibliografis...

xtrabackup MySQL-Datenbank sichern und wiederherstellen

Aufgrund einiger seiner eigenen Merkmale (Sperren...

So zeigen Sie den Startparameterbefehl „Docker Run“ an (empfohlen)

Verwenden Sie runlike, um die Docker Run-Startpar...

Eine kurze Einführung in MySQL InnoDB ReplicaSet

Inhaltsverzeichnis 01 Einführung in InnoDB Replic...

MySQL führt Befehle für externe SQL-Skriptdateien aus

Inhaltsverzeichnis 1. Erstellen Sie eine SQL-Skri...

Beispielcode zum Konvertieren von HTML-Tabellendaten in das JSON-Format

Die Javascript-Funktion zum Konvertieren von <t...

Eine kurze Erläuterung zu Leerzeichen und Leerzeilen im HTML-Code

Alle aufeinanderfolgenden Leerzeichen oder Leerze...

Detaillierte Erläuterung der grundlegenden Docker-Netzwerkkonfiguration

Externer Zugriff Ports nach dem Zufallsprinzip zu...

Detaillierte Erklärung unsichtbarer Indizes in MySQL 8.0

Wort Seit der ersten Version von MySQL 8.0 liegen...

So implementieren Sie Call, Apply und Binding in nativem JS

1. Implementieren Sie den Anruf Schritt: Legen Si...