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

Zusammenfassung häufig verwendeter CSS-Kapselungsmethoden

1. PC-Reset Initialisierung im PC-Stil /* normali...

Tutorial-Diagramm zur Installation von Zabbix2.4 unter Centos6.5

Die feste IP-Adresse des Centos-DVD1-Versionssyst...

UCenter-Homepage fügt Statistikcode hinzu

UCenter Home ist ein von Comsenz veröffentlichtes ...

js zum Hochladen von Bildern auf den Server

In diesem Artikelbeispiel wird der spezifische Co...

Was soll ich tun, wenn ich die Quelldatei einer Webseite nicht anzeigen kann?

F: Wenn Sie Outlook oder IE verwenden, wird beim ...

Lösung für die geringe Schreibeffizienz von unter AIX gemountetem NFS

Von NFS bereitgestellte Dienste Mounten: Aktivier...

Grafisches Tutorial zur Installation von MySQL 8.0.15 und Datenbankgrundlagen

Die Installation der MySQL-Software und die Daten...

So verweisen Sie auf jQuery in einer Webseite

Die Referenzierung ist über CDN (Content Delivery ...

JavaScript implementiert die asynchrone Erfassung von Formulardaten

In diesem Artikelbeispiel wird der spezifische Co...

Detaillierte Erläuterung der Verwendung des DockerHub-Image-Repository

Bisher wurden die von uns verwendeten Images alle...