<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>無標題文檔</title>
<style>
a {
margin: 5px;
}
</style>
<script>
window.onload = function() {
//執行函數
page({
id : 'div1',
nowNum : 7,
allNum : 10,
callBack : function(now, all) {
//回調函數
alert('當前頁:' + now + ',總共頁:' + all);}
});
};
function page(opt) {
//如果id 不存在則不執行
if (!opt.id) {
return false
};
var obj = document.getElementById(opt.id);
//設置當前頁碼和總頁碼及其默認值
var nowNum = opt.nowNum || 1;
var allNum = opt.allNum || 5;
var callBack = opt.callBack ||
function() {
};
//添加首頁
if (nowNum >= 4 && allNum >= 6) {
var oA = document.createElement('a');
oA.href = '#1';
oA.innerHTML = '首頁';
obj.appendChild(oA);
}
//添加上一頁
if (nowNum >= 2) {
var oA = document.createElement('a');
oA.href = '#' + (nowNum - 1);
oA.innerHTML = '上一頁';
obj.appendChild(oA);
}
//根據總頁數創建各個分頁碼數
//判斷總頁數是否爲5頁以上
if (allNum <= 5) {
for (var i = 1; i <= allNum; i++) {
var oA = document.createElement('a');
oA.href = '#' + i;
//如果是當前頁 則不加中括號
if (nowNum == i) {
oA.innerHTML = i;
} else {
oA.innerHTML = '[' + i + ']';
}
obj.appendChild(oA);
}
} else {
for (var i = 1; i <= 5; i++) {
var oA = document.createElement('a');
//解決當前頁爲第一頁或第二頁時出現頁碼爲負數或零的情況
if (nowNum == 1 || nowNum == 2) {
oA.href = '#' + i;
if (nowNum == i) {
oA.innerHTML = i;
} else {
oA.innerHTML = '[' + i + ']';
}
} else if ((allNum - nowNum) == 0 || (allNum - nowNum) == 1) {
//解決當前頁最後兩頁時總頁數超出的問題
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 {
//以當前頁爲中心左右各兩頁
oA.href = '#' + (nowNum - 3 + i);
//當前頁無中括號
if (i == 3) {
oA.innerHTML = (nowNum - 3 + i);
} else {
oA.innerHTML = '[' + (nowNum - 3 + i) + ']';
}
}
obj.appendChild(oA);
}
}
//添加下一頁
if ((allNum - nowNum) >= 1) {
var oA = document.createElement('a');
oA.href = '#' + (nowNum + 1);
oA.innerHTML = '下一頁';
obj.appendChild(oA);
}
//添加尾頁
if ((allNum - nowNum) >= 3 && allNum >= 6) {
var oA = document.createElement('a');
oA.href = '#' + allNum;
oA.innerHTML = '尾頁';
obj.appendChild(oA);
}
//執行回調
callBack(nowNum, allNum);
var aA = obj.getElementsByTagName('a');
for (var i = 0; i < aA.length; i++) {
aA[i].onclick = function() {
//截取當前頁碼
var nowNum = parseInt(this.getAttribute('href').substring(1));
obj.innerHTML = '';
page({
id : opt.id,
nowNum : nowNum,
allNum : allNum,
callBack : callBack
});
return false;
};
}
}
</script>
</head>
<body>
<div id="div1">
</div>
</body>
</html>
js分頁效果
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章
spa頁面，不同組件按需引入js，aliplayer
(function(d, s, id) { let js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) retur