javascript 新闻标题静态分页代码 (无刷新)

 更新时间:2010年03月17日 19:04:45   作者:  
一个模板,从数据库取n条记录,生成静态。做单页面的静态化,索引页面是用JS对数组进行组合的。
曾祥展   曾祥展
一个模板,从数据库取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>&nbsp;";
showtext += "<a href=\"javascript:displaypage(currpage-1)\">上一页</a>&nbsp;";
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>&nbsp;";
if (currpage1 > 2) {
showtext += "...";
}
}
for (i = currpage1; i <= currpages; i++) {
if (currpage == (i)) {
showtext += "<a class=\"cur\" href=\"javascript:displaypage(" + i + ")\">" + i + "</a>&nbsp;";
} else {
showtext += "<a href=\"javascript:displaypage(" + i + ")\">" + i + "</a>&nbsp;";
}
}
if (NumPages > 10 && currpages <= NumPages - 1) {
if (currpages < NumPages - 1) {
showtext += "...";
}
showtext += "<a href=\"javascript:displaypage(" + NumPages + ")\">" + NumPages + "</a>&nbsp;";
}
showtext = showtext + "<a href=\"javascript:displaypage(currpage+1)\">下一页&nbsp;</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>

具体的演示代码:

[Ctrl+A 全选 注:引入外部Js需再刷新一下页面才能执行]

相关文章

  • JS获取屏幕高度的简单实现代码

    JS获取屏幕高度的简单实现代码

    下面小编就为大家带来一篇JS获取屏幕高度的实现代码。小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-05-05
  • 详解webpack babel的配置

    详解webpack babel的配置

    本篇文章主要介绍了详解webpack babel的配置,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-01-01
  • JS基于onclick事件实现单个按钮的编辑与保存功能示例

    JS基于onclick事件实现单个按钮的编辑与保存功能示例

    这篇文章主要介绍了JS基于onclick事件实现单个按钮的编辑与保存功能,结合实例形式分析了JS实现onclick响应事件的转换相关操作技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2017-02-02
  • javascript 拷贝节点cloneNode()使用介绍

    javascript 拷贝节点cloneNode()使用介绍

    这篇文章主要介绍了javascript 节点操作拷贝节点cloneNode()的使用,需要的朋友可以参考下
    2014-04-04
  • 解决前端跨域问题方案汇总

    解决前端跨域问题方案汇总

    这篇文章主要介绍了解决前端跨域问题8种方案的相关资料,需要的朋友可以参考下
    2016-11-11
  • JavaScript对象学习小结

    JavaScript对象学习小结

    JavaScript 中的所有事物都是对象:字符串、数值、数组、函数.几乎用到的每个js都离不开它的js对象。此外,JavaScript 允许自定义对象,下面跟着小编学习javascript对象学习小结,需要的朋友可以参考下
    2015-09-09
  • 小程序中英文混合排序问题解决

    小程序中英文混合排序问题解决

    这篇文章主要介绍了小程序中英文混合排序问题解决,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2019-08-08
  • js+audio实现音乐播放器

    js+audio实现音乐播放器

    这篇文章主要为大家详细介绍了js+audio实现音乐播放器,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-09-09
  • JS匿名函数实例分析

    JS匿名函数实例分析

    这篇文章主要介绍了JS匿名函数,结合实例形式分析了javascript匿名函数的定义、参数、返回值等相关使用方法,需要的朋友可以参考下
    2016-11-11
  • js删除局部变量的实现方法

    js删除局部变量的实现方法

    下面小编就为大家带来一篇js删除局部变量的实现方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-06-06

最新评论