分页效果

最新推荐文章于 2021-06-10 16:51:24 发布

王武顺

最新推荐文章于 2021-06-10 16:51:24 发布

阅读量343

点赞数 1

分类专栏： js常用例子文章标签：分页

本文链接：https://blog.csdn.net/wangwushun/article/details/50688193

版权

js常用例子专栏收录该内容

8 篇文章 0 订阅

订阅专栏

在网上发现了许多的分页效果，就自己研究总结下

分析

*主要的思路是：假设以10页为分界线，10页以下就不出现”…”,10页以上出现“…”；
主要分两种不同的情况:
10页以下容易写出来；
10页以上又要分3种不同的情况，第一种情况是当前页在靠近左侧的时候，第二种情况是当前页在中间的时候，第三种情况是当前页在右侧的时候；*

代码

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>分页JS代码</title>
<style type="text/css">
.page{}
.page span{text-decoration:none;display:inline-block;line-height:14px;padding:2px 5px;color:#333;border:1px solid #ccc;margin:0 2px;}
.page a{text-decoration:none;display:inline-block;line-height:14px;padding:2px 5px;color:#333;border:1px solid #ccc;margin:0 2px;}
.page a:hover,.page a.on{background:#999;color:#fff;border:1px solid #333;}
.page a.unclick,.page a.unclick:hover{background:none;border:1px solid #eee;color:#999;cursor:default;}
</style>
</head>
<body>
<div class="page"></div>
<div class="page"></div>
</body>
<script type="text/javascript">
    //container 容器，count 总页数 pageindex 当前页数
    //总页面大于10的时候， 出现...
    function setPage (container, count, pageindex) {
        var container=container;
        var count=count;
        var pageindex=pageindex;
        var a = [];

        if (pageindex == 1) {
            //当前页在1的时候，上一页按钮是灰色状态
            a[a.length] = '<a href="#" class="prev unclick">上页</a>';

        }else{
            //当前页在1的时候，上一页按钮是正常状态
            a[a.length] ='<span>首页</span><a href="#" class="prev">上页</a>';
        }
        //加载a按钮标签
        function setPageList () {
            if (i==pageindex) {
                a[a.length]='<a href="#" class="on">'+i+'</a>';
            } else{
                a[a.length]='<a href="#">'+i+'</a>';
            }
        }
        if (count<=10) {
            //总页数小于等于10的情况
            for (var i=1;i<=count;i++) {
                setPageList();
            }
        } else{
            //总页面大于10的情况；
            if (pageindex<=4) {
                //在左边；
                for (var i=1;i<=5;i++) {
                    setPageList();
                }
                a[a.length]='...<a href="#">'+count+'</a>';
            } else if(pageindex>=count-3){
                //在右边；
                a[a.length]='<a href="#">1</a>...';
                for (var i=count-4;i<=count;i++) {
                    setPageList();
                }
            }else{
                //在中间；
                a[a.length]='<a href="#">1</a>...';

                for (var i=pageindex-2;i<=pageindex+2;i++) {
                    setPageList();
                }
                a[a.length]='...<a href="#">'+count+'</a>';
            }


        }
        //当前按钮在右边的时候
        if (pageindex == count) {
            a[a.length]='<a href="#" class="next unclick">下页</a>';

        } else{
            a[a.length]='<a href="#" class="next">下页</a><span>尾页</span>';
        }
        container.innerHTML=a.join("");

        var aAlink = container.getElementsByTagName('a');
        var inx=pageindex;
        //点击上一页的时候；
        aAlink[0].onclick = function  () {
            if (inx==1) {
                return false;
            }
            inx--;
            setPage(container,count,inx);
            return false;
        }
        //点击下一页的时候；
        aAlink[aAlink.length-1].onclick=function(){
            if (inx==count) {
                return false;
            }
            inx++;
            setPage(container,count,inx);
            return false;
        }
        //点击页数的时候
        for (var i=1;i< aAlink.length-1; i++) {
            aAlink[i].onclick=function () {
                inx=parseInt(this.innerHTML);
                setPage(container,count,inx)
                return false;
            }
        }

    }

    setPage(document.getElementsByTagName('div')[0],10,10);
    setPage(document.getElementsByTagName('div')[1],20,20);

</script>
</html>