最近在做一個小項目，有時需要制作靜態頁面網站，而一旦涉及到文章的分頁，實現起來非常麻煩，自己又剛入門，對js不是很熟悉，所以就拿來練練手。

最近寫了一個js分頁的方法，盡管已經有現成的可以用，但還是想自己寫寫，搞搞清楚。最終實現的效果是：上一頁、第一頁、…(上n個頁碼)、n個頁碼、…(下n個頁碼)、最后一頁、下一頁。n可以是奇數也可以是偶數，一般都喜歡取奇數，星石調用的時候傳入的參數是5。寫的時候，主要注意了以下幾個地方：

頁碼等于1時，只顯示上一頁、第一頁、最后一頁，且都沒有跳轉;

頁碼小于等于2時，不需要中間的n個頁碼;

頁碼小于等于n時，顯示所有頁碼，不顯示2個“…”;

2個“…”換頁時，換n個頁碼，如果接近最前面或最后面幾頁了，則顯示最前面或最后面n個頁碼。

下面貼出代碼，供大家探討：

1. //總頁數，當前頁數，跳轉地址，第一頁和最后一頁之間顯示的頁碼數量 
2. function pageBar(tp,cp,url,pn){ 
3. var str = ‘<ul class=”page”>'; 
4. if(tp>1 && cp>1){ 
5. var prev = cp-1; 
6. str += ‘<li><a class=”prev” title=”上一頁” href=”javascript:goPage(‘+prev+‘,/”+url+‘/');”><span>上一頁</span></a></li> ‘; 
7. }else{ 
8. str += ‘<li><a class=”prev” title=”上一頁” href=”javascript:void(0);”><span>上一頁</span></a></li> ‘; 
9. } 
10. if(tp>1){ 
11. //第一頁 
12. if(cp==1){ 
13. str +=‘<li class=”current”><a href=”javascript:goPage(1,/”+url+‘/');”><span>1</span></a></li> ‘; 
14. }else{ 
15. str +=‘<li><a href=”javascript:goPage(1,/”+url+‘/');”><span>1</span></a></li> ‘; 
16. } 
17.  
18. if(tp>2){ 
19. var pnh = Math.floor(pn/2); 
20.  
21. //循環開始頁碼 
22. var s = cp-pnh; 
23. if(s<=1){ 
24. s = 2; 
25. } 
26.  
27. //循環結束頁碼 
28. var e = cp+pnh; 
29. if(e>=tp){ 
30. e = tp-1; 
31. } 
32.  
33. if(s<=(1+pnh)){ 
34. if(tp>(pn+2)){ 
35. e = s+(pn-1); 
36. if(e>=tp){ 
37. e = tp-1; 
38. } 
39. }else{ 
40. s = 2; 
41. } 
42. } 
43.  
44. if(e>=(tp-pnh)){ 
45. if(tp>(pn+2)){ 
46. s = e-(pn-1); 
47. if(s<=1){ 
48. s = 2; 
49. } 
50. }else{ 
51. e = tp-1; 
52. } 
53. } 
54.  
55. if(e<s){ 
56. e = s; 
57. } 
58.  
59. //第一頁后的多頁跳轉 
60. if(s>2){ 
61. var sp = cp-pn; 
62. if(sp<1){ 
63. sp=1; 
64. } 
65. str += ‘<li><a name=”break” href=”javascript:goPage(‘+sp+‘,/”+url+‘/');”><span>…</span></a></li> ‘; 
66. } 
67.  
68. for(var i=s;i<=e;i++){ 
69. if(i==cp){ 
70. str += ‘<li class=”current”><a href=”javascript:goPage(‘+i+‘,/”+url+‘/');”><span>'+i+‘</span></a></li> ‘; 
71. }else{ 
72. str += ‘<li><a href=”javascript:goPage(‘+i+‘,/”+url+‘/');”><span>'+i+‘</span></a></li> ‘; 
73. } 
74. } 
75.  
76. //最后一頁前的多頁跳轉 
77. if(e < (tp-1)){ 
78. var ep = cp+pn; 
79. if(ep>tp){ 
80. ep=tp; 
81. } 
82. str += ‘<li><a name=”break” href=”javascript:goPage(‘+ep+‘,/”+url+‘/');”><span>…</span></a></li> ‘; 
83. } 
84. } 
85.  
86. //最后一頁 
87. if(cp==tp){ 
88. str +=‘<li class=”current”><a href=”javascript:goPage(‘+tp+‘,/”+url+‘/');”><span>'+tp+‘</span></a></li> ‘; 
89. }else{ 
90. str +=‘<li><a href=”javascript:goPage(‘+tp+‘,/”+url+‘/');”><span>'+tp+‘</span></a></li> ‘; 
91. } 
92.  
93. }else{ 
94. str +=‘ <li class=”current”><a href=”javascript:void(0);”><span>1</span></a></li> ‘; 
95. } 
96.  
97. if(tp>1 && cp<tp){ 
98. var next = cp+1; 
99. str += ‘<li><a class=”next” title=”下一頁” href=”javascript:goPage(‘+next+‘,/”+url+‘/');”><span>下一頁</span></a></li>'; 
100. }else{ 
101. str += ‘<li><a class=”next” title=”下一頁” href=”javascript:void(0);”><span>下一頁</span></a></li>'; 
102. } 
103. str += ‘</ul>'; 
104. return str; 
105. } 
106.  
107. //跳轉頁碼，跳轉地址 
108. function goPage(cp,url){ 
109. window.location.href = url+cp; 
110. } 

以上所述就是本文的全部內容了，希望大家能夠喜歡。