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

最新推荐文章于 2024-04-18 11:41:43 发布

lOADIN!

最新推荐文章于 2024-04-18 11:41:43 发布

阅读量8.4k

点赞数 3

分类专栏：前端文章标签：前端 html

本文链接：https://blog.csdn.net/qq_51114151/article/details/122826588

版权

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

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

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

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

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

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

<!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(a

最低0.47元/天解锁文章

lOADIN!

关注

3
点赞
踩
47

收藏

觉得还不错? 一键收藏
1
评论
前端利用html实现分页切换效果

本篇文章主要要实现的功能效果如下：包含首页尾页上一页下一页总计的页数以及总计的条数还有跳转的功能整体思想：先定位一个中心页上一页、下一页就是根据定位中心页然后加减就可以实现首页就是要根据一次要展示几页，然后分别展示要展示的页数尾页就是根据总共有的页数进行定位，然后分别展示要展示的页数<!DOCTYPE html><html><head> <meta charset="UTF-8"> <tit..
复制链接

扫一扫