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

Detailed explanation of common Docker commands

1. Help Command 1. View the current Docker versio...

The website is grayed out. Compatible code including images supports all browsers

Generally, on national days of mourning, days of ...

How to reset the password if the Ubuntu 18.04 server password is forgotten or tampered with

Recently, two accounts on the server were hacked ...

Detailed explanation of the usage of sync modifier in Vue3 parent-child component parameter transfer

Table of contents One-way data flow explanation V...

Some problems you may encounter when installing MySQL

Question 1: When entering net start mysql during ...

Detailed comparison of Ember.js and Vue.js

Table of contents Overview Why choose a framework...

Regarding the problem of using webpack instructions in vscode showing "Because running scripts is prohibited in this system" (perfect solution)

When learning Vue, when I always use webpack inst...

Interpreting MySQL client and server protocols

Table of contents MySQL Client/Server Protocol If...

Writing a shell script in Ubuntu to start automatically at boot (recommended)

The purpose of writing scripts is to avoid having...

mysql add, delete, modify and query basic statements

grammar Here is the generic SQL syntax for INSERT...

React mouse multi-selection function configuration method

Generally, lists have selection functions, and si...

Detailed explanation of the 8 attribute values ​​of the background attribute (interview question)

The value of the background property in CSS backg...

CentOS7 uses rpm package to install mysql 5.7.18

illustrate This article was written on 2017-05-20...

How to use stored procedures in MySQL to quickly generate 1 million records

Preface When testing, in order to test the projec...

Angular performance optimization: third-party components and lazy loading technology

Table of contents Overview Environment Preparatio...