分页组件_牛客题霸

分页组件是web开发中常见的组件，请完成pagination函数，在id为jsPagination的DOM元素中完成分页的显示部分，需求如下1、最多连续显示5页，居中高亮显示current页（如demo1所示)2、total为0时，隐藏整个元素（如demo2所示）3、如果total4、当current居中不足5页，向后(前)补足5页，隐藏“首页”(“末页”)元素(如demo4和demo5所示)5、total、current均为正整数，1 = current = total

加载中...

<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">
        <li>首页</li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li>末页</li>
    </ul>
</div>

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

<div class="demo">
    <div>(Demo4) total: 10，current: 2</div>
    <ul class="pagination">
        <li class="hide">首页</li>
        <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>
        <li class="hide">末页</li>
    </ul>
</div>