JS分頁
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{padding:0;margin:0;}
#ul{font-size:0;font-family:Microsoft YaHei;display:inline-block;}
#ul li{
-moz-user-select:none;/*火狐*/
-webkit-user-select:none;/*webkit瀏覽器*/
-ms-user-select:none;/*IE10*/
-khtml-user-select:none;/*早期瀏覽器*/
user-select:none;
list-style: none;float:left;padding:6px;font-size:13px;border:1px solid #ccc;margin:2px;cursor:pointer;color:#585858;}
#div{width:100%;text-align: center;position:absolute;bottom:30px;}
#ul .background{background:#39C6F4;color:white;border:1px solid #39C6F4;}
</style>
</head>
<body>
<div id='div'>
<ul id='ul'>
<li>首頁</li>
<li>上一頁</li>
<li></li>
<li></li>
<li></li>
<li>下一頁</li>
<li>尾頁</li>
</ul>
</div>
<script>
var ul = document.getElementById('ul');
var li = ul.getElementsByTagName('li');
li[2].className = 'background';
var num01 = 1;
var num02 = 800/*總數*/;
//1 //首頁的點選事件
li[li.length-li.length].onclick = function(){
Background(2);
num01 = 1;
content(num01);
}
//2 //尾頁的點選事件
li[li.length-1].onclick = function(){
Background(li.length-3);
num01 = num02-(li.length-5);
content(num01)
}
//3 //上一頁的點選事件
li[li.length-(li.length-1)].onclick = function(){
for(var j = 0;j<li.length-4;j++){
if(li[j+2].className == 'background' && li[j+2].innerHTML != 1){
if(j+2 != li.length-(li.length-2)){
Background(j+1);
}
break;
}
}
if(j+2 == li.length-(li.length-2)){
num01 -- ;
content(num01);
}
}
//4 下一頁的點選事件
li[li.length-2].onclick = function(){
for(var j = 0;j<li.length;j++){
if(li[j].className == 'background' && li[j].innerHTML < num02){ //* && 寫最後一頁的總數*/
if(j+1 < li.length-2){
Background(j+1);
}
break;
}
}
if(j+1 == li.length-2){
num01++;
content(num01);
}
}
// 分頁的點選事件
for(var i = 0;i<li.length-4;i++){
li[i+2].index = i+2;
li[i+2].onclick = function(){
Background(this.index);
}
}
//把所有的分頁背景去掉，給指定的分頁新增背景顏色
function Background(num){
for(var i = 0;i<li.length;i++){
li[i].className = li[i].className.replace('background','');
li[num].className = 'background';
}
}
// 給li 寫內容
content(num01);
function content(number){
for(var i=0;i<li.length-4;i++){
li[i+2].innerHTML = number;
number++;
}
}
</script>
</body>
</html>
---------------------------------------------------------------
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.pageBigBox{
height:25px;
float:left;
}
.pageBigBox span{
display: inline;
float: left;
color:#999;
background: #fff;
}
.pageBigBox a{
display: inline-block;
height:25px;
padding:0 8px;
line-height: 25px;
float:left;
margin:0 5px;
font-size:12px;
background:#e5f0c9;
text-align: center;
color:#000;
text-decoration: none;
}
.pageBigBox a:hover{
background:rgb(200, 212, 123);
color: #fff;
}
.pageBigBox a.lmw-current{
color: #fff;
background:rgb(200, 212, 123);
}
.pageBox ul li.pageClass {
width:40px;
padding:0;
line-height: normal;
background:transparent !important;
}
.pageBox ul li.pageClass .active{
background:transparent !important;
}
</style>
</head>
<body>
<div class="pageBigBox"></div>
<script>
var pageBigBox = document.querySelector(".pageBigBox");
function pageFunc(conf)
{
this.myFunc = conf.click;
this.total = conf.total;
this.currentPage = 1;
this.init(conf);
}
pageFunc.prototype.init = function()
{
var total = this.total,
currentPage = this.currentPage,
_this = this;
listeners = {
'setWhat': function(opts)
{
_this.aClick(opts.src);
return false;
}
};
listenersPre = {
'lmw-pre': function(opts)
{
_this.prevClick();
return false;
}
};
listenersAdd = {
'lmw-add': function(opts)
{
_this.addClick();
return false;
}
}
var rootele = this.createPage(1, total);
pageBigBox.innerHTML = rootele;
o(pageBigBox, ['click'], listeners);
o(pageBigBox, ['click'], listenersPre);
o(pageBigBox, ['click'], listenersAdd);
};
pageFunc.prototype.createPage = function(page, total)
{
console.log("page:" + page + " total: " + total);
var str = `<a class="lmw-current" href="#">${page}</a>`;
for (var i = 1; i < 3; i++) {
if (page - i > 1) {
str = `<a class="setWhat" href="#" >${page-i}</a>` + str
}
if (page + i < total) {
str = str + `<a class="setWhat" href="#" >${(page+i)}</a>`
}
};
if (page - 4 >= 1) {
str = '<span>...</span>' + str
};
if (page + 4 <= total) {
str = str + '<span>...</span>'
};
if (page > 1) {
str = `<a class="lmw-pre" href="#">上一頁</a><a class="setWhat" href="#">1</a>` + str
};
if (page < total) {
str = str + `<a class="setWhat" href="#">${total}</a><a class="lmw-add" href="#">下一頁</a>`
};
return str;
}
pageFunc.prototype.prevClick = function()
{
var total = this.total;
var va = --this.currentPage;
var newret = this.createPage(va, total);
pageBigBox.innerHTML = newret;
this.myFunc(va);
}
pageFunc.prototype.addClick = function()
{
var total = this.total;
var va = ++this.currentPage;
var newret = this.createPage(va, total);
pageBigBox.innerHTML = newret;
this.myFunc(va);
}
pageFunc.prototype.aClick = function(_this)
{
var total = this.total;
var va = parseInt(_this.innerText);
this.currentPage = va;
var rootele = this.createPage(va, total);
pageBigBox.innerHTML = rootele;
this.myFunc(va);
}
function o(dom, event, listeners)
{
a(dom, event, function(e){
var e = e || window.event,
src = e.target || e.srcElement,
action, returnVal;
while(src && src !== dom)
{
action = src.getAttribute('attr-action') || src.getAttribute("class");
if(listeners[action])
{
returnVal = listeners[action]({
src: src,
e: e,
action:action
});
if(returnVal === false)
{
break;
}
}
src = src.parentNode;
}
})
}
function a(obj, type, handle)
{
if(!obj || !type || !handle)
{
return;
}
if(obj instanceof Array)
{
for(var i = 0, l = obj.length; i < 1; i++)
{
a(obj, type[i], handle);
}
return
}
function createDelegate(handle, context)
{
return function()
{
return handle.apply(context, arguments);
}
}
if(window.addEventListener)
{
var wrapper = createDelegate(handle, obj);
obj.addEventListener(type, wrapper, false);
}
else if(window.attachEvent)
{
var wrapper = createDelegate(handle, obj);
obj.attachEvent("on" + type, wrapper)
}
else
{
obj['on' + type] = handle
}
}
var conf = {
'total':10,
'click': function(index){
console.log(index);
}
}
var page = new pageFunc(conf);
</script>
</body>
</html>