实现静态html分页特效,javascript实现简单的分页特效

下面是一段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

{

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

{

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

{

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

{

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[i].onclick = function(){

//当前点的页码

var sHref = this.getAttribute('href').substring(1);

//清空页数显示

pageDIvBox.innerHTML = '';

setPage({

pageDivId:'page',

showPageNum:5, //显示的个数

allPageNum:10, //总页数

curpageNum:sHref //当前页数

})

}

}

}

window.οnlοad=function()

{

setPage({

pageDivId:'page',

showPageNum:5, //显示的个数

allPageNum:10, //总页数

curpageNum:1 //当前页数

})

}

示例二：

body{

font-size:12px;

}

示例三：

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

//总页数，当前页数，跳转地址，第一页和最后一页之间显示的页码数量

function pageBar(tp,cp,url,pn){

var str = ‘

• ';

if(tp>1 && cp>1){

var prev = cp-1;

str += ‘

上一页 ‘;

}else{

str += ‘

上一页 ‘;

}

if(tp>1){

//第一页

if(cp==1){

str +=‘

1 ‘;

}else{

str +=‘

1 ‘;

}

if(tp>2){

var pnh = Math.floor(pn/2);

//循环开始页码

var s = cp-pnh;

if(s<=1){

s = 2;

}

//循环结束页码

var e = cp+pnh;

if(e>=tp){

e = tp-1;

}

if(s<=(1+pnh)){

if(tp>(pn+2)){

e = s+(pn-1);

if(e>=tp){

e = tp-1;

}

}else{

s = 2;

}

}

if(e>=(tp-pnh)){

if(tp>(pn+2)){

s = e-(pn-1);

if(s<=1){

s = 2;

}

}else{

e = tp-1;

}

}

if(e

e = s;

}

//第一页后的多页跳转

if(s>2){

var sp = cp-pn;

if(sp<1){

sp=1;

}

str += ‘

… ‘;

}

for(var i=s;i<=e;i++){

if(i==cp){

str += ‘

'+i+‘ ‘;

}else{

str += ‘

'+i+‘ ‘;

}

}

//最后一页前的多页跳转

if(e < (tp-1)){

var ep = cp+pn;

if(ep>tp){

ep=tp;

}

str += ‘

… ‘;

}

}

//最后一页

if(cp==tp){

str +=‘

'+tp+‘ ‘;

}else{

str +=‘

'+tp+‘ ‘;

}

}else{

str +=‘

1 ‘;

}

if(tp>1 && cp

var next = cp+1;

str += ‘

下一页';

}else{

str += ‘

下一页';

}

str += ‘';

return str;

}

//跳转页码，跳转地址

function goPage(cp,url){

window.location.href = url+cp;

}