|
分页组件是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
/*
思路: 以current为轴点，用一个数组保存7个li对应的状态 -1,0皆为不显示 num>1显示对应的数字 但是需要判判断是否是 第一个（首页） 最后一个（末页），这两个只有当对应num大于0才显示，否则隐藏 首先 我们应该确定右边界 maxRight [...,current,...],a[current]为current节点的值 total-current可以判断出右边还有多少大于2的话末页就可以显示否则右边界应该是 total-current+1 考虑一种情况，当current是小于等于2的，那么current右边的数量是应该增加的 if(current<=2 && maxRight+1<total){ maxRight+=3-current; } 情况考虑完毕，先从current向右走var i = 1 ; i <= maxRight ; i++； 同理向左走一次走完那么至少是左边都是完整的，当然我们应该过滤掉empty，因为我们是从a[current]开始左右走的， 包括首页的控制变量 但是右边是不一定的，因为total是可能小于7的，但我们可以确定的是剩下的一定是不能显示的，所以 a = a.filter(function(a){ return a>=-1; }) //填充7个 while(a.length<7){ a[a.length]=-1; } 至此，遍历这个数组 我们就可以对应的去渲染了
*/
var pag = document.getElementById("jsPagination"),
pageLis = pag.children.pageNum;
function pagination(total, current) {
if(total==0 || current>total){
hide(pag);
return;
}
show(pag);
var a = [],count=0;
a[current] = current;
maxRight = total-current>2?3:total-current+1;
if(current<=2 && maxRight+1<total){
maxRight+=3-current;
}
//向右走
for(var i = 1 ; i <= maxRight ; i++){
if(current+i<=total){
a[current+i] = current+i;
}
else{
a[current+i] = -1;
}
}
//向左走
for(var i = 1 ; i <= 5-maxRight+1 ; i++){
if(current-i>=0){
a[current-i] = current-i;
}
}
//过滤empty
a = a.filter(function(a){
return a>=-1;
})
//填充7个
while(a.length<7){
a[a.length]=-1;
}
render({list:a,current:current});
}
// render(pagination(3,2));
function render(data){
var a = data.list,
current = data.current,
last = a.length-1;
a.forEach(function(num,i){ //遍历一次数组，对dom操作
if(num>0){
if(i>0 && i!=0 && i!=6)
pageLis[i].innerHTML = num;
if(num==current){
activeLi(pageLis[i])
}else{
noActiveLi(pageLis[i])
}
show(pageLis[i]);
}
else{
hide(pageLis[i]);
noActiveLi(pageLis[i])
}
})
}
function noActiveLi(el){
el.classList.remove("current");
}
function activeLi(el){
el.classList.add("current");
}
function hide(el){
el.classList.add("hide");
}
function show(el){
el.classList.remove("hide");
}
| 
转播
