js div 内容显示分页

浏览数：94 / 时间：2015年06月09日

由于工作需要

　　div固定大小而内容不定所以如果内容过多自然就显示不出来了所以需要分页一类的功能下面是代码

<!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>根据div高度判断分页的代码</title>
</head>

<body>
<div id="frameContent" style="width:605px;height:400px">
    内容 内容  很多很多内容 
</div>
              
<div id="pages" style="font-size:12px; width:605px; line-height:40px; text-align:center;">
    分页 页数
</div>

<script language="javascript">
var obj = document.getElementById("frameContent");  //获取内容层
var pages = document.getElementById("pages");         //获取翻页层
var pgindex=1;                                      //当前页
window.onload = function()                             //重写窗体加载的事件
{
var allpages = Math.ceil(parseInt(obj.scrollHeight)/parseInt(obj. offsetHeight));//获取页面数量
    pages.innerHTML = "<b>共"+allpages+"页</b> ";     //输出页面数量
for (var i=1;i<=allpages;i++){
        pages.innerHTML += "<a href=\"javascript:showPage(‘"+i+"‘);\">第"+i+"页</a> ";
//循环输出第几页
    }
 pages.innerHTML += " <a href=\"javascript:gotopage(‘-1‘);\">上一页</a>  <a href=\"javascript:gotopage(‘1‘);\">下一页</a>"
}
function gotopage(value){
try{
 value=="-1"?showPage(pgindex-1):showPage(pgindex+1);
 }catch(e){
 
 }
}
function showPage(pageINdex)
{
    
 obj.scrollTop=(pageINdex-1)*parseInt(obj.offsetHeight);                                                                  //根据高度，输出指定的页
 pgindex=pageINdex;
}
</script>
</body>
</html>

　　其实就是在计算 div的显示高度和内容高度获得到一共多少页显示的第几页也就是从多少像素开始显示而已

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

js div 内容显示分页