前端 利用html实现分页切换效果

本篇文章主要要实现的功能效果如下：

包含首页尾页上一页下一页总计的页数以及总计的条数还有跳转的功能

整体思想：先定位一个中心页

上一页、下一页就是根据定位中心页然后加减就可以实现

首页就是要根据一次要展示几页，然后分别展示要展示的页数

尾页就是根据总共有的页数进行定位，然后分别展示要展示的页数

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .st1 {
            height: 60px;
            width: 90%;
            background-color: #ddd;
            margin-left: 5%;
            margin-top: 30px;
        }
        
        .st2 {
            height: 32px;
            width: 60px;
            background-color: #2ac;
            border-radius: 4px;
            margin-left: 6px;
            margin-top: 20px;
            float: left;
            color: #fff;
            text-align: center;
            line-height: 32px;
            font-size: 13px;
        }
        
        .chosed {
            background-color: #a00;
        }
    </style>
</head>

<body>

    <div id="div1" class="st1"></div>

</body>
<script type="text/javascript">
    m1(12, 256, 10); //当前页索引，总页数，每页数量

    function m1(index, allnum, pagesize) {
        var allpage = allnum / pagesize;
        allpage = parseInt(allpage);
        allpage = allnum % 10 > 0 ? allpage + 1 : allpage;
        if (index < 1) index = 1;
        if (index > allpage) index = allpage;
        var x = document.getElementById("div1");
        var h = '<div class="st2" onclick="m1(1,' + allnum + ',' + pagesize + ')">首页</div>';
        h += '<div class="st2" onclick="m1(' + (index - 1) + ',' + allnum + ',' + pagesize + ')">上一页</div>';
        if (index < 3) {
            if (index == 1) {
                h += '<div class="st2 chosed" onclick="m1(1,' + allnum + ',' + pagesize + ')">1</div>';
                h += '<div class="st2" onclick="m1(2,' + allnum + ',' + pagesize + ')">2</div>';
            } else {
                h += '<div class="st2" onclick="m1(1,' + allnum + ',' + pagesize + ')">1</div>';
                h += '<div class="st2 chosed" onclick="m1(2,' + allnum + ',' + pagesize + ')">2</div>';
            }
            h += '<div class="st2" onclick="m1(3,' + allnum + ',' + pagesize + ')">3</div>';
            h += '<div class="st2"onclick="m1(4,' + allnum + ',' + pagesize + ')">4</div>';
            h += '<div class="st2" onclick="m1(5,' + allnum + ',' + pagesize + ')">5</div>';

        }
        if (index >= 3 && index <= (allpage - 2)) {
            h += '<div class="st2" onclick="m1(' + (index - 2) + ',' + allnum + ',' + pagesize + ')">' + (index - 2) + '</div>';
            h += '<div class="st2"onclick="m1(' + (index - 1) + ',' + allnum + ',' + pagesize + ')">' + (index - 1) + '</div>';
            h += '<div class="st2 chosed" onclick="m1(' + index + ',' + allnum + ',' + pagesize + ')">' + index + '</div>';
            h += '<div class="st2" onclick="m1(' + (index + 1) + ',' + allnum + ',' + pagesize + ')">' + (index + 1) + '</div>';
            h += '<div class="st2" onclick="m1(' + (index + 2) + ',' + allnum + ',' + pagesize + ')">' + (index + 2) + '</div>';

        }
        if (index > (allpage - 2)) {
            h += '<div class="st2" onclick="m1(' + (index - 4) + ',' + allnum + ',' + pagesize + ')">' + (index - 4) + '</div>';
            h += '<div class="st2"onclick="m1(' + (index - 3) + ',' + allnum + ',' + pagesize + ')">' + (index - 3) + '</div>';
            h += '<div class="st2" onclick="m1(' + (index - 2) + ',' + allnum + ',' + pagesize + ')">' + (index - 2) + '</div>';
            if (index == allpage) {
                h += '<div class="st2" onclick=" m1(' + (allpage - 1) + ',' + allnum + ',' + pagesize + ')">' + (allpage - 1) + '</div>';
                h += '<div class="st2 chosed" onclick=" m1(' + allpage + ',' + allnum + ',' + pagesize + ')">' + allpage + '</div>';
            } else {
                h += '<div class="st2" onclick=" m1(' + (allpage - 1) + ',' + allnum + ',' + pagesize + ')">' + (allpage - 1) + '</div>';
                h += '<div class="st2 chosed" onclick=" m1(' + allpage + ',' + allnum + ',' + pagesize + ')">' + allpage + '</div>';
            }
        }

        h += '<div class="st2" onclick=" m1(' + (index + 1) + ',' + allnum + ',' + pagesize + ')">下一页</div>';

        h += '<div class="st2" onclick=" m1(' + allpage + ',' + allnum + ',' + pagesize + ')">尾页</div>';
        h += '<div class="st2">共' + allpage + '页</div>';
        h += '<div class="st2">共' + allnum + '条</div>';
        h += '<div class="st2"><input id="pageindex" type="text" style="width:50px;height:26px;border:0px;"> </div>';
        h += '<div class="st2" onclick="gopage(' + allnum + ',' + pagesize + ')">跳转</div>';
        x.innerHTML = h;
    }

    function gopage(allnum, pagesize) {
        var text = document.getElementById("pageindex").value;
        text = parseInt(text);
        m1(text, allnum, pagesize);
    }
</script>

</html>

更多推荐

前端利用html实现分页切换效果