做開發久了，會越來越依賴架構，畢竟利用架構可以快速的完成工作任務，如常見的分頁效果，隻需要與後端配合，由後端傳回總頁數和目前第幾頁這兩個參數傳給一些架構的分頁功能，就可以輕松的實作分頁效果，那如果在不依賴框的情況下利用原生JS如何實作一個分頁效果呢？接下來給大家分享一段分頁代碼實作下面的效果。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>原生JS實作分頁效果</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号直接傳回false
if (!opt.id) { return false };
//擷取id所對應的容器
var obj = document.getElementById(opt.id);
//如果沒有傳入目前頁,預設為第1頁
var nowNum = opt.nowNum || 1;
//如果沒有傳入總共多少頁，預設為5頁
var allNum = opt.allNum || 5;
//如果沒有傳入回調函數,預設為1個空的函數
var callBack = opt.callBack || function () { };
//顯示"首頁",如果目前頁大于等于4，而且總頁數大于等于6
if (nowNum >= 4 && allNum >= 6) {
//建立a标簽
var oA = document.createElement('a');
//添加href的值
oA.href = '#1';
//添加内容
oA.innerHTML = '首頁';
//添加到obj中
obj.appendChild(oA);
}
//顯示"上一頁",如果目前頁大于等于2
if (nowNum >= 2) {
//建立a标簽
var oA = document.createElement('a');
//添加href的值
oA.href = '#' + (nowNum - 1);
//添加内容
oA.innerHTML = '上一頁';
//添加到obj中
obj.appendChild(oA);
}
//如果傳入的總頁數小于等于5
if (allNum <= 5) {
//循環
for (var i = 1; i <= allNum; i++) {
//建立A标簽
var oA = document.createElement('a');
//為每個a标簽指派href值
oA.href = '#' + i;
//如果标簽頁為目前頁
if (nowNum == i) {
//内容為i
oA.innerHTML = i;
//否則
}else {
//内容為[i]
oA.innerHTML = '[' + i + ']';
}
//将标簽頁添加到容器當中
obj.appendChild(oA);
}
//如果傳入的總頁數大于等于5
} else {
//循環
for (var i = 1; i <= 5; i++) {
//建立A标簽
var oA = document.createElement('a');
//如果目前頁為第1頁或是第2頁時(不能讓其顯示第-1頁和第0頁)
if (nowNum == 1 || nowNum == 2) {
//标簽的href值為#i(1,2,3,4,5,)
oA.href = '#' + i;
//如果标簽頁為目前頁
if (nowNum == i) {
//内容為i
oA.innerHTML = i;
//否則
}else {
//内容為[i]
oA.innerHTML = '[' + i + ']';
}
// 如果總頁數減去目前頁等于0或者等于1(不能讓其顯示第11和12頁)
}else if ((allNum - nowNum) == 0 || (allNum - nowNum) == 1) {
//标簽頁的href值為allNum - 5 + i(目前頁為10，href值為#6,#7,#8,#9,#10)
oA.href = '#' + (allNum - 5 + i);
//如果總頁數減去目前頁為0以及目前循環周遊的i為5
if ((allNum - nowNum) == 0 && i == 5) {
//标簽頁的内容為allNum - 5 + i(目前頁為10，顯示[6],[7],[8],[9],10)
oA.innerHTML = (allNum - 5 + i);
//否則,如果總頁數減去目前頁為1以及目前循環周遊的i為4
}else if ((allNum - nowNum) == 1 && i == 4) {
//标簽頁的内容為allNum - 5 + i(目前頁為9，顯示[6],[7],[8],9,[10])
oA.innerHTML = (allNum - 5 + i);
//否則
}else {
//标簽頁的内容為allNum - 5 + i(正常顯示，沒有第11頁和第12頁)
oA.innerHTML = '[' + (allNum - 5 + i) + ']';
}
}else {
//5個标簽頁的href值依次為目前頁-3加上i(1,2,3,4,5)
oA.href = '#' + (nowNum - 3 + i);
//如果目前頁在5個标簽頁的中間
if (i == 3) {
//内容為nowNum - 3 + i
oA.innerHTML = (nowNum - 3 + i);
}else {
//否則,内容為[nowNum - 3 + i]
oA.innerHTML = '[' + (nowNum - 3 + i) + ']';
}
}
//将标簽頁添加到容器當中
obj.appendChild(oA);
}
}
//顯示"下一頁",總頁數減去目前頁大于等于1，即不是最後一頁
if ((allNum - nowNum) >= 1) {
//建立A标簽
var oA = document.createElement('a');
//給href指派
oA.href = '#' + (nowNum + 1);
//添加内容
oA.innerHTML = '下一頁';
//加入obj中
obj.appendChild(oA);
}
//顯示"尾頁",總頁數減去目前頁大于等于3時
if ((allNum - nowNum) >= 3 && allNum >= 6) {
//建立A标簽
var oA = document.createElement('a');
//給href指派
oA.href = '#' + allNum;
//添加内容
oA.innerHTML = '尾頁';
//加入obj中
obj.appendChild(oA);
}
//執行回調函數,傳入目前頁和總頁數
callBack(nowNum, allNum);
//擷取所有的a标簽
var aA = obj.getElementsByTagName('a');
//為每個标簽頁添加擊事件
for (var i = 0; i < aA.length; i++) {
aA[i].onclick = function () {
//擷取目前頁的href屬性去#号由字元串轉數字類型
var nowNum = parseInt(this.getAttribute('href').substring(1));
//清空目前的obj内容
obj.innerHTML = '';
//配置page的參數
page({
id: opt.id,
nowNum: nowNum,
allNum: allNum,
callBack: callBack
});
//阻止預設，防止在URL中添加字元串
return false;
};
}
}
</script>
</head>
<body>
<div id="div1"></div>
</body>
</html> 複制