javascriptは簡単な改ページ効果を実現します.

function setPage(opt)
{ 
 if(!opt.pageDivId || opt.allPageNum < opt.curpageNum || opt.allPageNum < opt.showPageNum)
 {
  return false
 } 
 var allPageNum=opt.allPageNum; //     
 var showPageNum=opt.showPageNum; //      
 var curpageNum=opt.curpageNum; //       
 var pageDIvBox=document.getElementById(opt.pageDivId); 
 //             
 var lrNum=Math.floor(showPageNum/2); 
 if(curpageNum>1)
 { 
  var oA=document.createElement('a'); 
  oA.href='#1'; 
  oA.innerHTML='  ' 
  pageDIvBox.appendChild(oA); 
 } 
 if(curpageNum>1)
 { 
  var oA=document.createElement('a'); 
  oA.href='#'+(curpageNum-1); 
  oA.innerHTML='   ' 
  pageDIvBox.appendChild(oA); 
 } 
 if(curpageNum<showPageNum-2||allPageNum==showPageNum)
 { 
  for(var i=1;i<=showPageNum;i++)
  { 
   var oA = document.createElement('a'); 
   oA.href = '#'+i; 
   if(curpageNum==i)
   { 
    oA.innerHTML = i; 
   }
   else
   { 
    oA.innerHTML = "[" + i + "]"; 
   } 
   pageDIvBox.appendChild(oA); 
  } 
 }
 else
 { 
  //         
  if(allPageNum-curpageNum<lrNum && curpageNum == allPageNum-1)
  { 
   for(var i=1;i<=showPageNum;i++)
   { 
    console.log((curpageNum - showPageNum + i)); 
    var oA = document.createElement('a'); 
    oA.href = '#'+ (curpageNum - (showPageNum-1) + i); 
    if(curpageNum == (curpageNum - (showPageNum-1) + i))
    { 
     oA.innerHTML = (curpageNum - (showPageNum-1) + i) 
    }
    else
    { 
     oA.innerHTML = '['+(curpageNum - (showPageNum-1) + i)+']' 
    } 
    pageDIvBox.appendChild(oA); 
   } 
  } 
  //        
  else if(allPageNum-curpageNum<lrNum && curpageNum == allPageNum)
  { 
   for(var i=1;i<=showPageNum;i++)
   { 
    console.log((curpageNum - showPageNum + i)); 
    var oA = document.createElement('a'); 
    oA.href = '#'+ (curpageNum - showPageNum + i); 
    if(curpageNum == (curpageNum - showPageNum + i))
    { 
     oA.innerHTML = (curpageNum - showPageNum + i) 
    }
    else
    { 
     oA.innerHTML = '['+(curpageNum-showPageNum + i)+']' 
    } 
    pageDIvBox.appendChild(oA); 
   } 
  }
  else
  { 
   for(var i=1;i<=showPageNum;i++)
   { 
    var oA = document.createElement('a'); 
    oA.href = '#'+ (curpageNum - (showPageNum-lrNum) + i); 
    if(curpageNum == (curpageNum - (showPageNum-lrNum) + i))
    { 
     oA.innerHTML = (curpageNum - (showPageNum-lrNum) + i) 
    }
    else
    { 
     oA.innerHTML = '['+(curpageNum - (showPageNum-lrNum) + i)+']' 
    } 
    pageDIvBox.appendChild(oA); 
   } 
  } 
 } 
 if(curpageNum<allPageNum)
 { 
  for(var i=1;i<=2;i++)
  { 
   if(i==1)
   { 
    var oA = document.createElement('a'); 
    oA.href='#'+(parseInt(curpageNum)+1); 
    oA.innerHTML = '   '
   }
 else
 { 
    var oA = document.createElement('a'); 
    oA.href='#'+allPageNum; 
    oA.innerHTML = '  '
   } 
   pageDIvBox.appendChild(oA); 
  } 
 } 
 var oA = document.getElementsByTagName('a'); 
 //          
 for(var i=0;i<oA.length;i++)
 { 
 oA[i].onclick = function(){ 
 //       
 var sHref = this.getAttribute('href').substring(1); 
 //       
 pageDIvBox.innerHTML = ''; 
 setPage({ 
  pageDivId:'page', 
  showPageNum:5, //      
  allPageNum:10, //    
  curpageNum:sHref //     
 }) 
 } 
} 
} 
window.onload=function()
{ 
 setPage({ 
  pageDivId:'page', 
  showPageNum:5, //      
  allPageNum:10, //    
  curpageNum:1 //     
 }) 
} 

<!--
function initializePageNav(iCurrPage)
{
 var iPageSize = 20;
 var iProCount = 2121;
 var b = ((iProCount%iPageSize)!=0);
 var iPageCount = parseInt(iProCount/iPageSize)+(b?1:0);
 if (iCurrPage > iPageCount) return false;
 iCurrPage = parseInt(iCurrPage);
 var sTemp = "";
 var sTemp1 = "  :"+ iPageSize +"/<span style='color:red'>"+ iProCount +"</span>    :<span style='color:blue'>"+ iCurrPage +"</span>/"+ iPageCount +" ";
 var sTemp2 = "<input type=\"text\" id=\"goPageNo\" value=\""+iCurrPage+"\" size=\"3\" /><input type=\"button\" value=\"GO\" onclick=\"initializePageNav($('goPageNo').value);\" />"
 if (iProCount==0)
 {
 sTemp = "<font color='#cccccc'>             </font>";
 }
 else if (iPageCount==1)
 {
 sTemp = "<font color='#cccccc'>             </font>"
 }
 else if (iPageCount==iCurrPage)
 {
 sTemp = "<a href='Javascript:initializePageNav(1)'>  </a> <a href='Javascript:initializePageNav("+(iPageCount-1)+")'>   </a> <font color='#cccccc'>      </font>"
 }
 else if (iCurrPage==1)
 {
 sTemp = "<font color='#cccccc'>       </font><a href='Javascript:initializePageNav("+(iCurrPage+1)+")'>   </a> <a href='Javascript:initializePageNav("+iPageCount+")'>  </a>"
 }
 else
 {
 sTemp = "<a href='Javascript:initializePageNav(1)'>  </a> <a href='Javascript:initializePageNav("+(iCurrPage-1)+")'>   </a> <a href='Javascript:initializePageNav("+(iCurrPage+1)+")'>   </a> <a href='Javascript:initializePageNav("+(iPageCount)+")'>  </a>"
 }
 $("pageDir").innerHTML = sTemp +" "+ sTemp2 + " " + sTemp1 ;
 CollectGarbage();
}
function $(o)
{
 return document.getElementById(o);
}
initializePageNav(1)
//-->

示例三：

实现的效果是：上一页、第一页、…（上n个页码）、n个页码、…（下n个页码）、最后一页、下一页。n可以是奇数也可以是偶数，一般都喜欢取奇数

//   ，    ，    ，                 
function pageBar(tp,cp,url,pn){
  var str = ‘