Natives JS zur Implementierung der Paging-Klicksteuerung

Natives JS zur Implementierung der Paging-Klicksteuerung

Dies ist eine Interviewfrage, die die Verwendung von nativem JS erfordert, um eine Paging-Klicksteuerung zu implementieren. Zu Ihrer Information lautet der spezifische Inhalt wie folgt

1. Klicken Sie auf die Startseite, die vorherige Seite, die nächste Seite und die letzte Seite, damit die entsprechenden digitalen Zahlen rot werden.
2. Sie können auf Seite 1 nicht auf die Startseite oder die vorherige Seite klicken.
3. Auf Seite 10 können Sie nicht auf „Nächste Seite“ klicken.
4. Implementieren Sie eine Funktion, um durch Eingabe von Seitenzahlen zu Seitenzahlen zu springen.

HTML

<!DOCTYPE html>
<html lang="de">
<Kopf>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1.0">
    <meta http-equiv="X-UA-kompatibel" content="ie=edge">
    <title>Seite</title>
    <Stil>
        *{
            Rand: 0px;
            Listenstiltyp: keiner;
        }
        Kopfzeile, Fußzeile, Abschnitt{
            Box-Größe: Rahmenbox;
            Textausrichtung: zentriert;
            Polsterung: 5px;
        }
        Kopfzeile,Fußzeile{
            Hintergrundfarbe: Aquamarin;
            Schriftgröße: 25px;
        }
        #Inhalt{
            Anzeige: Flex;
            Flex-Richtung: Spalte;
            Inhalt ausrichten: zentriert;
            Elemente ausrichten: zentrieren;
            Flex-Wrap: Nowrap;
            Höhe: 500px;
            Hintergrundfarbe: Antikweiß;
        }
        .Inhalt{
            Rand: 1px gepunktetes Sattelbraun;
            Mindestbreite: 700px;
            Mindesthöhe: 440px;
            Hintergrundfarbe: Dunkelcyan;
        }
        #changePage li{
            Anzeige: Inline-Block;
        }
        .Jetzt{
            Farbe: rot;
        }
        .verstecken{
            Anzeige: versteckt
        }
    </Stil>
</Kopf>
<Text>
    <header>Dies ist eine Kopfzeile</header>
    <Abschnitt>
        <div id="Inhalt">
            <h2>Dies ist ein Inhalt</h2>
            <div Klasse="Inhalt">
                <p>Dies ist Inhalt</p>
                <p id="Wort"></p>
            </div>
            <div id="Seite ändern">
                <ul>
                    <li><button id="homePage" disabled="true">Startseite</button></li>
                    <li><button id="prev" disabled="true">Vorherige Seite</button></li>
                    <li id="btns">
                        <button class="jetzt">1</button>
                        <button>2</button>
                        <button>3</button>
                        <button>4</button>
                        <button>5</button>
                        <button>6</button>
                        <button>7</button>
                        <button>8</button>
                        <button>9</button>
                        <button>10</button>
                    </li>
                    <li><button id="next">Nächste Seite</button></li>
                    <li><button id="lastPage">Letzte Seite</button></li>
                    <li id ​​= "Eingabe"><input type = "Zahl" value = "1" min = "1" max = "10">
                        <button>OK</button>
                        Seite <span>1</span>
                </ul>
            </div>
        </div>
    </Abschnitt>
    <footer>Dies ist eine Fußzeile</footer>
    <script src="js/page.js"></script>
</body>
</html>

JavaScript

sei NUM = 1;
 
//Hauptfunktion, Bind-Event-Funktion changepage() {
    let btns = document.getElementById('changePage');
    Lassen Sie Element_1 = document.getElementById('btns').children;
    // console.log(element_1)
    let homepage = document.getElementById('homePage');
    let letzteSeite = document.getElementById('letzteSeite');
    let vorherige Seite = document.getElementById('vorherige');
    let nächste Seite = document.getElementById('nächste');
    let enterpage = document.getElementById('enter').children[1];
    // console.log(Seite eingeben)
 
    //Vier Schaltflächen binden homepage.addEventListener('click', () => {
        Homepage();
    });
    letzteSeite.addEventListener('click', () => {
        letzteSeite();
    });
    prevpage.addEventListener('click', () => {
        vorherigeSeite();
    });
    nextpage.addEventListener('klicken', () => {
        nächsteSeite();
    });
    enterpage.addEventListener('click',()=>{
        Seite eingeben();
    })
    //Digitale Schaltflächen binden für (let i=0; i<10; i++){
        element_1[i].addEventListener('klicken',()=>{
            document.getElementsByClassName('jetzt')[0].classList.remove('jetzt');
            document.getElementById('btns').children[i].classList.add('jetzt');
            Anzahl = i+1;
        })
    }
 
    //Hören Sie auf die übergeordnete Bubble-Funktion, steuern Sie den Text im Inhaltsbereich und legen Sie den Button-Status fest btns.addEventListener('click', () => {
        // konsole.log(ZAHL)
 
        wenn (NUM === 1) {
            homepage.disabled = true;
            vorherige Seite.deaktiviert = true;
            letzteSeite.deaktiviert = false;
            nächsteSeite.deaktiviert = falsch;
        }sonst wenn (ZAHL > 1 und ZAHL < 10) {
            homepage.disabled = false;
            vorherige Seite.deaktiviert = false;
            letzteSeite.deaktiviert = false;
            nächsteSeite.deaktiviert = falsch;
        }anders{
            homepage.disabled = false;
            vorherige Seite.deaktiviert = false;
            letzteSeite.deaktiviert = true;
            nächsteSeite.deaktiviert = wahr;
        }
        document.getElementById('eingeben').children[2].innerText = NUM;
        document.getElementById('word').innerText = 'Jetzt ist es das ' + NUM + ' Element';
    });
}
 
