JavaScript 페이지 구성 요소 사용 방법 상세 설명
1.최대 5 페이지 를 연속 으로 표시 하고 중간 에 현재 페이지 를 강조 합 니 다(데모 1 참조)
2.totalk 이 0 일 때 전체 요 소 를 숨 깁 니 다(데모 2 참조)
3.total<=5 이면 모든 페이지 수 를 표시 하고'첫 페이지'와'끝 페이지'요 소 를 숨 깁 니 다(demo 3 참조)
4.current 가 중간 에 5 페이지 가 부족 하면 뒤로(앞)5 페이지 를 채 우 고'첫 페이지'('끝 페이지')요 소 를 숨 깁 니 다(예 를 들 어 demo 4 와 demo 5 참조).
5.totalk,current 는 모두 정수 이 고 1<=current<=totalk
원생 JS 로 페이지 구성 요 소 를 실현 하여 상기 수 요 를 실현 합 니 다.아래 몇 가 지 를 주의해 야 합 니까?
1:
page = page.nextSibling.nextSibling;
2:제 공 된
3:홈 페이지,마지막 페이지 의 숨겨 진 상황 에 특히 주의 하 세 요.current-2<=1 시 첫 페이지 를 숨 깁 니 다.current+2.>=totalk 이 끝 페이지 를 숨 기 려 면 첫 페이지,끝 페이지 를 숨 기 고 상기 demo 1,demo 3,demo 4,demo 5 에 존재 해 야 합 니 다.(그 중에서 demo 1 첫 페이지,마지막 페이지 의 숨 김 은 무시 되 기 쉽다!)
HTML
<ul class="pagination" id="jsPagination">
<li> </li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li> </li>
</ul>
.hide{
display: none!important;
}
.pagination{
margin: 0 auto;
padding: 0;
list-style: none;
text-align: center;
}
.pagination li{
display: inline-block;
width: 30px;
height: 30px;
overflow: hidden;
line-height: 30px;
margin: 0 5px 0 0;
font-size: 14px;
text-align: center;
border: 1px solid #00bc9b;
color: #00bc9b;
cursor: pointer;
}
.pagination li.current,
.pagination li:hover{
background: #00bc9b;
color: #ffffff;
}
.demo {
margin: 10px 0;
padding: 10px;
background: #eeeeee;
text-align: center;
}
function pagination(total, current) {
var ele=document.getElementById('jsPagination');
//for demo1
if(current-2>=1&¤t+2<=total)
{
var page=ele.firstChild.nextSibling;
if(current-2==1)
page.className='hide';
for(var i=current-2,p=current-2;i<=current+2;p++,i++)
{
page=page.nextSibling;
console.log(page);
page=page.nextSibling;
console.log(page);
page.innerHTML=i;
if(i==current)
page.className='current';
}
if(current+2==total)
{
var last=page.nextSibling.nextSibling;
last.className='hide';
}
}
//for demo2
else if(total==0)
{
ele.className='pagination hide';
}
//for demo3
else if(total<=5)
{
var fir=ele.firstChild.nextSibling;
fir.className='hide';
var page=fir;
for(var i=1;i<=5;i++) {
page = page.nextSibling.nextSibling;
if (i <= total) {
page.innerHTML=i;
if(i==current)
page.className='current';
}
else
{
page.className='hide';
}
}
var last=page.nextSibling.nextSibling;
last.className='hide';
}
//for demo4
else if(current-2<=0)
{
var page=ele.firstChild.nextSibling;
page.className='hide';
for(var i=1;i<=5;i++) {
page = page.nextSibling.nextSibling;
page.innerHTML=i;
if(i==current)
page.className='current';
}
}
//for demo5
else if(current+2>total)
{
var page=ele.firstChild.nextSibling;
for(var i=total-4;i<=total;i++) {
page = page.nextSibling.nextSibling;
page.innerHTML=i;
if(i==current)
page.className='current';
}
var last=page.nextSibling.nextSibling;
last.className='hide';
}
}이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
[2022.04.19] 자바스크립트 this - 생성자 함수와 이벤트리스너에서의 this18일에 this에 대해 공부하면서 적었던 일반적인 함수나 객체에서의 this가 아닌 오늘은 이벤트리스너와 생성자 함수 안에서의 this를 살펴보기로 했다. new 키워드를 붙여 함수를 생성자로 사용할 때 this는...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
