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 alert("已到达首页");
return;
}
var NumRecords;
if (item.length == 1) {
NumRecords = item.length;
} else {
NumRecords = item.length - 1; //信息总条数，减一因为是从下标[1]开始存的信息。
}
//没有信息就返回
if (NumRecords 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 strText += "

"
for (var j = 1; j if (start strText += "
• " + item[start].title + "" + item[start].store_time + "
";
start++;
}
}
strText += "

"
}
document.getElementById("title1").innerHTML = strText;
//如果总页数不足5条
if (NumPages beginpage = 1;
endpage = NumPages;
} else {
//如果显示最前面的5页
if (currpage 0) {
beginpage = 1;
endpage = 10;
}
//如果显示最后面的5页
if (currpage (NumPages - 9)) {
beginpage = NumPages - 9;
endpage = NumPages;
}
//其他情况
if (currpage > 5 && currpage if (currpage >= (endpage + 1)) {
beginpage += 10;
endpage += 10;
}
if (currpage beginpage -= 10;
endpage -= 10;
}
}
}
var showtext = "";
if (NumPages > 0) {
showtext += " ";
showtext += "上一页 ";
var currpages = currpage var currpage1 = currpage if (NumPages currpage1 = 1;
currpages = NumPages;
} else if (currpage1 >= 2) {
showtext += "1 ";
if (currpage1 > 2) {
showtext += "...";
}
}
for (i = currpage1; i if (currpage == (i)) {
showtext += "" + i + " ";
} else {
showtext += "" + i + " ";
}
}
if (NumPages > 10 && currpages if (currpages showtext += "...";
}
showtext += "" + NumPages + " ";
}
showtext = showtext + "下一页 ";
showtext = showtext + ">>";
}
document.getElementById("page1").innerHTML = showtext;
}

调用：

复制代码 代码如下:

具体的演示代码:

<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> <script language="javascript"> 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 + "<span>" + item[start].store_time + ""; start++; } } strText += "</script>

" } 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; }

演示

• 学无止境 25(03月17日 23:47)
• 学无止境 24(03月17日 23:42)
• 学无止境 23(03月17日 23:32)
• 学无止境 22(03月17日 23:29)
• 学无止境 21(03月17日 23:19)

 上一页 1 2 3 4 5 下一页 >>

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]