JS實現目前頁居中分頁效果的方法

這篇文章主要介紹了JS實現當前頁居中分頁效果的方法,涉及javascript操作頁面元素與樣式的相關技巧,需要的朋友可以參考下

function show_page(cur_pc)
{
  var cp=cur_pc;  //curent page count
  var tp=this.p;  //total page count
  var sp=this.pc;  //show page count
  var bp;      //begin page count
  var ep;      //end page count
  if(sp%2==0) sp=sp+1;   //this process need an odd number
  var dp=Math.floor(sp/2); //each side count to show
  var dif=tp-sp;  //check weather it have enough page to make mid-show
  var f=cp-dp;   //to check weather it has enough page to make mid-show from the begin
  var g=tp-(cp+dp); //to check weather it has enough page to make mid-show from the end
  if(sp && dif>=0)
  {
    if(g>0)
    {
      if(f>0)
      { 
        bp=f; 
        ep=cp+dp; 
      }
      else
      { 
        bp=1; 
        ep=2*dp+1; 
      }
    }
    else
    { 
      bp=tp-2*dp; 
      ep=tp; 
    }  
  }
  else
  { 
    bp=1; 
    ep=tp; 
  }
  var buf=[];
  for(var i=bp;i<=ep;i++)
  {
    if(i==cur_pc)
    {
      buf.push("<a href=&#39;javascript:;&#39; class=&#39;current&#39;>",i,"</a>");
    }
    else
    {
      buf.push("<a href=&#39;javascript:;&#39; class=&#39;normal&#39;>",i,"</a>");
    }
  }
  document.write(buf);
}

運作效果如下圖：

更多教學請造訪JavaScript教學教學