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 Unsinn Implementierte Funktion...
Laden Sie das ZIP-Installationspaket herunter: Do...
Um es gleich auf den Punkt zu bringen: Bei manche...
Werfen wir einen Blick auf den Installationsproze...
Inhaltsverzeichnis Vorwort Untersuchung vor Ort G...
1. Laden Sie zunächst die neueste Version von MyS...
Die Installation, Konfiguration und Optimierung v...
Inhaltsverzeichnis 1. Implementieren Sie die Meth...
Inhaltsverzeichnis 1. Was ist Javascript? 2. Was ...
1. Verfeinern Sie den Selektor Durch die Verwendu...
Inhaltsverzeichnis Vorwort Anwendungsszenarios fü...
Dieser Artikel beschreibt einen Vorschlag für ein...
Inhaltsverzeichnis Vorwort Rollprinzip erreichen ...
Inhaltsverzeichnis Problembeschreibung Szenario S...
Inhaltsverzeichnis 1. Was ist ein Abschluss? 1.2 ...