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

Implementierung des Vue-Top-Tags-Browserverlaufs

Inhaltsverzeichnis Unsinn Implementierte Funktion...

Detailliertes Installationstutorial für mysql-8.0.11-winx64.zip

Laden Sie das ZIP-Installationspaket herunter: Do...

Verwenden Sie reines CSS, um einen Scroll-Schatteneffekt zu erzielen

Um es gleich auf den Punkt zu bringen: Bei manche...

Fehlerbehebung bei MySQL-Datenverlust

Inhaltsverzeichnis Vorwort Untersuchung vor Ort G...

2017 neueste Version der Windows-Installation MySQL-Tutorial

1. Laden Sie zunächst die neueste Version von MyS...

Tutorial zur Optimierung der Installationskonfiguration von MySQL 8.0.18

Die Installation, Konfiguration und Optimierung v...

Zehn wichtige Fragen zum Erlernen der Grundlagen von Javascript

Inhaltsverzeichnis 1. Was ist Javascript? 2. Was ...

Mehrere Möglichkeiten zur Lösung von CSS-Stilkonflikten (Zusammenfassung)

1. Verfeinern Sie den Selektor Durch die Verwendu...

Mysql-Datumsformatierung und komplexe Datumsbereichsabfrage

Inhaltsverzeichnis Vorwort Anwendungsszenarios fü...

Vue-Beispielcode zur einfachen Implementierung von virtuellem Scrollen

Inhaltsverzeichnis Vorwort Rollprinzip erreichen ...

JavaScript-Closures erklärt

Inhaltsverzeichnis 1. Was ist ein Abschluss? 1.2 ...