分页_牛客题霸

本题展示了一个分页组件，界面中存在id=jsContainer的节点A，系统会随机实例化各种Pagination实例，请按照如下要求补充完成Pagination函数。1、最多连续显示5页，居中高亮显示current页（如demo1所示)2、total 3、如果total4、当current居中不足5页，向后(前)补足5页，隐藏“首页”(“末页”)元素(如demo4和demo5所示)5、total、current均为正整数，1 6、当前界面中，节点A为系统执行 new Pagination(节点A，20, 10) 后的展示效果7、请不要手动修改html和css8、不要使用第三方插件

加载中...

.demo{
    margin-bottom: 20px;
    border: 1px solid #ebedf0;
    border-radius: 2px;
    padding: 10px;
}
.demo div{
    margin-bottom: 10px;
    font-size: 14px;
}

.pagination{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-size: 14px;
    line-height: 1.5;
    list-style: none;
    display: inline-block;
}
.pagination.hide{
    display: none;
}
.pagination li{
    position: relative;
    display: inline-block;
    float: left;
    height: 32px;
    margin: 0;
    padding: 0 15px;
    line-height: 30px;
    background: #fff;
    border: 1px solid #d9d9d9;
    border-top-width: 1.02px;
    border-left: 0;
    cursor: pointer;
    transition: color 0.3s, border-color 0.3s;
}
.pagination li:first-child{
    border-left: 1px solid #d9d9d9;
    border-radius: 4px 0 0 4px;
}
.pagination li:last-child{
    border-radius: 0 4px 4px 0;
}
.pagination li:first-child{
    box-shadow: none !important;
}
.pagination li.current{
    border-color: #1890ff;
    color: #1890ff;
    border-left: 1px solid #1890ff;
}
.pagination li.current:not(:first-child) {
    margin-left: -1px;
}

<div class="demo">
        <div>(Demo1) total: 10，current: 4</div>
        <ul class="pagination">
            <li>首页</li>
            <li>2</li>
            <li>3</li>
            <li class="current">4</li>
            <li>5</li>
            <li>6</li>
            <li>末页</li>
        </ul>
    </div>

<div class="demo">
        <div>(Demo2) total: 0，current: 0</div>
        <ul class="pagination hide"></ul>
    </div>

<div class="demo">
        <div>(Demo3) total: 3，current: 2</div>
        <ul class="pagination">
            <li>1</li>
            <li class="current">2</li>
            <li>3</li>
        </ul>
    </div>

<div class="demo">
        <div>(Demo4) total: 10，current: 2</div>
        <ul class="pagination">
            <li>1</li>
            <li class="current">2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
            <li>末页</li>
        </ul>
    </div>

<div class="demo">
        <div>(Demo5) total: 10，current: 9</div>
        <ul class="pagination">
            <li>首页</li>
            <li>6</li>
            <li>7</li>
            <li>8</li>
            <li class="current">9</li>
            <li>10</li>
        </ul>
    </div>
</div>