<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
#page a {margin: 10px;}
</style>
<script type="text/javascript">
window.onload = function () {
page({
id : 'page',
nowNum : 9,
allNum : 10,
bBtn : false,
callBack : function(now,all) {
alert('當前頁:' + now +',總共頁:'+all);
}
})
function page(opt) {
if (!opt.id) {return};
var nowNum = opt.nowNum || 1;
var allNum = opt.allNum || 5;
var bBtn = opt.bBtn || false;
var callBack = opt.callBack || function(){};
var obj = document.getElementById(opt.id);
if (allNum >= 6 && nowNum >=5) {
var a = document.createElement('a');
a.href = '#1';
a.innerHTML = '首頁';
obj.appendChild(a)
};
if (nowNum >= 2) {
var a = document.createElement('a');
a.href = '#'+(nowNum-1);
a.innerHTML = '上一頁';
obj.appendChild(a)
};
if (allNum <= 5) {
for (var i = 1; i <= allNum; i++) {
var a = document.createElement('a');
a.href = '#'+i;
if (i == nowNum) {
a.innerHTML = i;
} else {
a.innerHTML = '['+ i +']'
}
obj.appendChild(a)
};
}else {
if (nowNum ==1 || nowNum == 2) {
// if (opt.nowNum == 1) {
for (var i = 1; i <= 5; i++) {
var a = document.createElement('a');
a.href = '#'+i;
if (i == nowNum) {
a.innerHTML = i;
} else {
a.innerHTML = '['+ (i) +']'
}
obj.appendChild(a)
};
// };
}
else if( (allNum - nowNum) <= 1 ) { //opt.nowNum ==9 || opt.nowNum == 10
for (var i = 1; i <= 5; i++) {
var a = document.createElement('a');
a.href = '#' + (allNum - 5 + i);
// if (i == opt.nowNum) {
// a.innerHTML = opt.allNum - opt.nowNum + 5;
// } else {
// a.innerHTML = '['+ (opt.allNum - opt.nowNum + 5) +']'
// }
if( (allNum-nowNum == 0 && i==5) || (allNum - nowNum == 1 && i==4) ){
a.innerHTML = (allNum - 5 + i);
}else{
a.innerHTML = '['+ (allNum - 5 + i) +']';
}
obj.appendChild(a)
};
// oA.href = '#' + (allNum - 5 + i);
// if((allNum - nowNum) == 0 && i==5){
// oA.innerHTML = (allNum - 5 + i);
// }
// else if((allNum - nowNum) == 1 && i==4){
// oA.innerHTML = (allNum - 5 + i);
// }
// else{
// oA.innerHTML = '['+ (allNum - 5 + i) +']';
// }
}
else {
for (var i = 1; i <= 5; i++) {
var a = document.createElement('a');
a.href = '#'+(nowNum-3+i);
if (i == 3) {
a.innerHTML = nowNum-3+i;
} else {
a.innerHTML = '['+ (nowNum-3+i) +']'
}
obj.appendChild(a)
};
}
}
if ((allNum-nowNum) >= 1) {
var a = document.createElement('a');
a.href = '#'+(nowNum+1);
a.innerHTML = '下一頁';
obj.appendChild(a)
};
if (allNum >= 6 && (allNum-nowNum) >=3 ) {
var a = document.createElement('a');
a.href = '#'+allNum;
a.innerHTML = '尾頁';
obj.appendChild(a)
};
if (bBtn) {
callBack(nowNum,allNum);
};
var aBtn = obj.getElementsByTagName('a');
for (var i = 0; i < aBtn.length; i++) {
aBtn[i].onclick = function() {
var nowNum = parseInt(this.getAttribute('href').substring(1));
obj.innerHTML = '';
page({
id : opt.id,
nowNum : nowNum,
allNum : allNum,
bBtn : true,
callBack : callBack
});
// callBack(nowNum,allNum);
return false;
}
};
}
}
</script>
</head>
<body>
<div id="page">
<!-- <a href="#10">首頁</a>
<a href="#1">上一頁</a>
<a href="#2">[2]</a>
<a href="#3">[3]</a>
<a href="#4">4</a>
<a href="#5">[5]</a>
<a href="#6">[6]</a>
<a href="#7">下一頁</a>
<a href="#10">尾頁</a> -->
</div>
</body>
</html>js分頁函數
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章
網頁加載效果（利用圖片加載）
function loading(){ var oSpan=oLoad.getElementsByTagName('span')[0]; var aDiv=oLoad.getElementsByTa