分页（示例有待改进有好建议，欢迎提出）

最新推荐文章于 2021-03-29 23:44:44 发布

苍狼笑月

最新推荐文章于 2021-03-29 23:44:44 发布

阅读量237

点赞数

分类专栏： js

本文链接：https://blog.csdn.net/qq_23329541/article/details/78066971

版权

js 专栏收录该内容

20 篇文章 0 订阅

订阅专栏

<!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>Document</title>
    <style>
        ul{overflow: hidden;height: 44px}
        li{float: left;list-style: none}
    .prepage,.nextpage,li, span{
        padding: 10px;
    }
    .prepage,.nextpage, span{`这里写代码片`
        padding: 10px;
        border: 1px solid #ccc;
    }


    .on{background-color: #000;color: #fff}
    </style>
</head>
<body>
    <ul>
        <li class="prepage">上一页</li>
        <li>
           <div class="pagenumber">
               <span data-index='1' data-pagenumber='1'>1</span>
               <span data-index='2' data-pagenumber='2'>2</span>
               <span data-index='3' data-pagenumber='3'>3</span>
               <span data-index='4'  data-pagenumber='4'>4</span>
               <span data-index='5' data-pagenumber='5'>5</span>
               <span data-index='6' data-pagenumber='6'>6</span>
               <span data-index='7' data-pagenumber='7'>7</span>
               <span data-index='8' data-pagenumber='...'>...</span>
               <span data-index='9' data-pagenumber='15'>15</span>
           </div>
        </li>
        <li class="nextpage">下一页</li>
        <li></li>
        <li></li>
    </ul>
    <script>
        let pageinfo={
            currentpage:1,
            totalpage:15,
            boxIndex:0,
            oldpage:1
        }
       var prepage = document.getElementsByClassName('prepage')[0],
       nextpage = document.getElementsByClassName('nextpage')[0],
       pagenumber = document.getElementsByClassName('pagenumber')[0],
       //伪数组转数组  方面后面使用
       spanAll =  Array.prototype.slice.call(pagenumber.getElementsByTagName('span'));
    //    console.log(spanAll instanceof Array)
       spanAll[0].className='on';
       prepage.onclick=function(){
           console.log('pre')
        changepage(0)
       }
       nextpage.onclick=function(){
        console.log('next');
        changepage(1)
       };
       //输入数值改变  数列号位置
       function changepage(number){
           var x = number==0?-1:number;
        //    if(pageinfo.currentpage==1){return}
            let preSpan= spanAll.filter((item,index)=>{
                return item.getAttribute('data-pagenumber')==pageinfo.currentpage-0+x;
            })
           //console.log(preSpan);
           preSpan[0]&&preSpan[0].click()
       }
       //添加监听
       pagenumber.addEventListener('click',(e)=>{
        if(isNaN(e.target.innerHTML)){
            return
        }
        pageinfo.currentpage=e.target.innerHTML;
        // console.log(e.target);
        e.preventDefault();
        document.getElementsByClassName('on')[0].className='';

        console.log(e.target.getAttribute('data-index'))
        pageinfo.boxIndex=e.target.getAttribute('data-index');
        pageinfo.oldpage = pageinfo.currentpage ;

        // console.log(spanAll instanceof Array)
        var span = {},startNumber=0;
       //遍历sapnall 并且重新赋值
        spanAll.map((item,index)=>{
        //前四个
            if( pageinfo.currentpage<4){
                    span=e.target;
                return
            }else if(pageinfo.currentpage>pageinfo.totalpage-5 && pageinfo.totalpage>9){
                span=e.target;
                // console.log('大')
                startNumber =pageinfo.totalpage-8+index;
                return
             }else if(index<7){
                span=spanAll[3]
                // console.log('小')
               // if(isNaN(pageinfo.currentpage-3+index) ){debugger}
                startNumber =pageinfo.currentpage-3+index;
                spanAll[7].innerHTML='...'
            }
        })
        item.setAttribute('data-pagenumber',startNumber)
        item.innerHTML=''+startNumber;
        span.className='on';
       })

    </script>
</body>
</html>