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

Let's talk about what JavaScript's URL object is

Table of contents Overview Hash Properties Host p...

How to set PATH environment variable in Linux system (3 methods)

1. In Windows system, many software installations...

A brief discussion on front-end production: Is IE6 still necessary for compatibility?

The domestic market still has a certain demand fo...

Implementing a table scrolling carousel effect through CSS animation

An application of CSS animation, with the same co...

Detailed description of shallow copy and deep copy in js

Table of contents 1. js memory 2. Assignment 3. S...

Add crontab scheduled tasks to debian docker container

Now most of the Docker images are based on Debian...

Implementation example of Docker rocketmq deployment

Table of contents Preparation Deployment process ...

Vue implements the sample code of associating the side navigation bar with the Tab page

Table of contents Technology Stack Effect analyze...

Detailed explanation of storage engine in MySQL

MySQL storage engine overview What is a storage e...

Implementation of react automatic construction routing

Table of contents sequence 1. Centralized routing...

Why MySQL does not recommend deleting data

Table of contents Preface InnoDB storage architec...

Detailed explanation of firewall rule settings and commands (whitelist settings)

1. Set firewall rules Example 1: Expose port 8080...

js implements a simple calculator

Use native js to implement a simple calculator (w...

XHTML introductory tutorial: Application of table tags

<br />Table is an awkward tag in XHTML, so y...

Detailed explanation of MySQL using profile to analyze slow SQL (group left join is more efficient than subquery)

Use profile to analyze slow SQL The main purpose ...