JS控制多个相同id的div块的显示和隐藏，实现分页和每页显示个数效果

今天实现了JS控制多个相同id的div块的显示和隐藏，实现分页和可以选择每页显示件数的效果，代码贴出来跟大家分享一下。
ASPX页面代码：

<select id="selCount" name="selCount" onchange ="showDivNum()">
<option value ="0">请选择</option>
<option value ="5">5件</option>
<option value ="10">10件</option>
<option value ="20">20件</option>
<option value ="30">30件</option>
<option value ="<%=Integer.MaxValue %>">全部显示</option>
</select> 
<div id="box" name="box"><div>
<div id="box" name="box"><div> 
<div id="box" name="box"><div> 
<div id="box" name="box"><div> 
<div id="box" name="box"><div> 
<div id="box" name="box"><div> 
......
<div id="pageCount"></div>     <!--用于存放分页页数显示-->
如何所示的div块可以有很多个。
js脚本代码如下：

function showDivNum()
{
var count=document.getElementById('selCount').value ; //每页显示个数
var div_array=document.getElementsByName('B8-infoBox') ;//总件数   
for(var i=0;i<div_array.length;i++)
{
if(i<count)  //初始化显示所选择的件数
{
div_array[i].style.display = "block";
}
else
{
div_array[i].style.display = "none";
}
}
var index =Math.ceil(div_array.length /count ); //分页数，Math.ceil向上取整  
var pageHTML="|";
for (var i=1;i<=index ;i++)
{
pageHTML +="<a href='javascript:changeShowDiv("+i+")'>"+i+"</a>|";
}
document.getElementById("pageCount").innerHTML =pageHTML.substring(0,pageHTML.length-1);

}

function changeShowDiv(cnt)
{
var count=document.getElementById('selCount').value ; //每页显示个数
var div_array=document.getElementsByName('B8-infoBox') ;//总件数
var m1=(cnt-1)*count;//根据选择要显示的第几页，算出起始项
var m2=cnt*count;//算出结束项
alert(m1);alert(m2);
for(var i=0;i<div_array.length;i++)
{
if(m1<=i&&i<m2)
{
div_array[i].style.display = "block";
}
else
{
div_array[i].style.display = "none";
}
}
}
</script>
由于时间有限，所以js代码没进行优化精简，有兴趣的朋友可以自己试试合并减短重复代码。

转载自http://hi.baidu.com/0521121059/blog/item/a9d35c1dbdb2738187d6b6a3.html