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
Detaillierte Erläuterung der Prinzipien und der Verwendung der MySQL-Master-Slave-Replikation und der Lese-/Schreibtrennung
Dieser Artikel veranschaulicht anhand von Beispie...
Detaillierte Erläuterung der Vue-Konfigurationsanforderung für mehrere Serverlösungen
1. Lösung 1.1 Beschreibung des Schnittstellenkont...
Drei Prinzipien effizienten Navigationsdesigns, die Webdesigner kennen müssen
Das Entwerfen der Navigation für eine Website ist...
Detaillierte Beispiele für Linux-Festplattengeräte- und LVM-Verwaltungsbefehle
Vorwort Im Linux-Betriebssystem sind Gerätedateie...
So installieren Sie MySQL Community Server 5.6.39
Dieser Artikel enthält das ausführliche Tutorial ...
Detaillierte Erläuterung der JDBC-Datenbankverknüpfung und der zugehörigen Methodenkapselung
Detaillierte Erläuterung der JDBC-Datenbankverknü...
So sichern Sie MySQL unter Linux automatisch remote
Vorwort: Ganz gleich, ob wir es für den Eigengebr...
Sprechen Sie kurz über MySQL Left Join Inner Join
Vorwort Ich war kürzlich damit beschäftigt, ein K...
Nodejs verwendet Readline, um zur Eingabe von Beispielcode für Inhalte aufzufordern
Inhaltsverzeichnis Vorwort 1. bat führt js aus 2....
Detaillierte Erläuterung der geplanten Ausführungsaufgaben für MySQL-Datenbankereignisse
1. Hintergrund Mit der Weiterentwicklung des Proj...
Detaillierte Erläuterung der Verwendung und Vorsichtsmaßnahmen von Crontab unter Linux
Crontab ist ein Befehl zum Einrichten einer perio...
Holen Sie sich den berechneten Stil im CSS-Element (nach dem kaskadierenden/finalen Stil).
Um den berechneten Stil in einem CSS-Element zu er...
Detaillierter Prozess zum Zeichnen dreidimensionaler Pfeillinien mit three.js
Nachfrage: Diese Nachfrage ist ein dringender Bed...
MySQL 5.7.10 Installations- und Konfigurations-Tutorial unter Windows
MySQL bietet zwei verschiedene Versionen für unte...
Zusammenfassung der MySQL-Zeitstatistikmethoden
Beim Erstellen von Datenbankstatistiken müssen Si...