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 empfehlen

So stellen Sie Redis schnell als Docker-Container bereit

Inhaltsverzeichnis Erste Schritte Datenspeicherun...

Was sind MySQL-Dirty-Pages?

Inhaltsverzeichnis Schmutzige Seiten (Speichersei...

MySql Group By implementiert die Gruppierung mehrerer Felder

Bei täglichen Entwicklungsaufgaben verwenden wir ...

Detaillierte Erläuterung gängiger Methoden der Vue-Entwicklung

Inhaltsverzeichnis $nächsterTick() $forceUpdate()...

6 Möglichkeiten, die von Linux-Prozessen belegten Portnummern anzuzeigen

Für Linux-Systemadministratoren ist es von entsch...

So legen Sie den Fokus auf HTML-Elemente fest

Code kopieren Der Code lautet wie folgt: <Körp...

So fügen Sie bei der Webseitenerstellung Webfont-Dateien Vektorsymbole hinzu

Wie wir alle wissen, gibt es in Computern zwei Art...

CSS3 verwendet var()- und calc()-Funktionen, um Animationseffekte zu erzielen

Wissenspunkte in der Vorschau anzeigen. Animation...

JavaScript implementiert schnell Kalendereffekte

In diesem Artikelbeispiel wird der spezifische Ja...

Was sind die Verwendungszwecke von Limits in MySQL (empfohlen)

SELECT * FROM Tabellenname Limit m,n; SELECT * FR...