Native JS implementiert einen sehr gut aussehenden Zähler
|
Heute zeige ich Ihnen einen gut aussehenden Zähler, der mit nativem JS implementiert wurde. Der Effekt ist wie folgt:
Nachfolgend sehen Sie die Code-Implementierung. Sie können diese gerne kopieren, einfügen und sammeln.
<!DOCTYPE html>
<html lang="de">
<Kopf>
<meta charset="UTF-8">
<meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1.0">
<title>Natives JS implementiert einen gut aussehenden Zähler</title>
<Stil>
* {
Schriftfamilie: „Microsoft YaHei“, serifenlos;
Box-Größe: Rahmenbox;
Rand: 0;
Polsterung: 0;
}
Körper {
Anzeige: Flex;
Inhalt ausrichten: zentriert;
Elemente ausrichten: zentrieren;
Mindesthöhe: 100vh;
Hintergrund: #000d0f;
}
.container {
Position: relativ;
Breite: 80px;
Höhe: 50px;
Rahmenradius: 40px;
Rand: 2px durchgezogen rgba(255, 255, 255, 0,2);
Übergang: 0,5 s;
}
.container:hover {
Breite: 120px;
Rand: 2px durchgezogen rgba(255, 255, 255, 1);
}
.container .nächster {
Position: absolut;
oben: 50 %;
rechts: 30px;
Anzeige: Block;
Breite: 12px;
Höhe: 12px;
Rahmen oben: 2px durchgezogen #fff;
Rahmen links: 2px durchgezogen #fff;
Z-Index: 1;
transformieren: verschiebeY(-50%)drehen(135°);
Cursor: Zeiger;
Übergang: 0,5 s;
Deckkraft: 0;
}
.container:hover .nächster {
Deckkraft: 1;
rechts: 20px;
}
.container .vorher {
Position: absolut;
oben: 50 %;
links: 30px;
Anzeige: Block;
Breite: 12px;
Höhe: 12px;
Rahmen oben: 2px durchgezogen #fff;
Rahmen links: 2px durchgezogen #fff;
Z-Index: 1;
transformieren: verschiebeY(-50%)drehen(315°);
Cursor: Zeiger;
Übergang: 0,5 s;
Deckkraft: 0;
}
.container:hover .prev {
Deckkraft: 1;
links: 20px;
}
#Boxspanne {
Position: absolut;
Anzeige: keine;
Breite: 100 %;
Höhe: 100%;
Textausrichtung: zentriert;
Zeilenhöhe: 46px;
Farbe: #00deff;
Schriftgröße: 24px;
Schriftstärke: 700;
Benutzerauswahl: keine;
}
#box span:n-tes-Kind(1) {
Anzeige: initial;
}
</Stil>
</Kopf>
<Text>
<div Klasse="Container">
<div Klasse = "nächste" onclick = "nächsteNummer()"></div>
<div Klasse="vorherige" onclick="vorherigeNum()"></div>
<div id="box">
<span>0</span>
</div>
</div>
<Skript>
var Zahlen = document.getElementById('Box')
für (sei i = 0; i < 100; i++) {
let span = document.createElement('span')
span.textContent = i
Zahlen.anhängenKind(Spanne)
}
let num = numbers.getElementsByTagName('span')
lass Index = 0
Funktion nächsteNummer() {
num[index].style.display = "keine"
index = (index + 1) % num.länge
Num[index].style.display = "initial"
}
Funktion vorherigeNummer() {
num[index].style.display = "keine"
Index = (Index - 1 + Nummernlänge) % Nummernlänge
Num[index].style.display = "initial"
}
</Skript>
</body>
</html>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:
|
<<: Zusammenfassung häufig verwendeter SQL-Operationen in MySQL-Tabellen
>>: Centos7.3 startet oder führt beim Booten automatisch angegebene Befehle aus
Artikel empfehlen
vmware workstation12 installation centos fordert VMware Player und Device/Credential Guard sind inkompatibel, Gründe und Lösungen
In der neuesten Version von WIN10 hat Microsoft e...
Windows DNS-Server weist Sicherheitslücke auf „Wurm-Niveau“ auf, existiert seit 17 Jahren
Einführung in die Sicherheitslücke Die SigRed-Sic...
MySQL SHOW PROCESSLIST unterstützt den gesamten Prozess der Fehlerbehebung
1. SHOW PROCESSLIST-Befehl SHOW PROCESSLIST zeigt...
JavaScript-Dom-Objektoperationen
Inhaltsverzeichnis 1. Kern 1. Holen Sie sich den ...
Ein Designer beschwert sich erneut über die offizielle Website von Hammer
Letztes Jahr war der offene Brief ein großer Erfo...
Detaillierte Erklärung der RPM-Installation in MySQL
Installation und Deinstallation anzeigen # rpm -q...
Das WeChat-Applet implementiert die Aufnahmefunktion
In diesem Artikel wird der spezifische Code für d...
Lösen Sie das Problem des MySql8.0-Prüfungsfehlers der Transaktionsisolationsebene
Inhaltsverzeichnis MySql8.0 Fehler bei der Transa...
Implementierung von MySQL-indexbasierten Stresstests
1. Datenbankdaten simulieren 1-1 Datenbank- und T...
Vermeiden Sie den Missbrauch zum Lesen von Daten in Vue
Inhaltsverzeichnis Vorwort 1. Der Prozess der Ver...
Tipps zur Verwendung des Befehls „Docker Inspect“
Beschreibung und Einführung Docker Inspect ist ei...
HTML n Möglichkeiten zum Erreichen eines alternativen Farbcode-Beispielcodes
In diesem Artikel wird hauptsächlich der Beispiel...
Detaillierte Erklärung zur Konfiguration des sekundären Domänennamens auf einem Apache-Server in einer Linux-Umgebung
Dieser Artikel beschreibt, wie Sie einen sekundär...
Die spezifische Verwendung und der Unterschied zwischen Attribut und Eigenschaft in Vue
Inhaltsverzeichnis Als Attribut- und Eigenschafts...
Detaillierte Erläuterung der Mybatis-Sonderzeichenverarbeitung
Vorwort: Mybatis-Sonderzeichenverarbeitung, Verar...