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:
|
<<: Reduzieren Sie die Speicher- und CPU-Auslastung durch die Optimierung von Webseiten
Inhaltsverzeichnis 1. Arithmetische Operatoren 2....
Verwenden Sie gespeicherte Prozeduren, um Transak...
Die Indizierung ähnelt dem Erstellen bibliografis...
Aufgrund einiger seiner eigenen Merkmale (Sperren...
Verwenden Sie runlike, um die Docker Run-Startpar...
Inhaltsverzeichnis 01 Einführung in InnoDB Replic...
Zunächst stellt sich häufig die Frage: Welche Bez...
Inhaltsverzeichnis 1. Erstellen Sie eine SQL-Skri...
Die Javascript-Funktion zum Konvertieren von <t...
Beschreibung der Installationsumgebung •Systemver...
Innerhalb der Zeilen können die hellen Rahmenfarb...
Alle aufeinanderfolgenden Leerzeichen oder Leerze...
Externer Zugriff Ports nach dem Zufallsprinzip zu...
Wort Seit der ersten Version von MySQL 8.0 liegen...
1. Implementieren Sie den Anruf Schritt: Legen Si...