分页组件 百度笔试题
<!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
