简易分页组件

还是第一次写分页用的页码组件 整个过程就是找规律 找它们的共通点 本来想写成灵活度比较高 多方面都提供接口的组件模式 然而在控制展现的页码数量这里 即便找到了规律共性也没能转化为靠谱实用的程序 最后不得已写死为七页了... 

下面是代码..

window.onload = function() {page({id: 'yema', //分页容器nowpag: 1,  //初始化展现第一页allpag: 10, //总共十页marginleft: 5 + 'px',//可以控制间距color: 'blueviolet', //控制字体颜色background: 'orangered',//控制背景色outline: '1px solid blueviolet' //用轮廓线形成样式});//页面加载完毕后 初始化好分页样式和功能}//这个函数用来形成具体的细节样式function pageinit(ag, obj, color, outline, marginLeft, background) {ag.style.color = color;ag.style.outline = outline;ag.style.marginLeft = marginLeft;ag.style.background = background;ag.style.display = 'block';ag.style.float = 'left';ag.style.textDecoration = 'none';ag.style.width = 20 + 'px';ag.style.height = 20 + 'px';ag.style.fontSize = 14 + 'px';ag.style.textAlign = 'center';ag.style.lineHeight = 20 + 'px';obj.appendChild(ag);}//真正初始化分页的主函数function page(jsson) {if(!jsson.id) {return false;}var obj = document.getElementById(jsson.id);var nowpag = jsson.nowpag;var allpag = jsson.allpag;var clr = jsson.color;var outl = jsson.outline;var marginleft = jsson.marginleft;var background = jsson.background;//这里写死了展现七页 其实本来想写一个变量提供接口自定义展现数量的 这里是之前想法的残骸临时修改的var fjnum = Math.ceil(7 / 2);//首页开始if(nowpag >= 5 && allpag >= 8) {var atag = document.createElement('a');atag.href = '#1';atag.innerHTML = '首页';pageinit(atag, obj, clr, outl, marginleft);atag.style.width = 35 + 'px';}//上一页开始if(nowpag >= 2) {var atag = document.createElement('a');atag.href = '#' + (nowpag - 1);atag.innerHTML = '上一页';pageinit(atag, obj, clr, outl, marginleft);atag.style.width = 48 + 'px';}//当展现数量大于等于拥有的总页数时if(allpag <= 7) {for(var i = 1; i <= allpag; i++) {var atag = document.createElement('a');atag.href = '#' + i;atag.innerHTML = i;if(i == nowpag) {pageinit(atag, obj, clr, outl, marginleft, background);} else {pageinit(atag, obj, clr, outl, marginleft);}}}//总页数远超过展现页数时else {for(var i = 1; i <= 7; i++) {var atag = document.createElement('a');//前三页的特殊处理if(nowpag < fjnum) {atag.href = '#' + i;atag.innerHTML = i;if(i == nowpag) {pageinit(atag, obj, clr, outl, marginleft, background);} else {pageinit(atag, obj, clr, outl, marginleft);}}//后三页特殊处理else if(nowpag > allpag - fjnum + 1) {atag.href = '#' + (allpag - 7 + i);atag.innerHTML = allpag - 7 + i;if(i == nowpag - fjnum + 1) {pageinit(atag, obj, clr, outl, marginleft, background);} else {pageinit(atag, obj, clr, outl, marginleft);}}//初步大体处理else {atag.href = '#' + (nowpag - fjnum + i);atag.innerHTML = nowpag - fjnum + i;if(i == fjnum) {pageinit(atag, obj, clr, outl, marginleft, background);} else {pageinit(atag, obj, clr, outl, marginleft);}}}}//下一页开始if(allpag - nowpag >= 1) {var atag = document.createElement('a');atag.href = '#' + (nowpag + 1);atag.innerHTML = '下一页';pageinit(atag, obj, clr, outl, marginleft);atag.style.width = 48 + 'px';}//尾页开始if(allpag - nowpag > 3 && allpag >= 8) {var atag = document.createElement('a');atag.href = '#' + allpag;atag.innerHTML = '尾页';pageinit(atag, obj, clr, outl, marginleft);atag.style.width = 35 + 'px';}//让页码动态化var alla = obj.getElementsByTagName('a');for(var i = 0; i < alla.length; i++) {alla[i].onclick = function() {var nownum = parseInt(this.getAttribute('href').substring(1));obj.innerHTML = '';page({id: 'yema',nowpag: nownum,allpag: 10,marginleft: 5 + 'px',color: 'blueviolet',background: 'orangered',outline: '1px solid blueviolet'});return false; //阻止默认事件 地址栏添加#}}//阻止文字被选中obj.onselectstart = function() {return false;}}