//Spezifische Funktionsimplementierung function homePage() {
    document.getElementsByClassName('jetzt')[0].classList.remove('jetzt');
    document.getElementById('btns').children[0].classList.add('jetzt');
    NUM = 1;   
}
 
Funktion letzteSeite() {
    document.getElementsByClassName('jetzt')[0].classList.remove('jetzt');
    document.getElementById('btns').children[9].classList.add('jetzt');
    NUM = 10;
}
 
Funktion nächsteSeite(){
    document.getElementsByClassName('jetzt')[0].classList.remove('jetzt');
    document.getElementById('btns').children[NUM].classList.add('jetzt');
    NUM++;
}
 
Funktion vorherigeSeite(){
    document.getElementsByClassName('jetzt')[0].classList.remove('jetzt');
    document.getElementById('btns').children[NUM-2].classList.add('jetzt');
    Zahl--;
}
 
//Eingabefunktion Implementierungsfunktion enterPage(){
    document.getElementsByClassName('jetzt')[0].classList.remove('jetzt');
    var Seitennummer = parseInt(document.getElementById('enter').children[0].value);
    // console.log(Seitennummer);
    document.getElementById("btns").children[Seitennummer-1].classList.add('jetzt');
    NUM=Seitennummer;
}
 
window.onload = Seite ändern();

Die endgültige Implementierung sieht wie folgt aus

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:
  • Natives JS zum Erzielen eines coolen Paging-Effekts
  • Natives js zum Erzielen eines Paging-Effekts
  • Natives Javascript zum Erzielen eines Paging-Effekts
  • Nativer JS-Seitenanzeigeeffekt (klicken Sie auf die Seitenanzeige, um den Effekt anzuzeigen)
  • Beispielcode zur Implementierung von Paging-Effekten basierend auf nativem JS

<<:  So ändern Sie die Tomcat-Portnummer in Linux

>>:  Analyse des Tutorials zur Implementierung der Remote-Anmeldung unter Linux

Artikel empfehlen

Wir treiben IE6 alleine in den Untergang

Tatsächlich fragen wir uns jeden Tag, wann IE6 wi...

Webdesign-Erfahrung: Effizientes Schreiben von Webcode

Ursprünglich sollte dieses siebte Kapitel eine aus...

So konfigurieren Sie Hexo und GitHub zum Binden eines benutzerdefinierten Domänennamens unter Windows 10

Hexo bindet einen benutzerdefinierten Domänenname...

Der bequemste Weg, einen Zookeeper-Server in der Geschichte zu erstellen (empfohlen)

Was ist ZooKeeper ZooKeeper ist ein Top-Level-Pro...

Praxis der Verwendung von Tinymce Rich Text zum Anpassen von Symbolleistenschaltflächen in Vue

Inhaltsverzeichnis Installieren Sie die Deklarati...

Analyse des zugrunde liegenden Prinzips der MySQL-Mehrversions-Parallelitätskontrolle MVCC

Inhaltsverzeichnis 1 Probleme bei der Transaktion...

Zusammenfassung gängiger Befehle zur Linux-Benutzer- und Gruppenverwaltung

Dieser Artikel fasst die allgemeinen Befehle zur ...

Empfohlene Plugins und Anwendungsbeispiele für Vue-Unit-Tests

Inhaltsverzeichnis rahmen Erstklassiges Fehlerrep...

Fünf Möglichkeiten zum automatischen Seitensprung in HTML

Im vorherigen Artikel haben wir drei gängige Meth...

Einführung des Code-Prüftools stylelint zum Erfahrungsaustausch

Inhaltsverzeichnis Vorwort Text 1. Installieren S...

Detailliertes Tutorial zur Installation des Apache-Quellcodes und zur Konfiguration des virtuellen Hosts

Installieren Sie Apache aus der Quelle 1. Laden S...

Grundlagen der MySQL-Speicher-Engine

Im vorherigen Artikel haben wir über MySQL-Transa...

Detaillierte Erläuterung der MySql-Analyse langsamer Abfragen und Öffnen des Protokolls langsamer Abfragen

Ich habe mich kürzlich auch mit der Leistungsopti...

Bei der Installation von Docker Desktop wird eine Fehlermeldung angezeigt: Die WSL 2-Installation ist unvollständig (Beheben Sie die Fehlermeldung).

Fehlerbeschreibung Wenn wir Docker Desktop instal...

So legen Sie die Schriftfarbe in HTML fest und erhalten mit PS eine genaue Schriftfarbe in HTML

1. HTML-Schriftfarbeneinstellung In HTML verwende...