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: