Native JS to implement paging click control
|
This is an interview question, which requires the use of native JS to implement a paging click control. For your reference, the specific content is as follows 1. Click the home page, previous page, next page and last page to make the corresponding digital numbers turn red. HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Page</title>
<style>
*{
margin: 0px;
list-style-type: none;
}
header,footer,section{
box-sizing: border-box;
text-align: center;
padding: 5px;
}
header,footer{
background-color: aquamarine;
font-size: 25px;
}
#content{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
flex-wrap: nowrap;
height: 500px;
background-color: antiquewhite;
}
.content{
border: 1px dotted saddlebrown;
min-width: 700px;
min-height: 440px;
background-color: darkcyan;
}
#changePage li{
display: inline-block;
}
.now{
color:red;
}
.hide{
display: hidden
}
</style>
</head>
<body>
<header>This is a header</header>
<section>
<div id="content">
<h2>This is a content</h2>
<div class="content">
<p>This is some content</p>
<p id="word"></p>
</div>
<div id="changePage">
<ul>
<li><button id="homePage" disabled="true">Home</button></li>
<li><button id="prev" disabled="true">Previous page</button></li>
<li id="btns">
<button class="now">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">Next page</button></li>
<li><button id="lastPage">Last Page</button></li>
<li id ="enter"><input type="number" value="1" min="1" max="10">
<button>OK</button>
Page <span>1</span>
</ul>
</div>
</div>
</section>
<footer>This is a footer</footer>
<script src="js/page.js"></script>
</body>
</html>JavaScript
let NUM = 1;
//Main function, bind event function changepage() {
let btns = document.getElementById('changePage');
let element_1 = document.getElementById('btns').children;
// console.log(element_1)
let homepage = document.getElementById('homePage');
let lastpage = document.getElementById('lastPage');
let prevpage = document.getElementById('prev');
let nextpage = document.getElementById('next');
let enterpage = document.getElementById('enter').children[1];
// console.log(enterpage)
//Bind four buttons homepage.addEventListener('click', () => {
homePage();
});
lastpage.addEventListener('click', () => {
lastPage();
});
prevpage.addEventListener('click', () => {
prevPage();
});
nextpage.addEventListener('click', () => {
nextPage();
});
enterpage.addEventListener('click',()=>{
enterPage();
})
//Bind digital buttons for (let i=0; i<10; i++){
element_1[i].addEventListener('click',()=>{
document.getElementsByClassName('now')[0].classList.remove('now');
document.getElementById('btns').children[i].classList.add('now');
NUM = i+1;
})
}
//Listen to the parent bubble function, control the text in the content area and set the button status btns.addEventListener('click', () => {
// console.log(NUM)
if (NUM === 1) {
homepage.disabled = true;
prevpage.disabled = true;
lastpage.disabled = false;
nextpage.disabled = false;
}else if (NUM > 1 && NUM < 10 ) {
homepage.disabled = false;
prevpage.disabled = false;
lastpage.disabled = false;
nextpage.disabled = false;
}else{
homepage.disabled = false;
prevpage.disabled = false;
lastpage.disabled = true;
nextpage.disabled = true;
}
document.getElementById('enter').children[2].innerText = NUM;
document.getElementById('word').innerText = 'Now it is the ' + NUM + ' Element';
});
}
//Specific function implementation function homePage() {
document.getElementsByClassName('now')[0].classList.remove('now');
document.getElementById('btns').children[0].classList.add('now');
NUM = 1;
}
function lastPage() {
document.getElementsByClassName('now')[0].classList.remove('now');
document.getElementById('btns').children[9].classList.add('now');
NUM = 10;
}
function nextPage(){
document.getElementsByClassName('now')[0].classList.remove('now');
document.getElementById('btns').children[NUM].classList.add('now');
NUM++;
}
function prevPage(){
document.getElementsByClassName('now')[0].classList.remove('now');
document.getElementById('btns').children[NUM-2].classList.add('now');
NUM--;
}
//input function implementation function enterPage(){
document.getElementsByClassName('now')[0].classList.remove('now');
var page_number = parseInt(document.getElementById('enter').children[0].value);
// console.log(page_number);
document.getElementById("btns").children[page_number-1].classList.add('now');
NUM=page_number;
}
window.onload = changepage();The final implementation is as follows
The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM. You may also be interested in:
|
<<: How to change the tomcat port number in Linux
>>: Linux remote login implementation tutorial analysis
Recommend
Implementation of react automatic construction routing
Table of contents sequence 1. Centralized routing...
MySQL learning summary: a preliminary understanding of the architectural design of the InnoDB storage engine
1. Storage Engine In the last section, we mention...
Several ways to remove the dotted box that appears when clicking a link
Here are a few ways to remove it: Add the link dir...
Add and delete table information using javascript
Getting Started with JavaScript JavaScript is a l...
The actual process of encapsulating axios in the project
Table of contents Preface Benefits of axios encap...
Use the sed command to modify the kv configuration file in Linux
sed is a character stream editor under Unix, that...
Introduction to the use of this in HTML tags
For example: Copy code The code is as follows: <...
Getting Started Tutorial on Animating SVG Path Strokes Using CSS3
Without relying on JavaScript, pure CSS is used t...
A practical record of an accident caused by MySQL startup
Table of contents background How to determine whe...
WeChat Mini Program user authorization to obtain mobile phone number (getPhoneNumber)
Preface The mini program has a very convenient AP...
A brief understanding of the three uses of standard SQL update statements
1. Environment: MySQL-5.0.41-win32 Windows XP Pro...
10 reasons why Linux is becoming more and more popular
Linux has been loved by more and more users. Why ...
Detailed explanation of the use of Vue Smooth DnD, a draggable component of Vue
Table of contents Introduction and Demo API: Cont...
XHTML introductory tutorial: Use of list tags
Lists are used to list a series of similar or rela...
Solution to the lack of my.ini file in MySQL 5.7
What is my.ini? my.ini is the configuration file ...