html分页效果,JavaScript实现分页效果

初学前端不久，第一次写文章，希望大佬多多指教，谢谢！！

目的：实现一个分页点击事件的js组件特效，

效果如下：

录gif的软出了点问题，感觉鼠标不移动

代码实现：

html代码：

加上css后效果：

因为每次选中的页面在中间，则吧中间设置一个点击的class

JS实现：

function Paging(list_num,ali,btn){

this.list_num=list_num;

this.ali=ali;

this.btn=btn;

this.page=1;//定义一个当前页面的全局变量

this.num=5;//每页文章数目

this.page_num=Math.ceil(this.list_num/this.num);//根据文章数和每页显示数，向上取整算出页码数

this.drc=[this.page-2,this.page-1,this.page,this.page+1,this.page+2];

}

设置一个Paging的对象，传入形参文章数(list_num),页码按钮(ali)，上下页按钮(btn)。在根据设置每页显示条数，计算出最大页码。这里解释一下this.drc，因为中间的按钮是当前页码，则前面一页是当前页码减一，其他同理。this.page是当前页码，默认设置为第一页

Paging包含2个原型函数一个为init,一个为render这个函数的作用是根据当前选中的页码(this.page)

来渲染ali。

下面先来看下init函数：

init:function(){

var self=this;

//ali绑定点击事件

for(var i=0,len=ali.length;i

//给ali添加innertext

if(this.drc[i]>0&&this.drc[i]<=this.page_num){

ali[i].innerText=this.drc[i];

}else{

ali[i].innerText='*';

}

ali[i].οnclick=function(){

var val=this.innerText;

if(val%1===0){

self.page=parseInt(val);

}else{

alert('请单击正确的页码');

return;

}

self.render();

}

}

//给上一页、下一页添加点击事件

btn[0].οnclick=function(){

self.page--;

self.render();

}

btn[1].οnclick=function(){

self.page++;

self.render();

}

}

因为html里面没有在li标签里面赋值，这里采用循环的方式赋值，在代码第六行的if判断里面，进过this.drc计算，如果出现值是比1小的或者比最页码(this.page_num)还大的情况吧值设置为※，意味这改页码不能点击。在代码 self.page=parseInt(val);这句中的parseInt函数非常关键，如果没有设置这后面页码生成会出现问题，这里的判断值能否与1整除，如果不能整除则知晓用户点击的是※，这时我们弹出对话框提示用户没有页码，并return。这里都是点击以后改变全局变量this.page然后调用render函数。

下面我们来看下render函数：

if(this.page<=0){

alert('已经是列表的首页');

}else if(this.page>this.page_num){

alert('已经是列表的最后一页');

}else{

this.drc=[this.page-2,this.page-1,this.page,this.page+1,this.page+2];

for(var i=0,len=ali.length;i

if(this.drc[i]<=0||this.drc[i]>this.page_num){

ali[i].innerText='*';

}else{

ali[i].innerText=this.drc[i];

}

}

}

这里代码很简洁，就是三个if判断分支语句，当页码小于0或者大于页码最大值的时候弹出窗口，当页码在1到最大页码之间的时候，进行ali的渲染，在for循环里面的if判断和前面的思路是一致的，均是当页码不在范围类赋值成‘*’,在范围内时，给其赋值。

下面是在js中调用这个对象

//文章数目，定义50篇

var list_num=50;

//ali，获取页码的DOM

var ali=document.getElementsByClassName('page_num');

//btn，获取上下2页的按钮

var btn=document.getElementsByClassName('list_btn');

var paging=new Paging(list_num,ali,btn);

paging.init();

当然这里也可以与ajax合用，设置一个分页的模块，向ajax传入参数获取数据，然后根据返回的json，设置显示内容

前端新手，希望各位大佬，多多留言，多多指教，谢谢！！