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

Details zur zugrundeliegenden Datenstruktur von MySQL-Indizes

Inhaltsverzeichnis 1. Indextyp 1. B+ Baum 2. Was ...

JS realisiert den Effekt des Bildwasserfallflusses

In diesem Artikel wird der spezifische JS-Code zu...

Analysieren von AB-Leistungstestergebnissen unter Apache

Ich habe immer Loadrunner für Leistungstests verw...

Informationen zum Vue-Komponentenwechsel, dynamischen Komponenten und Komponenten-Caching

Inhaltsverzeichnis 1. Komponentenwechselmethode M...

Detaillierte Erläuterung der Nginx-Optimierung in Szenarien mit hoher Parallelität

Bei täglichen Betriebs- und Wartungsarbeiten werd...

Verwendung des Linux-Crontab-Befehls

1. Befehlseinführung Der Befehl contab (Cron-Tabe...

Beispielcode zum gleichmäßigen Verteilen von Elementen mithilfe des CSS3-Flex-Layouts

In diesem Artikel wird hauptsächlich erläutert, w...

Der Designprozess des Logos zum Mittherbstfest von Alibaba in Kombination mit der Website

<br />Denken Sie zuerst an die Idee, zeichne...

Auswahl der Groß-/Kleinschreibung von MySQL-Tabellennamen

Inhaltsverzeichnis 1. Parameter, die die Groß-/Kl...

So stellen Sie ein Linux-System automatisch mit PXE bereit

Inhaltsverzeichnis Hintergrund DHCP konfigurieren...

Responsive Webdesign lernen (1) - Bildschirmgrösse und prozentuale Nutzung bestimmen

Heutzutage erfreuen sich mobile Geräte immer größ...

So legen Sie die UTF-8-Kodierung in einer MySQL-Datenbank fest

Ändern Sie die Datei /etc/my.cnf oder /etc/mysql/...

Grafisches Tutorial zur Installation und Konfiguration von Win32 MySQL 5.7.27

Das Installationstutorial für MySQL 5.7.27 wird w...

So ändern Sie schnell das Root-Passwort unter CentOS8

Starten Sie die virtuelle Centos8-Maschine und dr...

CSS3-Animation – Erläuterung der Funktion „Steps“

Als ich mir in letzter Zeit einige CSS3-Animation...