原生javascript实现分页效果
随着近几年前端行业的迅猛发展,各种层出不穷的新框架,新方法让我们有点眼花缭乱。
最近刚好比较清闲,所以没事准备撸撸前端的根基javascript,纯属练练手,写个分页,顺便跟大家分享一下
functionpageFunc(conf){ this.myFunc=conf.click//用户点击要执行的方法 this.total=conf.total;//总页数 this.currentPage=1;//当前页码 this.init()//初始化 } pageFunc.prototype.init=function(){ vartotal=this.total, currentPage=this.currentPage, _this=this; listeners={ 'setWhat':function(opts){ _this.aClick(opts.src) returnfalse; } }; listenersPre={ 'lmw-pre':function(opts){ _this.prevClick() returnfalse; } }; listenersAdd={ 'lmw-add':function(opts){ _this.addClick() returnfalse; } }; varrootele=this.createPage(1,total); document.getElementById('page-coat').innerHTML=rootele $on(document.getElementById('page-coat'),['click'],listeners);//点击a标签 $on(document.getElementById('page-coat'),['click'],listenersPre);//点击上一页 $on(document.getElementById('page-coat'),['click'],listenersAdd);//点击下一页 } //创建HTML分页结构字符串 pageFunc.prototype.createPage=function(page,total){ varstr=`${page}` for(vari=1;i<=3;i++){ if(page-i>1){ str=` ${page-i}`+str } if(page+i ${(page+i)}` } }; if(page-4>1){ str='...'+str }; if(page+4 ...' }; if(page>1){ str=` 上一页 1`+str }; if(page ${total} 下一页` }; returnstr } //上一页方法 pageFunc.prototype.prevClick=function(){ vartotal=this.total varva=--this.currentPage varnewret=this.createPage(va,total) document.getElementById('page-coat').innerHTML=newret this.myFunc(va) } //下一页方法 pageFunc.prototype.addClick=function(){ vartotal=this.total varva=++this.currentPage varnewret=this.createPage(va,total) document.getElementById('page-coat').innerHTML=newret this.myFunc(va) }; //点击方法 pageFunc.prototype.aClick=function(_this){ vartotal=this.total varva=parseInt(_this.innerText); this.currentPage=va varrootele=this.createPage(va,total) document.getElementById('page-coat').innerHTML=rootele this.myFunc(va) }; //二:封装事件代理方法 function$on(dom,event,listeners){ $addEvent(dom,event,function(e){ vare=e||window.event, src=e.target||e.srcElement, action, returnVal; while(src&&src!==dom){ action=src.getAttribute('attr-action')||src.getAttribute('class'); if(listeners[action]){ returnVal=listeners[action]({ src:src, e:e, action:action }); if(returnVal===false){ break; } } src=src.parentNode; } }); }; //1、封装跨浏览器事件绑定方法 function$addEvent(obj,type,handle){ if(!obj||!type||!handle){ return; } if(objinstanceofArray){ for(vari=0,l=obj.length;i 使用方法:
分页效果 #page-coata{ text-decoration:none; display:inline; float:left; padding:3px10px3px10px; overflow:hidden; border:1pxsolid#ccc; color:#999; margin-right:5px; cursor:pointer; background:#fff; } #page-coata:hover{ border:1pxsolid#FF6600; background-color:#FF6600; color:#fff; } #page-coatspan{ display:inline; float:left; color:#999; background:#fff; } #page-coata.lmw-current{ color:#FF6600; border:1pxsolid#FF6600; background-color:#FFEEE5; }