javascript news title static paging code (no refresh)_javascript skills

A template that takes n records from the database and generates static.
To make a single page static, the index page uses JS to combine arrays.
Because the record is just a title and a link, the number of bytes will not be too large.
Then use js to use this large array for paging. It looks good and saves bandwidth!
It is still great and simple. , practical and worth recommending!
JS code:

Copy code The code is as follows:

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;
//If the total number of pages is less than 5
if (NumPages < 10) {
beginpage = 1;
endpage = NumPages;
} else {
//If the first 5 pages are displayed
if (currpage <= 5 && currpage > 0) {
beginpage = 1 ;
endpage = 10;
}
//If the last 5 pages are displayed
if (currpage <= NumPages && currpage > (NumPages - 9)) {
beginpage = NumPages - 9;
endpage = NumPages;
}
//Other situations
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 = "<< ";
showtext = "Previous page ";
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 = "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 "Next page ";
showtext = showtext ">>";
}
document.getElementById("page1").innerHTML = showtext;
}

Call:

Copy code The code is as follows:

Specific demo code:

<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>Demo<div id="title1"> <div class="title_list"> <ul class="title_list bluepoint"> <li> <a href="http://www.cnblogs.com/zengxiangzhan/#" target="_blank"></a>Learning never ends 25<span></span>(March 17, 23:47)</li> <li> <a href="http://www.cnblogs.com/zengxiangzhan/#" target="_blank"></a>Learning never ends 24<span></span>(March 17, 23:42)</li> <li> <a href="http://www.cnblogs.com/zengxiangzhan/#" target="_blank"></a>Learning never ends 23<span></span>(March 17, 23:32)</li> <li> <a href="http://www.cnblogs.com/zengxiangzhan/#" target="_blank"></a>Learning never ends 22<span></span>(March 17, 23:29)</li> <li> <a href="http://www.cnblogs.com/zengxiangzhan/#" target="_blank"></a>Learning never ends 21<span></span>(March 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>Previous page<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>Next page<a href="javascript:displaypage(NumPages)"></a>>></span> </div> </fieldset>
[Ctrl A select all Note:

If you need to introduce external Js, you need to refresh to execute ]