JavaScript分页组件使用方法详解

第JavaScript分页组件使用方法详解分页组件是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

用原生JS实现分页组件，实现上述需求。需要注意下面几点

1：在获取li标签的时候，由于上一个li标签与下一个li标签之前存在文本节点，需要两次使用nextSibling，

page=page.nextSibling.nextSibling;

2：提供的li标签的innerHTML为‘'，需要在其中添加页码，根据需求中的五种情况写

3：特别注意首页、末页的隐藏情况。当current-2=1时隐藏首页，当current+2.=total隐藏末页,需要隐藏首页、末页存在于上述demo1、demo3、demo4、demo5。（其中demo1首页、末页的隐藏很容易被忽略掉！）

HTML

ulid="jsPagination"

li首页/li

li/li

li/li

li/li

li/li

li/li

li末页/li

/ul

css

.hide{

display:none!important;

.pagination{

margin:0auto;

padding:0;

list-style:none;

text-align:center;

.paginationli{

display:inline-block;

width:30px;

height:30px;

overflow:hidden;

line-height:30px;

margin:05px00;

font-size:14px;

text-align:center;

border:1pxsolid#00bc9b;

color:#00bc9b;

cursor:pointer;

.paginationli.current,

.paginationli:hover{

background:#00bc9b;

color:#ffffff;

.demo{

margin:10px0;

padding:10px;

background:#eeeeee;

text-align:center;

}

JavaScript

functionpagination(total,current){

varele=document.getElementById('jsPagination');

//fordemo1

if(current-2=1¤t+2=total)

varpage=ele.firstChild.nextSibling;

if(current-2==1)

page.className='hide';

for(vari=current-2,p=current-2;i=current+2;p++,i++)

page=page.nextSibling;

console.log(page);

page=page.nextSibling;

console.log(page);

page.innerHTML=i;

if(i==current)

page.className='current';

if(current+2==total)

varlast=page.nextSibling.nextSibling;

last.className='hide';

//fordemo2

elseif(total==0)

ele.className='paginationhide';

//fordemo3

elseif(total=5)

varfir=ele.firstChild.nextSibling;

fir.className='hide';

varpage=fir;

for(vari=1;ii++){

page=page.nextSibling.nextSibling;

if(i=total){

page.innerHTML=i;

if(i==current)

page.className='current';

else

page.className='hide';

varlast=page.nextSibling.nextSibling;

last.className='hide';

//fordemo4

elseif(current-2=0)

varpage=ele.firstChild.nextSibling;

page.className='hide';

for(vari=1;ii++){

page=page.nextSibling.nextSibling;

page.innerHTML=i;

if(i==current)

page.className='current';

//fordemo5

elseif(current+2total)

varpage=ele.firstChild.nextSibling;

for(vari=total-4;i=total;i++){

page=page.nextSibling.nextSibling;

page.innerHTML=i;

if(i==cu