js手写分页功能分享

最新推荐文章于 2024-05-03 15:43:47 发布

一个小人儿

最新推荐文章于 2024-05-03 15:43:47 发布

阅读量404

点赞数

分类专栏：小白分享

本文链接：https://blog.csdn.net/Ajax_A/article/details/105240302

版权

小白分享专栏收录该内容

29 篇文章 1 订阅

订阅专栏

在面试当中遇到有手写分页功能的实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        ul{
            list-style: none;
            display: flex;
        }
        /* ul::before{
            cont
        } */
        ul li{
            border:solid 3px #f0f0f0;
            margin: 0 10px;
            width:30px;
            line-height: 30px;
            text-align: center;
            transition: .5s;
            cursor: pointer;
        }
        ul li:hover{
            background-color: blue;
            color: white;
        }
        .active{
            background: blue;
            color: white;
        }
    </style>
</head>
<body>
    <ul>
        <li class="active">0</li>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
 
    </ul>
    <script>
        var lis = document.querySelectorAll("ul li");
        for(var i = 0;i<lis.length;i++){
            // (function(){
                lis[i].index = i;
                lis[i].onclick=function(){
                    if(lis[this.index].innerHTML>1){
                        lis[Math.floor(lis.length/2)].innerHTML = lis[this.index].innerHTML;
                        for(var s = 0;s<lis.length - 1;s++){
                            lis[s].classList.remove("active");
                        }
                        lis[Math.floor(lis.length/2)].classList.add("active")
                        // if(i)
                        var o = 0;
                        for(var j = lis.length-1;j>=0;j--){
                           
                            if(j < Math.floor(lis.length/2)){
                                o++
                                lis[j].innerHTML = lis[Math.floor(lis.length/2)].innerHTML -o
                            }else if(j > Math.floor(lis.length/2)){
                                lis[j].innerHTML = lis[Math.floor(lis.length/2)].innerHTML * 1 + (j - Math.floor(lis.length/2))
                            }
                        }
                    }else{
                        for(var s = 0;s<lis.length - 1;s++){
                            lis[s].classList.remove("active");
                        }
                        lis[this.index].classList.add("active");
                       
                    }
                    // console.log(this.index)
                    // // console.log(i)
                }
            // })(i)
        }
    </script>
</body>
</html>