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. 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:
|
<<: So ändern Sie die Tomcat-Portnummer in Linux
>>: Analyse des Tutorials zur Implementierung der Remote-Anmeldung unter Linux
Artikel empfehlen
MySQL-langsame Abfrage pt-query-digest Analyse des langsamen Abfrageprotokolls
1. Einleitung pt-query-digest ist ein Tool zum An...
So lässt man in CSS die Höhe eines untergeordneten Divs den verbleibenden Platz des übergeordneten Containers ausfüllen
1. Verwenden Sie die Floating-Methode Effektbild:...
Detailliertes Verständnis des Lebenszyklusvergleichs zwischen Vue2 und Vue3
Inhaltsverzeichnis Zyklusvergleich Verwendung Zus...
Eine kurze Diskussion über die Platzierung von Skripten in HTML
Früher dachte ich, dass Skripte überall in HTML p...
Erläuterung der MySQL-Leistungsprüfung durch den Befehl „show processlist“
Der Befehl „show processlist“ ist sehr nützlich. ...
JavaScript-Grundlagen: Funktion zur sofortigen Ausführung
Inhaltsverzeichnis Funktionsformat sofort ausführ...
Detaillierte Erläuterung nativer Javascript-Vererbungsmethoden und ihrer Vor- und Nachteile
Inhaltsverzeichnis Vorwort Prototypische Vererbun...
HTML-Tutorial, leicht zu erlernende HTML-Sprache
1. <body background=Bilddateiname bgcolor=Farb...
Zeichnen Sie den Verbindungsvorgang mit der lokalen virtuellen Linux-Maschine über SSH auf
Experimentelle Umgebung: Physische Maschine Windo...
Detaillierte Analyse des MySQL-Datentyps DECIMAL
Vorwort: Wenn wir Dezimalzahlen speichern müssen ...
So verwenden Sie Gitlab-ci zur kontinuierlichen Bereitstellung auf Remotecomputern (ausführliches Tutorial)
Kurz gesagt, heute sprechen wir über die Verwendu...
So verwenden Sie JavaScript und CSS richtig in XHTML-Dokumenten
Auf immer mehr Websites wird HTML4 durch XHTML ers...
So installieren Sie OpenJDK in Docker und führen das JAR-Paket aus
Bild herunterladen Docker-Pull OpenJDK Erstellen ...
Eine kurze Diskussion über zwei Methoden zum Erreichen einer halbtransparenten Hintergrundfarbe in CSS
Um den Benutzern beim Layouten der Seite einen an...
So verhindern Sie, dass Website-Inhalte in Suchmaschinen aufgenommen werden
Normalerweise besteht das Ziel beim Erstellen ein...