 |
热门文章 |
|
|
|
相关文章 |
|
| 没有相关文章 |
|
|
| 一个js静态分页程序 |
| 来源：蓝色理想 更新时间：2010/9/9 0:06:53 阅读次数： 我要投稿 |
|
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style type="text/css">
<!--
#pages{ color:#666}
#pages span{ border:1px solid #ddd; line-height:1.2; margin:0 3px; padding:3px 4px; color:#ccc }
#pages span a{ text-decoration:none; color:#333333}
#pages span a:hover{}
#pages strong{ color:#FF0000; padding:0 3px; font-weight:bold}
-->
</style>
</head>
<body>
<ul id="pageContent">
<li>科研处关于科研成果登记的通知1</li>
<li>关于清除炒股聊天等软件的通知2</li>
<li>科研处关于科研成果登记的通知3</li>
<li>关于清除炒股聊天等软件的通知4</li>
<li>科研处关于科研成果登记的通知5</li>
<li>关于清除炒股聊天等软件的通知6</li>
<li>科研处关于科研成果登记的通知7</li>
<li>关于清除炒股聊天等软件的通知8</li>
<li>科研处关于科研成果登记的通知9</li>
<li>关于清除炒股聊天等软件的通知10</li>
<li>科研处关于科研成果登记的通知11</li>
<li>关于清除炒股聊天等软件的通知12</li>
<li>科研处关于科研成果登记的通知13</li>
<li>关于清除炒股聊天等软件的通知14</li>
<li>科研处关于科研成果登记的通知15</li>
<li>关于清除炒股聊天等软件的通知16</li>
<li>科研处关于科研成果登记的通知17</li>
<li>关于清除炒股聊天等软件的通知18</li>
<li>科研处关于科研成果登记的通知19</li>
<li>关于清除炒股聊天等软件的通知20</li>
<li>科研处关于科研成果登记的通知21</li>
<li>关于清除炒股聊天等软件的通知22</li>
<li>科研处关于科研成果登记的通知23</li>
<li>关于清除炒股聊天等软件的通知24</li>
<li>科研处关于科研成果登记的通知25</li>
<li>关于清除炒股聊天等软件的通知26</li>
<li>科研处关于科研成果登记的通知27</li>
<li>关于清除炒股聊天等软件的通知28</li>
<li>科研处关于科研成果登记的通知29</li>
<li>关于清除炒股聊天等软件的通知30</li>
<li>科研处关于科研成果登记的通知31</li>
<li>关于清除炒股聊天等软件的通知32</li>
<li>科研处关于科研成果登记的通知33</li>
<li>关于清除炒股聊天等软件的通知34</li>
<li>科研处关于科研成果登记的通知35</li>
<li>关于清除炒股聊天等软件的通知36</li>
<li>科研处关于科研成果登记的通知37</li>
<li>关于清除炒股聊天等软件的通知38</li>
<li>科研处关于科研成果登记的通知39</li>
<li>关于清除炒股聊天等软件的通知40</li>
</ul>
<style type="text/css">
<!--
#pages{ color:#666}
#pages span{ border:1px solid #ddd; line-height:1.2; margin:0 3px; padding:3px 4px; color:#ccc }
#pages span a{ text-decoration:none; color:#333333}
#pages span a:hover{}
#pages strong{ color:#FF0000; padding:0 3px; font-weight:bold}
-->
</style>
<div id="pages"> <span id="spanFirst">首页</span> <span id="spanPre">上一页</span> <span id="spanNext">下一页</span> <span id="spanLast">尾页</span> 第<strong id="spanPageNum"></strong>页/共<strong id="spanTotalPage"></strong>页 </div>
<script type="text/javascript">
var theUL = document.getElementById("pageContent");
var totalPage = document.getElementById("spanTotalPage");
var pageNum = document.getElementById("spanPageNum"); //获取当前页<span>
var spanPre = document.getElementById("spanPre"); //获取上一页<span>
var spanNext = document.getElementById("spanNext"); //获取下一页<span>
var spanFirst = document.getElementById("spanFirst"); //获取第一页<span>
var spanLast = document.getElementById("spanLast"); //获取最后一页<span>
var numberRowsInTable = theUL.getElementsByTagName("li").length; //记录总条数
var pageSize = 8; //每页显示的记录条数
var page = 1; //当前页，默认第一页
//下一页
function next(){
hideTable();
currentRow = pageSize * page;
maxRow = currentRow + pageSize;
if ( maxRow > numberRowsInTable ) maxRow = numberRowsInTable;
for ( var i = currentRow; i< maxRow; i++ ){
theUL.getElementsByTagName("li")[i].style.display = '';
}
page++;
if ( maxRow == numberRowsInTable ) {
nextText();
lastText();
}
showPage();
preLink();
firstLink();
}
//上一页
function pre(){
hideTable();
page--;
currentRow = pageSize * page;
maxRow = currentRow - pageSize;
if ( currentRow > numberRowsInTable ) currentRow = numberRowsInTable;
for ( var i = maxRow; i< currentRow; i++ ){
theUL.getElementsByTagName("li")[i].style.display = '';
}
if ( maxRow == 0 ){
preText();
firstText();
}
showPage();
nextLink();
lastLink();
}
//第一页
function first(){
hideTable();
page = 1;
for ( var i = 0; i<pageSize; i++ ){
theUL.getElementsByTagName("li")[i].style.display = '';
}
showPage();
firstText();
preText();
nextLink();
lastLink();
}
//最后一页
function last(){
hideTable();
page = pageCount();
currentRow = pageSize * (page - 1);
for ( var i = currentRow; i<numberRowsInTable; i++ ){
theUL.getElementsByTagName("li")[i].style.display = '';
}
showPage();
preLink();
nextText();
firstLink();
lastText();
}
function hideTable(){
for ( var i = 0; i<numberRowsInTable; i++ ){
theUL.getElementsByTagName("li")[i].style.display = 'none';
}
}
function showPage(){
pageNum.innerHTML = page;
}
//总共页数
function pageCount(){
return Math.ceil(numberRowsInTable/pageSize);
}
//显示链接
function preLink(){
spanPre.innerHTML = "<a href='javascript:pre();'>上一页</a>";
}
function preText(){
spanPre.innerHTML = "上一页";
}
function nextLink(){
spanNext.innerHTML = "<a href='javascript:next();'>下一页</a>";
}
function nextText(){
spanNext.innerHTML = "下一页";
}
function firstLink(){
spanFirst.innerHTML = "<a href='javascript:first();'>首页</a>";
}
function firstText(){
spanFirst.innerHTML = "首页";
}
function lastLink(){
spanLast.innerHTML = "<a href='javascript:last();'>末页</a>";
}
function lastText(){
spanLast.innerHTML = "末页";
}
//隐藏
function hide(){
for ( var i = pageSize; i<numberRowsInTable; i++ ){
theUL.getElementsByTagName("li")[i].style.display = 'none';
}
totalPage.innerHTML = pageCount();
pageNum.innerHTML = '1';
nextLink();
lastLink();
}
hide();
</script>
</body>
</html> |
|
| 上一篇文章： 网页划词标记划词搜索功能下一篇文章： 用横线hr做出虚线效果 |
|
|
|
注册 登录
