分页组件百度笔试题



<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .hide{
            display: none!important;
        }
        .pagination{
            margin: 0 auto;
            padding: 0;
            list-style: none;
            text-align: center;
        }
        .pagination li{
            display: inline-block;
            width: 30px;
            height: 30px;
            overflow: hidden;
            line-height: 30px;
            margin: 0 5px 0 0;
            font-size: 14px;
            text-align: center;
            border: 1px solid #00bc9b;
            color: #00bc9b;
            cursor: pointer;
        }
        .pagination li.current,
        .pagination li:hover{
            background: #00bc9b;
            color: #ffffff;
        }
        .demo {
            margin: 10px 0;
            padding: 10px;
            background: #eeeeee;
            text-align: center;
        }
    </style>
</head>
<body>
<ul class="pagination" id="jsPagination">
    <li>首页</li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li>末页</li>
</ul>
</body>
<script>
    //分成四种情况：只有首页；只有末页；首页末页都有；首页末页都没有
    function pagination(total, current) {
        var wrapper = document.getElementById('jsPagination'),
            liList = wrapper.children;
        if(total == 0){ //demo2
            wrapper.className = 'hide';
        }else if(total <= 5){ //demo3 首页末页都没有
            liList[0].className = 'hide';
            liList[6].className = 'hide';
            for(var i=1;i<=5;i++){
                liList[i].innerHTML = i;
                if(i == current){
                    liList[i].className = 'current';
                }
                if(i>total){
                    liList[i].className = 'hide';
                }
            }
        }else{ //total>5
            if(current<=3){ //这时没有首页 只有尾页 demo4
                liList[0].className = 'hide';
                for(var i=1;i<=5;i++){
                    liList[i].innerHTML = i;
                    if(i == current){
                        liList[i].className = 'current';
                    }
                }
            }else{//这时有首页
                if(current+2>=total){//没有末页  demo5
                    liList[6].className = 'hide';
                    for(var i=5;i>0;i--){
                        liList[i].innerHTML = total;
                        if(total == current){
                            liList[i].className = 'current';
                        }
                        total--;
                    }
                }else{//也有末页 demo1
                    var start = current-2;
                    for(var i=1;i<=5;i++){
                        liList[i].innerHTML = start;
                        if(start == current){
                            liList[i].className = 'current';
                        }
                        start++;
                    }
                }
            }
        }
    }
    pagination(10,5);
</script>
</html>

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

相关阅读:
设计模式学习（十二）责任链模式
 设计模式学习（十一）享元模式
 设计模式学习（十）外观模式
 设计模式学习（九）装饰模式
 设计模式学习（八）组合模式
 设计模式学习（七）桥接模式
 设计模式学习（六）代理模式
 设计模式学习（五）适配器模式
 设计模式学习（四）原型模型
 设计模式（三）建造者模式
原文地址：https://www.cnblogs.com/lihuijuan/p/9323204.html

分页组件 百度笔试题

分页组件百度笔试题