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
Beispielcode zur Implementierung des Seiten-Cachings im Vue-Mobilprojekt
Hintergrund Auf Mobilgeräten ist das Caching zwis...
Detaillierte Erläuterung der Lösung für verstümmelte Zeichen, wenn JDBC eine Verbindung zu MySQL herstellt, um Chinesisch zu verarbeiten
Detaillierte Erläuterung der Lösung für verstümme...
Vergleich der Effizienz der Dateneinfügung in MySQL
Beim Einfügen von Daten stellte ich fest, dass ic...
Vollständige Schritte zum Erstellen eines Passwortgenerators mit Node.js
Inhaltsverzeichnis 1. Vorbereitung 2. Befehlszeil...
4 Möglichkeiten zur Optimierung von MySQL-Abfragen für Millionen von Daten
Inhaltsverzeichnis 1. Der Grund, warum das Limit ...
SVG+CSS3 zum Erzielen eines dynamischen Welleneffekts
Eine Vektorwelle <svg viewBox="0 0 560 20...
Tiefgreifendes Verständnis der angegebenen IE-Browser-Rendering-Methode
<meta http-equiv="X-UA-kompatibel" c...
Designtheorie: Zu den Themen Schema, Ressourcen und Kommunikation
<br />In vielen kleinen Unternehmen besteht ...
Lösung für das Problem, dass Docker CMD/ENTRYPOINT das sh-Skript ausführt: nicht gefunden/run.sh:
Es gibt kein Problem mit der Dockerfile-Konfigura...
So installieren Sie mysql5.6 in Docker unter Ubuntu
1. Installieren Sie mysql5.6 Docker führt MySQL a...
10 Best Practices zum Erstellen und Warten großer Vue.js-Projekte
Inhaltsverzeichnis 1. Nutzen Sie Slots, um Kompon...
Einige Methoden zur Dateiberechtigungsverwaltung unter Linux, die Sie möglicherweise nicht kennen
Warum brauchen wir ein Berechtigungsmanagement? 1...
Tutorial zur grundlegenden Syntax von js und zur Konfiguration von Maven-Projekten
Inhaltsverzeichnis 1. js-Anweisung Zweitens js-Ar...
Zusammenfassung ungewöhnlicher JS-Operationsoperatoren
Inhaltsverzeichnis 2. Komma-Operator 3. JavaScrip...
Abrufen der Erstellungszeit einer Datei unter Linux und ein praktisches Tutorial
Hintergrund Manchmal müssen wir den Erstellungsze...