7種增加網站用戶體驗的JS腳本分頁代碼

網頁設計中，要考慮的方面很多，當然，大體來說就是兩類：代碼+UI，簡潔的代碼加上美觀的UI，是一個網站理想的選擇，一個網站設計成功與否，很 多時候要從細節入手，關注細節，才能關注用戶體驗，用戶體驗的友好，才能說明網站的設計是成功的，下面分享7種JS腳本分頁代碼，讓細節到從內容頁面的分 頁上來，高手可以飄過，這是寫給不懂JS的朋友看的。

<script language="JavaScript">
<!--
/*

7種分頁腳本定義
=================================

Example
----------------------
var pg = new showPages('pg');
pg.pageCount = 12; //定義總頁數(必要)
pg.argName = 'p'; //定義參數名(可選,缺省為page)
pg.printHtml(); //顯示頁數

Supported in Internet Explorer, Mozilla Firefox
*/

function showPages(name) { //初始化屬性
this.name = name; //對象名稱
this.page = 1; //當前頁數
this.pageCount = 1; //總頁數
this.argName = 'page'; //參數名
this.showTimes = 1; //打印次數
}

showPages.prototype.getPage = function(){ //叢url獲得當前頁數,如果變量重復只獲取最後一個
var args = location.search;
var reg = new RegExp('[?&]?' + this.argName + '=([^&]*)[&$]?', 'gi');
var chk = args.match(reg);
this.page = RegExp.$1;
}
showPages.prototype.checkPages = function(){ //進行當前頁數和總頁數的驗證
if (isNaN(parseInt(this.page))) this.page = 1;
if (isNaN(parseInt(this.pageCount))) this.pageCount = 1;
if (this.page < 1) this.page = 1;
if (this.pageCount < 1) this.pageCount = 1;
if (this.page > this.pageCount) this.page = this.pageCount;
this.page = parseInt(this.page);
this.pageCount = parseInt(this.pageCount);
}
showPages.prototype.createHtml = function(mode){ //生成html代碼
var strHtml = '', prevPage = this.page - 1, nextPage = this.page + 1;
if (mode == '' || typeof(mode) == 'undefined') mode = 0;
switch (mode) {
case 0 : //模式1 (頁數,首頁,前頁,後頁,尾頁)
strHtml += '<span class="count">Pages: ' + this.page + ' / ' + this.pageCount + '</span>';
strHtml += '<span class="number">';
if (prevPage < 1) {
strHtml += '<span title="First Page">&#171;</span>';
strHtml += '<span title="Prev Page">&#139;</span>';
} else {
strHtml += '<span title="First Page"><a href="javascript:' + this.name + '.toPage(1);">&#171;</a></span>';
strHtml += '<span title="Prev Page"><a href="javascript:' + this.name + '.toPage(' + prevPage + ');">&#139;</a></span>';
}
for (var i = 1; i <= this.pageCount; i++) {
if (i > 0) {
if (i == this.page) {
strHtml += '<span title="Page ' + i + '">[' + i + ']</span>';
} else {
strHtml += '<span title="Page ' + i + '"><a href="javascript:' + this.name + '.toPage(' + i + ');">[' + i + ']</a></span>';
}
}
}
if (nextPage > this.pageCount) {
strHtml += '<span title="Next Page">&#155;</span>';
strHtml += '<span title="Last Page">&#187;</span>';
} else {
strHtml += '<span title="Next Page"><a href="javascript:' + this.name + '.toPage(' + nextPage + ');">&#155;</a></span>';
strHtml += '<span title="Last Page"><a href="javascript:' + this.name + '.toPage(' + this.pageCount + ');">&#187;</a></span>';
}
strHtml += '</span><br />';
break;
case 1 : //模式1 (10頁縮略,首頁,前頁,後頁,尾頁)
strHtml += '<span class="count">Pages: ' + this.page + ' / ' + this.pageCount + '</span>';
strHtml += '<span class="number">';
if (prevPage < 1) {
strHtml += '<span title="First Page">&#171;</span>';
strHtml += '<span title="Prev Page">&#139;</span>';
} else {
strHtml += '<span title="First Page"><a href="javascript:' + this.name + '.toPage(1);">&#171;</a></span>';
strHtml += '<span title="Prev Page"><a href="javascript:' + this.name + '.toPage(' + prevPage + ');">&#139;</a></span>';
}
if (this.page % 10 ==0) {
var startPage = this.page - 9;
} else {
var startPage = this.page - this.page % 10 + 1;
}
if (startPage > 10) strHtml += '<span title="Prev 10 Pages"><a href="javascript:' + this.name + '.toPage(' + (startPage - 1) + ');">...</a></span>';
for (var i = startPage; i < startPage + 10; i++) {
if (i > this.pageCount) break;
if (i == this.page) {
strHtml += '<span title="Page ' + i + '">[' + i + ']</span>';
} else {
strHtml += '<span title="Page ' + i + '"><a href="javascript:' + this.name + '.toPage(' + i + ');">[' + i + ']</a></span>';
}
}
if (this.pageCount >= startPage + 10) strHtml += '<span title="Next 10 Pages"><a href="javascript:' + this.name + '.toPage(' + (startPage + 10) + ');">...</a></span>';
if (nextPage > this.pageCount) {
strHtml += '<span title="Next Page">&#155;</span>';
strHtml += '<span title="Last Page">&#187;</span>';
} else {
strHtml += '<span title="Next Page"><a href="javascript:' + this.name + '.toPage(' + nextPage + ');">&#155;</a></span>';
strHtml += '<span title="Last Page"><a href="javascript:' + this.name + '.toPage(' + this.pageCount + ');">&#187;</a></span>';
}
strHtml += '</span><br />';
break;
case 2 : //模式2 (前後縮略,頁數,首頁,前頁,後頁,尾頁)
strHtml += '<span class="count">Pages: ' + this.page + ' / ' + this.pageCount + '</span>';
strHtml += '<span class="number">';
if (prevPage < 1) {
strHtml += '<span title="First Page">&#171;</span