> 웹 프론트엔드 > JS 튜토리얼 > javascript 뉴스 제목 정적 페이징 코드(새로 고침 없음)_javascript 기술

javascript 뉴스 제목 정적 페이징 코드(새로 고침 없음)_javascript 기술

WBOY
풀어 주다: 2016-05-16 18:32:14
원래의
1365명이 탐색했습니다.
曾祥展 曾祥展
데이터베이스에서 n개의 레코드를 가져와 정적을 생성하는 템플릿입니다.
단일 페이지를 정적으로 만들기 위해 인덱스 페이지에서는 JS를 사용하여 배열을 결합합니다.
기록은 제목과 링크이므로 바이트 수가 너무 많지는 않습니다.
그러면 js를 사용하여 페이징에 이 큰 배열을 사용하면 보기에도 좋고 대역폭도 절약됩니다. 여전히 훌륭하고 간단하며 실용적이며 추천할만한 가치가 있습니다!
JS 코드:

코드 복사 코드는 다음과 같습니다.

function title_array(title, link_add, store_time) {
this.title = title;
this.link_add = link_add;
this.store_time = store_time;
}
var ii = 0;
var item = new Array();
ii++; item[ii] = new title_array('学无止境 25', '#', '(03月17日 23:47)');
ii++; item[ii] = new title_array('学无止境 24', '#', '(03月17日 23:42)');
ii++; item[ii] = new title_array('学无止境 23', '#', '(03月17日 23:32)');
ii++; item[ii] = new title_array('学无止境 22', '#', '(03月17日 23:29)');
ii++; item[ii] = new title_array('学无止境 21', '#', '(03月17日 23:19)');
ii++; item[ii] = new title_array('学无止境 20', '#', '(03月17日 23:15)');
ii++; item[ii] = new title_array('学无止境 19', '#', '(03月17日 23:13)');
ii++; item[ii] = new title_array('学无止境 18', '#', '(03月17日 23:12)');
ii++; item[ii] = new title_array('学无止境 17', '#', '(03月17日 23:10)');
ii++; item[ii] = new title_array('学无止境 16', '#', '(03月17日 22:35)');
ii++; item[ii] = new title_array('学无止境 15', '#', '(03月17日 22:29)');
ii++; item[ii] = new title_array('学无止境 14', '#', '(03月17日 22:28)');
ii++; item[ii] = new title_array('学无止境 13', '#', '(03月17日 22:27)');
ii++; item[ii] = new title_array('学无止境 12', '#', '(03月17日 22:26)');
ii++; item[ii] = new title_array('学无止境 11', '#', '(03月17日 22:24)');
ii++; item[ii] = new title_array('学无止境 10', '#', '(03月17日 22:23)');
ii++; item[ii] = new title_array('学无止境 9', '#', '(03月17日 22:02)');
ii++; item[ii] = new title_array('学无止境 8', '#', '(03月17日 22:02)');
ii++; item[ii] = new title_array('学无止境 7', '#', '(03月17日 22:01)');
ii++; item[ii] = new title_array('学无止境 6', '#', '(03月17日 21:51)');
ii++; item[ii] = new title_array('学无止境 5', '#', '(03月17日 21:51)');
ii++; item[ii] = new title_array('学无止境 4', '#', '(03月17日 21:50)');
ii++; item[ii] = new title_array('学无止境 3', '#', '(03月17日 21:31)');
ii++; item[ii] = new title_array('学无止境 2', '#', '(03月17日 21:30)');
ii++; item[ii] = new title_array('学无止境 1', '#', '(03月17日 21:30)');
//要显示的页面
var currpage = 1;
//一页显示信息条数为40
var pagesize = 5;
//页数维护所显示的第一页
var beginpage = 1;
//页数维护所显示的最后一页
var endpage = 100;
//显示某一页的内容
function displaypage(onepage) {
if (onepage < 1) {
alert("已到达首页");
return;
}
var NumRecords;
if (item.length == 1) {
NumRecords = item.length;
} else {
NumRecords = item.length - 1; //信息总条数,减一因为是从下标[1]开始存的信息。
}
//没有信息就返回
if (NumRecords <= 0) {
return false;
}
NumPages = Math.floor((NumRecords + (pagesize - 1)) / pagesize); //总页数
if (onepage > NumPages) {
alert("已经到达尾页");
return;
}
currpage = onepage;
//该页的第一行
var start = pagesize * (currpage - 1) + 1;
if (NumRecords == 1) {
start = start - 1;
}
if (start >= item.length) return;
//装入该页内容
var strText = "";
for (var i = 1; i <= pagesize / 5; i++) {
strText += "
    "
    for (var j = 1; j <= 5; j++) {
    if (start < item.length) {
    strText += "
  • " + item[start].title + "" + item[start].store_time + "
  • ";
    start++;
    }
    }
    strText += "
"
}
document.getElementById("title1").innerHTML = strText;
//총 페이지 수가 5 미만인 경우
if (NumPages < 10) {
beginpage = 1;
endpage = NumPages;
} else {
//처음 5페이지가 표시되는 경우
if (currpage <= 5 && currpage > 0) {
startpage = 1 ;
endpage = 10;
}
//마지막 5페이지가 표시되는 경우
if (currpage <= NumPages && currpage > (NumPages - 9)) {
beginpage = NumPages - 9;
endpage = NumPages;
}
//기타 상황
if (currpage > 5 && currpage < (NumPages - 9)) {
if ( currpage > = (끝페이지 1)) {
beginpage = 10;
endpage = 10;
}
if (currpage <= (시작페이지 - 1)) {
시작페이지 -= 10;
끝페이지 -= 10;
}
}
}
var showtext = ""
if (NumPages > 0) {
showtext = "< 스팬 클래스= "tpb_right"><< ";
showtext = "이전 페이지 ";
var currpages = currpage < NumPages - 2 ? currpage 2 : NumPages;
var currpage1 = currpage <= 2 ? 1 : currpages - 2;
if (NumPages <= 10) {
currpages1 = 1;
currpages = NumPages
} else if (currpage1 >= 2) {
showtext = "1 ";
if (currpage1 > 2) {
showtext = "..."
}
}
for (i = currpage1; i <= currpages; i ) {
if (currpage == (i)) {
showtext = "" i " ";
} else {
showtext = " ";
}
}
if (NumPages > 10 && currpages <= NumPages - 1) {
if (currpages < NumPages - 1 ) {
showtext = "...";
}
showtext = "
" NumPages "
}
showtext = showtext "다음 페이지"
showtext = showtext ">>"
}
document.getElementById("page1").innerHTML =
}

전화:
코드 복사 코드는 다음과 같습니다.




특정 데모 코드:

[Ctrl A 모두 선택 참고:
외부 J를 도입해야 하는 경우 실행하려면 새로 고쳐야 합니다
" } document.getElementById("title1").innerHTML = strText; //如果总页数不足5条 if (NumPages 0) { beginpage = 1; endpage = 10; } //如果显示最后面的5页 if (currpage (NumPages - 9)) { beginpage = NumPages - 9; endpage = NumPages; } //其他情况 if (currpage > 5 && currpage = (endpage + 1)) { beginpage += 10; endpage += 10; } if (currpage 0) { showtext += " "; showtext += "上一页 "; var currpages = currpage = 2) { showtext += "1 "; if (currpage1 > 2) { showtext += "..."; } } for (i = currpage1; i " + i + " "; } else { showtext += "" + i + " "; } } if (NumPages > 10 && currpages " + NumPages + " "; } showtext = showtext + "下一页 "; showtext = showtext + ">>"; } document.getElementById("page1").innerHTML = showtext; } ]
관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
최신 이슈
인기 추천
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