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

데이터베이스에서 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 =
}

전화:

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

특정 데모 코드:

<style type="text/css"> .title_list ul.bluepoint li { background-image: url(http://images.cnblogs.com/cnblogs_com/zengxiangzhan/WindowsLiveWriter/d064abd774a5_C5D9/dot_title_list_blue_thumb.gif); line-height: 20px; padding-left: 13px; background-repeat: no-repeat; list-style-type: none; background-position: left center; } .title_list ul.bluepoint li a{ text-decoration:none} .title_list ul.title_list li span { padding-left: 10px; font-family: arial; font-size: 12px; color: #666; } .turn_page_box { padding-bottom: 30px; border-right-width: 0px; zoom: 1; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px; padding-top: 0px; font-weight: bold; } .turn_page_box .tpb_right a { border-right-width: 0px; background: none transparent scroll repeat 0% 0%; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px; text-decoration:none } .turn_page_box .tpb_right a:hover { color:#2557bd; text-decoration: underline } .turn_page_box .tpb_right a.cur { background: none transparent scroll repeat 0% 0%; color: #2557bd } .turn_page_box .tpb_right a.cur:hover { background: none transparent scroll repeat 0% 0% } </style> <fieldset style="-moz-border-radius: 8px" align="center"> <legend></legend>데모<div id="title1"> <div class="title_list"> <ul class="title_list bluepoint"> <li> <a href="http://www.cnblogs.com/zengxiangzhan/#" target="_blank"></a>배움은 끝이 없다 25<span></span>(3월 17일 23:47)</li> <li> <a href="http://www.cnblogs.com/zengxiangzhan/#" target="_blank"></a>배움은 끝이 없다 24<span></span>(3월 17일 23:42)</li> <li> <a href="http://www.cnblogs.com/zengxiangzhan/#" target="_blank"></a>배움은 끝이 없다 23<span></span>(3월 17일 23:32)</li> <li> <a href="http://www.cnblogs.com/zengxiangzhan/#" target="_blank"></a>배움은 끝이 없다 22<span></span>(3월 17일 23:29)</li> <li> <a href="http://www.cnblogs.com/zengxiangzhan/#" target="_blank"></a>배움은 끝이 없다 21<span></span>(3월 17일 23:19)</li> </ul> </div> </div> <div id="page1" class="turn_page_box"> <span class="tpb_right"><a class="tpb_btn_previous" href="javascript:displaypage(1)"></a><<<a href="javascript:displaypage(currpage-1)"> </a>이전 페이지<a class="cur" href="javascript:displaypage(1)"> </a>1<a href="javascript:displaypage(2)"> </a>2<a href="javascript:displaypage(3)"> </a>3<a href="javascript:displaypage(4)"> </a>4 <a href="javascript:displaypage(5)"> </a>5<a href="javascript:displaypage(currpage 1)"> </a>다음 페이지<a href="javascript:displaypage(NumPages)"></a>>></span> </div> </fieldset>
[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; } ]