社区学习工具库休闲

简体中文

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

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

WBOY

发布： 2016-05-16 18:32:14

原创

1339 人浏览过

曾祥展

曾祥展

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

" + item[start].title + "" + item[start].store_time + "

"
}
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需刷新才能执行]

相关标签：

新闻标题静态分页

来源：php.cn

上一篇：Jquery Ajax学习实例4 向WebService发出请求，返回实体对象的异步调用_jquery 下一篇：Jquery Ajax学习实例3 向WebService发出请求，调用方法返回数据_jquery

本站声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

作者最新文章

什么是 NullPointerException，如何修复它？

2024-10-22 09:46:29
从新手到程序员：您的旅程从 C 基础知识开始

2024-10-13 13:53:41
使用PHP解锁网络开发：初学者指南

2024-10-12 12:15:51
揭秘 C：为新程序员提供一条清晰简单的道路

2024-10-11 22:47:31
释放您的编码潜力：绝对初学者的 C 编程

2024-10-11 19:36:51
释放你内心的程序员：C 绝对初学者

2024-10-11 15:50:41
使用 C 自动化您的生活：适合初学者的脚本和工具

2024-10-11 15:07:41
PHP 变得简单：Web 开发的第一步

2024-10-11 14:21:21
使用 Python 构建任何东西：释放创造力的初学者指南

2024-10-11 12:59:11
编码的关键：为初学者释放 Python 的力量

2024-10-11 12:17:31

最新问题

在移动视图中，当用户点击链接时，如何关闭此导航栏？当用户点击链接浏览网站时，导航栏没有关闭？我曾尝试向每个链接添加单击事件侦听器以关闭导航栏，但它不起作用！此外，处于活动位置（即X）的hamberberger菜单图标也没有很好地对...

来自于 2024-04-06 19:23:03

0

1

411

使用SCSS生成默认值和CSS变量我正在实现网站样式。出于遗留支持的原因，我需要支持IE11，至少一段时间。出于工作流程和我的理智原因，我想尽可能使用css变量。我已经研究过这个解决方案，它会生成一些有效的东西，但...

来自于 2024-04-06 17:46:54

0

1

355

CSS 样式未应用于网站我正在使用Bootstrap5制作网站，但index.css属性未应用于index.html。当我将鼠标悬停在服务卡上时，背景应该会发生变化，从而产生过渡效果。应该是从这个到这个。...

来自于 2024-04-06 17:12:23

0

1

336

导航栏上的CSS底部边框我有一个导航栏，当悬停列表中的任何项目时，我在底部添加了一条红线，但我想将该红线移到标题下方（例如“服务”），知道如何实现此目的？我在codepen中添加了一个小示例，以便您可以轻...

来自于 2024-04-06 15:04:41

0

2

347

使用'折叠显示”类自定义 Bootstrap 手风琴标题的外观我想设置具有类collapseshow的面板的卡标题样式。在此示例中，它是第一个面板。我尝试使用CSS来使用.accordion.card.card-headerbutton.bt...

来自于 2024-04-06 12:53:11

0

1

376

相关专题

更多>

热门推荐

热门教程

更多>

相关教程

热门推荐

最新课程

最新ThinkPHP 5.1全球首发视频教程(60天成就PHP大牛线上培训班课)

1417756
php入门教程之一周学会PHP

4258949
JAVA 初级入门视频教程

2486502
小甲鱼零基础入门学习Python视频教程

504205
PHP 零基础入门教程

858924

最新下载

更多>

网站特效

网站源码

网站素材

前端模板