css

*{ margin:0; padding:0; } li{ list-style:none; } #ul1{ width:600px; height:250px; } #ul1 li{ width:100px; height:100px; background:red; float:left; overflow:hidden; margin:10px; } a{ margin:5px; }

var json = { title : [ '效果1', '效果2', '效果3', '效果4', '效果5', '效果6', '效果7', '效果8', '效果9', '效果10', '效果11', '效果12', '效果13', '效果14', '效果15', '效果16', '效果17', '效果18', '效果19', '效果20', '效果21',] }; page({ id:'div1', nowNum:1,//初始页面（当前页面） pages:4,//一个页面显示数量 allNum:Math.ceil(json.title.length/4),//数据的总长度 / 一个页面的数量 = 页数（ceil是向上取整） callBack:function(){} }); function page(opt){ if(!opt.id){ return false; } var obj = document.getElementById(opt.id); var nowNum = opt.nowNum||1; var pages = opt.pages||5; var allNum = opt.allNum||5; var callBack = opt.callBack||function(){}; var Ul = document.getElementById('ul1'); Ul.innerHTML=''//先把之前的页面数据清空 // console.log(nowNum*pages-pages,nowNum*pages,'1111111111111111',nowNum,pages) for(var i=(nowNum*pages-pages); i<(nowNum*pages); i++){//计算当前显示 所对应的当前数据 var oA = document.createElement('p'); if(!json.title[i]){ break; } oA.innerHTML=json.title[i] Ul.appendChild(oA); }if(nowNum>=4&&allNum>=6){//首页出现的情况，就是当现在的页码大于等于4并且总页码大于等于6时 var oA = document.createElement('a'); oA.href = 'https://www.it610.com/article/#1'; oA.innerHTML = '首页'; obj.appendChild(oA); } if(nowNum>=2){//只要页码大于等于2就会出现上一页 var oA = document.createElement('a'); oA.href = 'https://www.it610.com/article/#'+(nowNum - 1); oA.innerHTML = '上一页'; obj.appendChild(oA); } if(allNum<=5){//因为我们让一页最多显示5个页码，所以，如果总页码小与等于5，就说明页码可以显示完全 for(var i=1; i<=allNum; i++){ var oA = document.createElement('a'); oA.href = 'https://www.it610.com/article/#'+i; if(nowNum==i){ oA.innerHTML = i; }else{ oA.innerHTML = '['+i+']'; } obj.appendChild(oA); } } else{//下面的情况是当总页码大于5的时候进行的分类 for(var i=1; i<=5; i++){ var oA = document.createElement('a'); if(nowNum == 1||nowNum==2){//在总页数大于5的情况下继续根据当前页进行细分。如果当前的页为1或者为2的时候 oA.href = 'https://www.it610.com/article/#'+i; if(nowNum ==i){ oA.innerHTML = i; }else{ oA.innerHTML = '['+i+']' } }else if((allNum - nowNum)==0||(allNum - nowNum)==1){//如果当前页为最后一页或者倒数第二页的时候，说明显示的5页即为最后5页，所以就是下面的公式 oA.href = 'https://www.it610.com/article/#'+(allNum - 5+i); if((allNum - nowNum)==0&&i==5){ oA.innerHTML = (allNum - 5 + i); }else if((allNum - nowNum)==1&&i==4){ oA.innerHTML = (allNum - 5 +i); }else{ oA.innerHTML = '['+(allNum - 5 +i)+']' } }else{//当前页码处在5个页码的中间的时候 oA.href = 'https://www.it610.com/article/#'+(nowNum - 3 +i); if(i==3){ oA.innerHTML = (nowNum - 3 + i); }else{ oA.innerHTML = '['+(nowNum - 3 +i)+']' } } obj.appendChild(oA); } } if((allNum - nowNum)>=1){//如果总页数比当前页码大于等于1的时候显示‘下一页’ var oA = document.createElement('a'); oA.href = 'https://www.it610.com/article/#'+(nowNum+1); oA.innerHTML = '下一页'; obj.appendChild(oA); } if((allNum - nowNum)>=3&&allNum>=6){//如果总页数比当前页码大于等于3并且总页码大于等于6的时候显示‘尾页’； var oA = document.createElement('a'); oA.href = 'https://www.it610.com/article/#'+allNum; oA.innerHTML = '尾页'; obj.appendChild(oA); } callBack(nowNum,allNum); var aA = obj.getElementsByTagName('a'); for(var i=0; i