class MyPage {
constructor(...args) {
const { pages = 10, currentPage = 1, element = '.my-page', callback = () => {} } = args[0]
this.pages = pages
this.currentPage = currentPage
this.element = element
this.myPageEl = document.querySelector(element)
this.callback = callback
this.init()
this.bindClickEvent()
}
init() {
let htmlStrArr = []
let htmlStr = ""
for (let i = 0; i < this.pages; i++) {
htmlStrArr.push(`<li class="my-page-cell">${i + 1}</li>`)
}
if (this.pages > 10) {
htmlStrArr.splice(7, this.pages - 12, "<li class='my-page-omit'>...</li>")
}
htmlStr = htmlStrArr.join("")
this.myPageEl.innerHTML = `<div class="my-page-prev"><</div>
<ul class="my-page-group">${htmlStr}</ul>
<div class="my-page-next">></div>`
this.clickPageFun(this.currentPage)
if (this.pages > 100) {
this.myPageEl.style.minWidth = 700 + 'px'
}
}
bindClickEvent() {
let btns = document.querySelectorAll(`${this.element} div`)
btns.forEach(el => {
el.onclick = this.switchPage.bind(this)
})
this.myPageEl.onclick = (e) => {
let classNameArr = e.target.className.split(" ")
if (classNameArr.indexOf("my-page-cell") !== -1) {
this.clickPageFun(Number(e.target.innerText))
}
}
}
switchPage(e) {
let page = +document.querySelector(`${this.element} .my-page-checked`).innerText
let classNameArr = e.target.className.split(" ")
if (classNameArr.indexOf("my-page-prev") !== -1) {
this.clickPageFun(page - 1)
} else if (classNameArr.indexOf("my-page-next") !== -1) {
this.clickPageFun(page + 1)
}
}
clickPageFun(page) {
if (this.pages > 10) {
let newEl = ''
if (page <= 6) {
newEl = `
<li class="my-page-cell">1</li>
<li class="my-page-cell">2</li>
<li class="my-page-cell">3</li>
<li class="my-page-cell">4</li>
<li class="my-page-cell">5</li>
<li class="my-page-cell">6</li>
<li class="my-page-cell">7</li>
<li class="my-page-omit">...</li>
<li class="my-page-cell">${this.pages - 1}</li>
<li class="my-page-cell">${this.pages}</li>`
} else if (page >= 7 && page < this.pages - 3) {
newEl = `
<li class="my-page-cell">1</li>
<li class="my-page-cell">2</li>
<li class="my-page-omit">...</li>
<li class="my-page-cell">${page - 1}</li>
<li class="my-page-cell">${page}</li>
<li class="my-page-cell">${page + 1}</li>
<li class="my-page-omit">...</li>
<li class="my-page-cell">${this.pages - 1}</li>
<li class="my-page-cell">${this.pages}</li>`
} else if (page >= this.pages - 3) {
newEl = `
<li class="my-page-cell">1</li>
<li class="my-page-cell">2</li>
<li class="my-page-omit">...</li>
<li class="my-page-cell">${this.pages - 6}</li>
<li class="my-page-cell">${this.pages - 5}</li>
<li class="my-page-cell">${this.pages - 4}</li>
<li class="my-page-cell">${this.pages - 3}</li>
<li class="my-page-cell">${this.pages - 2}</li>
<li class="my-page-cell">${this.pages - 1}</li>
<li class="my-page-cell">${this.pages}</li>`;
}
document.querySelector(`${this.element} .my-page-group`).innerHTML = newEl
}
let pageCellELs = document.querySelectorAll(`${this.element} .my-page-cell`)
pageCellELs.forEach(el => {
if (el.innerText == page) {
el.classList.add('my-page-checked')
} else {
el.classList.remove('my-page-checked')
}
})
this.forbidden(page)
this.callback(page)
}
forbidden(page) {
let prveEl = document.querySelector(`${this.element} .my-page-prev`)
let nextEl = document.querySelector(`${this.element} .my-page-next`)
if (page === 1) {
prveEl.classList.add('my-page-forbid')
} else {
prveEl.classList.remove('my-page-forbid')
}
if (page === this.pages) {
nextEl.classList.add('my-page-forbid')
} else {
nextEl.classList.remove('my-page-forbid')
}
}
}
new MyPage({
pages: 20,
currentPage: 1,
element: '.my-page',
callback: function (page) {
console.log("当前页:", page);
}
})
.my-page {
position: absolute;
left: 50%;
-webkit-transform: translateX(-50%);
-moz-transform: translateX(-50%);
-ms-transform: translateX(-50%);
-o-transform: translateX(-50%);
transform: translateX(-50%);
font-size: 18px;
color: #000000;
line-height: 24px;
overflow: hidden;
text-align: center;
display: inline-block;
}
.my-page .my-page-prev,
.my-page .my-page-next {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
float: left;
width: 40px;
height: 40px;
line-height: 40px;
text-align: center;
border: 1px solid #ddd;
cursor: pointer;
margin-right: 8px;
}
.my-page .my-page-prev.my-page-forbid,
.my-page .my-page-next.my-page-forbid {
pointer-events: none;
background-color: rgba(0, 0, 0, 0.1);
color: rgba(0, 0, 0, 0.2);
}
.my-page .my-page-prev:not(.my-page-forbid):hover,
.my-page .my-page-next:not(.my-page-forbid):hover {
border-color: #21478C;
}
.my-page .my-page-group {
float: left;
margin: 0;
padding: 0;
overflow: hidden;
}
.my-page .my-page-group li {
float: left;
list-style: none;
min-width: 40px;
padding: 0 8px;
height: 40px;
line-height: 40px;
text-align: center;
margin-right: 8px;
cursor: pointer;
}
.my-page .my-page-group .my-page-cell {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
border: 1px solid #ddd;
border-radius: 2px;
}
.my-page .my-page-group .my-page-cell:hover,
.my-page .my-page-group .my-page-checked {
background-color: #21478C;
color: #ffffff;
}
.my-page .my-page-group .my-page-omit {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
pointer-events: none;
}
<div class="my-page"></div>
