<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>JS_LI分页</title>
<style>
#kan a{ color:red;}
</style>
</head>
<body>
<ul id="all">
<li><a href="#">第1集</a></li>
<li><a href="#">第2集</a></li>
<li><a href="#">第3集</a></li>
<li><a href="#">第4集</a></li>
<li><a href="#">第5集</a></li>
<li><a href="#">第6集</a></li>
<li id="kan"><a href="#">第7集</a></li>
<li><a href="#">第8集</a></li>
<li><a href="#">第9集</a></li>
<li><a href="#">第10集</a></li>
<li><a href="#">第11集</a></li>
<li><a href="#">第13集</a></li>
<li><a href="#">第14集</a></li>
<li><a href="#">第15集</a></li>
</ul>
<div class="page">
第<span id="a2"></span>/<span id="a1"></span>页
<span id="a3"></span> <a href="#" onClick="change(--pageno)">上一页</a>
<a href="#" onClick="change(++pageno)">下一页</a></div>
</body>
<script>
var a = document.getElementById("all").getElementsByTagName("li");
var zz =new Array(a.length)
for(var i=0;i <a.length;i++)
{ zz[i]=a[i].innerHTML } //div的字符串数组付给zz
var pageno=1 //当前页
var pagesize=5 //每页多少条信息
if(zz.length%pagesize==0)
{var pageall =zz.length/pagesize }
else
{var pageall =parseInt(zz.length/pagesize)+1} //一共多少页
function change(e){
pageno=e;
if(e<1)//如果输入页<1页
{ e=1;pageno=1}//就等于第1页 ， 当前页为1
if(e>pageall)//如果输入页大于最大页
{e=pageall;pageno=pageall}//输入页和当前页都=最大页
document.getElementById("all").innerHTML=""//全部清空
for(var i=0;i<pagesize;i++)
{
var div =document.createElement("li")//建立div对象
div.innerHTML=zz[(e-1)*pagesize+i]//建立显示元素
document.getElementById("all").appendChild(div)//加入all中
if(zz[(e-1)*pagesize+i+1]==null)//超出范围跳出
break
}
var ye=""
for(var j=1;j<=pageall;j++)
{
if(e==j)
{ye=ye+"<span><a href='#' onClick='change("+j+")' style='color:#FF0000'>"+j+"</a></span> "}
else
{ye=ye+"<a href='#' onClick='change("+j+")'>"+j+"</a> "}
}
document.getElementById("a1").innerHTML=pageall
document.getElementById("a2").innerHTML=pageno
document.getElementById("a3").innerHTML=ye
}
change(1)
</script>
</body>
</html>
206
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
