手撸一份原生js分页代码 (加动态效果图)

代码

 <style>
        *{margin: 0;padding:0;list-style: none;}
        .fl{
            float: left;
        }
        .active{
            background-color: aqua;
        }
        .page{
            overflow: hidden;
            padding: 20px;
            min-width: 300px;
        }
        .page .page-select{
            min-width: 50px;
            margin: 0 10px;
        }
        .page .page-ul{
            display: flex;
            justify-content: space-around;
        }
        .page .page-ul li{
            text-align: center;
            min-width: 20px;
            margin: 0 5px;
            cursor: pointer;
        }
        .page .page-input{
            width: 20px;
            text-align: center;
            margin-left:10px;
        }
        .page .page-pre,
        .page .page-next{
            cursor: pointer;
        }
    </style>

html

<div class="page">
        <span class="page-span fl">共计<i>80</i>页</span>
        <select class="page-select fl" onchange="selsctValue(this[selectedIndex].value)">
            <option value="10" selected="selected">10 /页</option>
            <option value="20">20 /页</option>
            <option value="30">30 /页</option>
        </select>
        <span class="page-pre fl"> < </span>
        <ul class="page-ul fl">
            <li class="active">1</li>
        </ul>
        <span class="page-next fl"> > </span>
        前往<input type="text" value="1" class="page-input" onchange="inputValue(this.value)">页
    </div>

javascript

 var pageTotal=document.querySelector('.page-span>i').innerHTML
        var Ul = document.querySelector('.page-ul')
        var first=document.querySelector('.page-select').options[0].value
        window.onload=function(){
            selsctValue(first)
        }
        function selsctValue(pageSize) {
            document.querySelector('.page-input').value=1
            var pageMum = pageTotal/pageSize
            Ul.innerHTML=''
            liList(pageMum)
            lis()
        }
        function liList(pageMum){
            var takeIntegers = Math.ceil(pageMum)
            for (let i = 1; i <= takeIntegers; i++) {
                var Li = document.createElement("li");
                Li.innerHTML = i;
                Ul.appendChild(Li);
            }
        }
        function lis () {
            var lis = document.querySelectorAll('.page-ul > li')
            lis[0].className='active'
            for (let i = 0; i < lis.length; i++) {
                 lis[i].onclick=function(){
                    lis[i].className='active'
                    siblings(lis[i])
                    document.querySelector('.page-input').value=i+1
                 }
            }
        }
        function siblings(elm){
            var p = elm.parentNode.children; //获取父级的所有子节点
            for(var i = 0; i < p.length; i++){ //循环
                if(p[i].nodeType == 1 && p[i] != elm){ //如果该节点是元素节点与不是这个节点本身
                    p[i].className=''
                }
            }
        }
        document.querySelector('.page-pre').onclick=function(){
            var lis = document.querySelectorAll('.page-ul > li')
            for (let i = 0; i < lis.length; i++) {
                if (lis[i].className == 'active' && lis[i].previousSibling != null) {
                        lis[i].previousSibling.className='active'
                        lis[i].className=""
                }
            }
        }
        document.querySelector('.page-next').onclick=function(){
            var lis = document.querySelectorAll('.page-ul > li')
            for (var i = 0; i < lis.length; i++) {
                if (lis[i].className == 'active' && lis[i].nextSibling != null) {
                    var liPre=lis[i].nextElementSibling
                    lis[i].className=""
                    
                }
            }
            liPre.className='active'
        }
        function inputValue (value) {
            var lis = document.querySelectorAll('.page-ul > li')
            for (var i = 0; i < lis.length; i++) {
                if (lis[i].innerHTML==value) {
                    lis[i].className='active'
                }else{
                    lis[i].className=''
                }
            }
        }