Native JS to implement paging click control

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.
2. You cannot click the home page or previous page on page 1.
3. You cannot click the next page on page 10.
4. Implement a function to jump to page numbers by inputting page numbers.

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:
  • Native JS to achieve cool paging effect
  • Native js to achieve paging effect
  • Native javascript to achieve paging effect
  • Native JS paging display effect (click on the paging to see the effect)
  • Sample code for implementing paging effects based on native JS

<<:  How to change the tomcat port number in Linux

>>:  Linux remote login implementation tutorial analysis

Recommend

MySQL practical skills: analysis of methods to compare whether two tables have different data

This article uses an example to describe how MySQ...

Solutions to MySQL OOM (memory overflow)

OOM stands for "Out Of Memory", which m...

Solution to the error when installing Docker on CentOS version

1. Version Information # cat /etc/system-release ...

Draw an iPhone based on CSS3

Result:Implementation Code html <div class=...

Build a file management system step by step with nginx+FastDFS

Table of contents 1. Introduction to FastDFS 1. I...

Take you to understand MySQL character set settings in 5 minutes

Table of contents 1. Content Overview 2. Concepts...

How to optimize MySQL group by statement

In MySQL, create a new table with three fields, i...

Detailed description of mysql replace into usage

The replace statement is generally similar to ins...

MySQL foreign key setting method example

1. Foreign key setting method 1. In MySQL, in ord...

Detailed explanation of mysql user variables and set statement examples

Table of contents 1 Introduction to user variable...

Vue recursively implements three-level menu

This article example shares the specific code of ...

Vue2.x - Example of using anti-shake and throttling

Table of contents utils: Use in vue: explain: Ima...

PyTorch development environment installation tutorial under Windows

Anaconda Installation Anaconda is a software pack...

Navicat for MySQL scheduled database backup and data recovery details

Database modification or deletion operations may ...

Native javascript+CSS to achieve the effect of carousel

This article uses javascript+CSS to implement the...