数据分页，带缩进的

最新推荐文章于 2023-06-10 14:58:27 发布

Study 365 Always

最新推荐文章于 2023-06-10 14:58:27 发布

阅读量216

点赞数

本文链接：https://blog.csdn.net/L8676/article/details/100118491

版权

在这里插入图片描述


<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .b1 > ul {
            display: inline-block;
        }

        .b1 > ul > li {
            list-style: none;
            display: inline-block;
            width: 30px;
            height: 30px;
            text-align: center;
            line-height: 30px;
            border: 1px solid silver;
        }

        .b1 > button {
            width: 100px;
            height: 30px;
            border: 1px solid silver;
            background: transparent;
            outline: none;
        }
    </style>
</head>
<body>
<div class="b1">
    <button id="uppage">上一页</button>
    <ul class="menu">
    </ul>
    <button id="downpage">下一页</button>
</div>
<script>
    window.onload = function () {
        var menu = document.getElementsByClassName("menu")[0];
        var nowpage = 1;
        var totlepage = 20;
        menu.innerHTML = showmenu(nowpage, totlepage);
        var downpage = document.getElementById("downpage");
        var uppage = document.getElementById("uppage");
        downpage.onclick = function () {
            nowpage++;
            if (nowpage > totlepage) {
                nowpage = totlepage;
            }
            menu.innerHTML = showmenu(nowpage, totlepage);
        }
        uppage.onclick = function () {
            nowpage--;
            if (nowpage < 1) {
                nowpage = 1;
            }
            menu.innerHTML = showmenu(nowpage, totlepage);
        }
    }
    function showmenu(current, totlepage) {
        var str = "";
        for (var i = 1; i <= totlepage; i++) {
            if (i == 2 && i < current - 5) {
                i = current - 3;
                str += "<li>...</li>";
            }
            else if (i == current + 5 && current + 5 < totlepage) {
                i = totlepage - 1;
                str += "<li>...</li>";
            }
            else {
                if (i == current) {
                    str += "<li style='background: #32bcff;color: #fff;'>" + i + "</li>"
                }
                else {
                    str += "<li>" + i + "</li>"
                }
            }
        }
        return str;
    }
</script>
</body>
</html>

Study 365 Always

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
数据分页，带缩进的

<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <style> * { margin: 0; padding: 0...
复制链接

扫一扫