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

一个模板，从数据库取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 += "

"
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;
//如果总页数不足5条
if (NumPages <10) {
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 <(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 += "上一页 ";
var currpages = currpage <numpages - 2 ? currpage + : 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 += "" + i + " ";
}
}
if (NumPages > 10 && currpages <= NumPages - 1) {
if (currpages <numpages - 1) {
showtext += "...";
}
showtext += "" + NumPages + " ";
}
showtext = showtext + "下一页 ";
showtext = showtext + ">>";
}
document.getElementById("page1").innerHTML = showtext;
}

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

具体的演示代码:
.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% } </p> <fieldset> <legend>演示</legend> <ul class="title_list bluepoint"> <li>学无止境 25<span>(03月17日 23:47)</span></li> <li>学无止境 24<span>(03月17日 23:42)</span></li> <li>学无止境 23<span>(03月17日 23:32)</span></li> <li>学无止境 22<span>(03月17日 23:29)</span></li> <li>学无止境 21<span>(03月17日 23:19)</span></li> </ul> <p> <span class="tpb_right"><></span>
[Ctrl+A 全选 注:引入外部Js需再刷新一下页面才能执行]您可能感兴趣的文章:

• Javascript实现的分页函数
• Javascript实现的分页函数
• javascript+xml技术实现分页浏览
• javascript 支持页码格式的分页类
• Jquery与JS两种方法仿twitter/新浪微博 高度自适应无缝滚动实现代码
• javascript分页代码(当前页码居中)
• Java(基于Struts2) 分页实现代码
• java调用oracle分页存储过程示例
• Java web velocity分页宏示例
• javascript实现简单的分页特效
• 纯javascript实现分页(两种方法)
• JavaMe开发绘制可自动换行文本
• JavaMe开发绘制文本框TextEdit
• JavaMe开发自适应滚动显示

• 新闻标题
• 静态分页

相关文章

• 微信小程序实现获取准确的腾讯定位地址功能示例

  这篇文章主要介绍了微信小程序实现获取准确的腾讯定位地址功能,结合实例形式详细分析了微信小程序使用腾讯地理位置接口的相关注册、操作步骤及接口使用技巧,需要的朋友可以参考下 2019-03-03

• 使用Chrome调试JavaScript的断点设置和调试技巧

  这篇文章主要介绍了使用Chrome调试JavaScript的断点设置和调试技巧,需要的朋友可以参考下 2014-12-12

• 使用Promise解决多层异步调用的简单学习心得

  下面小编就为大家带来一篇使用Promise解决多层异步调用的简单学习心得。小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧 2016-05-05

• ES6新特性之数组、Math和扩展操作符用法示例

  这篇文章主要介绍了ES6新特性之数组、Math和扩展操作符用法,结合实例形式分析了ES6中数组、Math和扩展操作符的新特性、使用方法及相关注意事项,需要的朋友可以参考下 2017-04-04

• Bootstrap的aria-label和aria-labelledby属性实例详解

  这篇文章主要介绍了Bootstrap的aria-label和aria-labelledby属性实例详解,需要的朋友可以参考下 2018-11-11

• JavaScript用JQuery呼叫Server端方法示例代码

  这篇文章主要介绍了JavaScript用JQuery呼叫Server端方法,需要的朋友可以参考下 2014-09-09

• 在layui中使用form表单监听ajax异步验证注册的实例

  今天小编就为大家分享一篇在layui中使用form表单监听ajax异步验证注册的实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧 2019-09-09

• JS正则表达式验证密码格式的集中情况总结

  这篇文章主要介绍了JS正则表达式验证密码格式的集中情况总结,需要的朋友可以参考下 2017-02-02

• JS优化与惰性载入函数实例分析

  这篇文章主要介绍了JS优化与惰性载入函数,结合具体实例形式分析了JS惰性载入的原理、实现技巧与相关注意事项,需要的朋友可以参考下 2017-04-04

• 基于JavaScript实现移动端点击图片查看大图点击大图隐藏

  最近接了个项目，项目需求是这样的，当点击图片查看图片，再次点击大图被隐藏，在移动端用的比较多，因为移动端屏幕小，需要查看大图。具体代码实现过程本文给大家介绍，需要的朋友可以参考下 2015-11-11

最新评论

大家感兴趣的内容

• 1js刷新页面方法大全
• 2JS删除数组里的某个元素方法
• 3JS中setTimeout()的用法详解
• 4JS截取字符串常用方法详细整理
• 5js页面跳转常用的几种方式
• 6js数组与字符串的相互转换方法
• 7JS打开新窗口的2种方式
• 8JS设置cookie、读取cookie、删除
• 9js保留两位小数方法总结
• 10js 将json字符串转换为json对象的

最近更新的内容

• 用JavaScript对JSON进行模式匹配(Part 1-
• 基于BootStrap的前端分页带省略号和上下页
• 利用js制作html table分页示例(js实现分页
• 微信小程序中时间戳和日期的相互转换问题
• 微信小程序input抖动问题的修复方法
• JS获取下拉列表所选中的TEXT和Value的实现
• js中将URL中的参数提取出来作为对象的实现
• JS async 函数的含义和用法实例总结
• javascript replace()用法详解附实例代码
• 深入理解javascript作用域第二篇之词法作

常用在线小工具

微信投稿脚本任务在线工具

关注微信公众号

关于我们 - 广告合作 - 联系我们 - 免责声明 - 网站地图 - 投诉建议 - 在线投稿

©CopyRight 2006-2021 JB51.Net Inc All Rights Reserved. 脚本之家 版权所有

以上就是javascript 新闻标题静态分页代码 (无刷新)的详细内容，更多请关注本站其它相关文章！