原生JS实现分页点击控件

更新时间：2021年08月20日 13:18:41 作者：吸猫一时爽

这篇文章主要为大家详细介绍了原生JS实现分页点击控件，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

这是一个面试题，要求使用原生JS实现一个分页点击控件，供大家参考，具体内容如下

1、点击首页、上一页、下一页和末页要实现相应的数字编号变红。
2、在页数1 不能够点击首页和上一页。
3、在页数10不能够点击下一页。
4、实现一个input输入页数跳转页码功能。

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">首页</button></li>
                    <li><button id="prev" disabled="true">上一页</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">下一页</button></li>
                    <li><button id="lastPage">末页</button></li>
                    <li id ="enter"><input type="number" value="1" min="1" max="10">
                        <button>确定</button>
                        第<span>1</span>页</li>
                </ul>
            </div>
        </div>
    </section>
    <footer>This is a footer</footer>
    <script src="js/page.js"></script>
</body>
</html>

JavaScript

let NUM = 1;
 
//主函数,绑定事件
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)
 
    //绑定四个按钮
    homepage.addEventListener('click', () => {
        homePage();
    });
    lastpage.addEventListener('click', () => {
        lastPage();
    });
    prevpage.addEventListener('click', () => {
        prevPage();
    });
    nextpage.addEventListener('click', () => {
        nextPage();
    });
    enterpage.addEventListener('click',()=>{
        enterPage();
    })
    //绑定数字按钮
    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;
        })
    }
 
    //监听父级冒泡函数,控制显示内容区文字及设置按钮状态
    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';
    });
}
 
//具体函数实现
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 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();

最后实现后如下图

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

微信小程序获取用户头像昵称组件封装实例(最新版)
我们在进行小程序开发的时候,往往需要获取微信用户的部分个人信息,常见的有用户头像,昵称等,下面这篇文章主要给大家介绍了关于微信小程序获取用户头像昵称组件封装的相关资料,需要的朋友可以参考下
2022-12-12
微信小程序实现多列选择器
这篇文章主要为大家详细介绍了微信小程序实现多列选择器，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-07-07
JS作用域闭包、预解释和this关键字综合实例解析
这篇文章主要介绍了JS作用域闭包、预解释和this关键字,结合实例形式分析了javascript作用域闭包、预解释和this关键字在具体使用过程中的操作技巧与注意事项,需要的朋友可以参考下
2016-12-12
微信小程序开发中所碰到问题集锦
这篇文章主要介绍了微信小程序开发中所碰到问题集锦，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习吧
2023-01-01
浏览器检测JS代码(兼容目前各大主流浏览器)
这篇文章主要介绍了浏览器检测JS代码，兼容目前各大主流浏览器，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2016-02-02
TS中type和interface的区别解析
对于type来说，更多的是对类型的一种复用，比如在项目中需要用到一些比较复杂的或者书写起来很长的类型，而对于 interface来说，它是正儿八经的用来定义接口类型（约束数类型和属性）的，且接口类型是支持继承和声明合并的，感兴趣的朋友跟随小编一起看看吧
2023-07-07
200行代码实现blockchain 区块链实例详解
这篇文章主要介绍了200行代码实现blockchain 区块链的相关知识，非常不错，具有参考借鉴价值，需要的朋友参考下吧
2018-03-03
关于iframe跨域POST提交的方法示例
这篇文章主要给大家介绍了关于iframe跨域POST提交的相关资料,文中给出了详细的介绍与示例代码，相信对大家的学习或者工作具有一定的参考借鉴价值，需要的朋友可以一起来学习学习。
2017-01-01
纯JS实现简单的日历
这篇文章主要为大家详细介绍了纯JS实现简单日历的的相关代码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-06-06
JavaScript中split() 使用方法汇总
本文向大家重点讲解一下Javascript中split函数使用，它可以将一个字符串分割为子字符串，然后将结果作为字符串数组返回，相信本文介绍你对split函数的用法有明确的认识。
2015-04-04

原生JS实现分页点击控件

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具