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 Erste Schritte Datenspeicherun...
Inhaltsverzeichnis Schmutzige Seiten (Speichersei...
Bei täglichen Entwicklungsaufgaben verwenden wir ...
Inhaltsverzeichnis $nächsterTick() $forceUpdate()...
Für Linux-Systemadministratoren ist es von entsch...
Code kopieren Der Code lautet wie folgt: <Körp...
1 Problembeschreibung Dieser Artikel sortiert den...
Wie wir alle wissen, gibt es in Computern zwei Art...
Laden Sie zuerst die Version 15.1 von VMware Work...
Wenn die erstellte Registerkartenbeschriftung den...
Inhaltsverzeichnis 1. Seiten-Rendering 2. Tags hi...
Wissenspunkte in der Vorschau anzeigen. Animation...
In diesem Artikelbeispiel wird der spezifische Ja...
Manchmal speichern wir viele doppelte Daten in de...
SELECT * FROM Tabellenname Limit m,n; SELECT * FR...