一个模板，从数据库取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 +=
"<div class=\"title_list\"><ul class=\"title_list bluepoint\">"
for
(
var
j = 1; j <= 5; j++) {
if
(start < item.length) {
strText +=
"<li><a href=\""
+ item[start].link_add +
"\" target=\"_blank\">"
+ item[start].title +
"</a><span>"
+ item[start].store_time +
"</span></li>"
;
start++;
}
}
strText +=
"</ul></div>"
}
document.getElementById(
"title1"
).innerHTML = strText;
//如果总页数不足5条
if
(NumPages < 10) {
beginpage = 1;
endpage = NumPages;
}
else
{
//如果显示最前面的5页
if
(currpage <= 5 && currpage > 0) {
beginpage = 1;
endpage = 10;
}
//如果显示最后面的5页
if
(currpage <= NumPages && currpage > (NumPages - 9)) {
beginpage = NumPages - 9;
endpage = NumPages;
}
//其他情况
if
(currpage > 5 && currpage < (NumPages - 9)) {
if
(currpage >= (endpage + 1)) {
beginpage += 10;
endpage += 10;
}
if
(currpage <= (beginpage - 1)) {
beginpage -= 10;
endpage -= 10;
}
}
}
var
showtext =
""
;
if
(NumPages > 0) {
showtext +=
"<span class=\"tpb_right\"><a href=\"javascript:displaypage(1)\" class=\"tpb_btn_previous\"><<</a> "
;
showtext +=
"<a href=\"javascript:displaypage(currpage-1)\">上一页</a> "
;
var
currpages = currpage < NumPages - 2 ? currpage + 2 : NumPages;
var
currpage1 = currpage <= 2 ? 1 : currpage - 2;
if
(NumPages <= 10) {
currpage1 = 1;
currpages = NumPages;
}
else
if
(currpage1 >= 2) {
showtext +=
"<a href=\"javascript:displaypage(1)\">1</a> "
;
if
(currpage1 > 2) {
showtext +=
"..."
;
}
}
for
(i = currpage1; i <= currpages; i++) {
if
(currpage == (i)) {
showtext +=
"<a class=\"cur\" href=\"javascript:displaypage("
+ i +
")\">"
+ i +
"</a> "
;
}
else
{
showtext +=
"<a href=\"javascript:displaypage("
+ i +
")\">"
+ i +
"</a> "
;
}
}
if
(NumPages > 10 && currpages <= NumPages - 1) {
if
(currpages < NumPages - 1) {
showtext +=
"..."
;
}
showtext +=
"<a href=\"javascript:displaypage("
+ NumPages +
")\">"
+ NumPages +
"</a> "
;
}
showtext = showtext +
"<a href=\"javascript:displaypage(currpage+1)\">下一页 </a>"
;
showtext = showtext +
"<a href=\"javascript:displaypage(NumPages)\">>></a></span>"
;
}
document.getElementById(
"page1"
).innerHTML = showtext;
}
|
调用：
<DIV id=title1> </DIV>
<DIV id=page1
class
=turn_page_box> </DIV>
<SCRIPT language=javascript>
//默认显示首页的内容
displaypage(1);
</SCRIPT>
|
