首页 > web前端 > js教程 > 正文

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

php中文网
发布: 2016-05-16 18:32:14
原创
1676人浏览过
曾祥展   曾祥展
一个模板,从数据库取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;
}

调用:
复制代码 代码如下:





具体的演示代码:
" } 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; }
演示

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
java速学教程(入门到精通)
java速学教程(入门到精通)

java怎么学习?java怎么入门?java在哪学?java怎么学才快?不用担心,这里为大家提供了java速学教程(入门到精通),有需要的小伙伴保存下载就能学习啦!

下载
来源:php中文网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
开源免费商场系统广告
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号