• js div 内容显示分页


    由于工作需要 

      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="605px;height:400px">
        内容 内容  很多很多内容 
    </div>
                  
    <div id="pages" style="font-size:12px; 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的显示高度 和内容高度  获得到一共多少页      显示的第几页也就是 从多少像素开始显示而已

  • 相关阅读:
    14. D3D光照
    17. 增加对硬件光照的支持
    ECommerce Starter Kit 数据库表和存储过程一览
    使用 DataAdapter 执行批量更新
    学习Professional ASP.NET 2.0(四)
    c#泛型学习(二)
    学习Professional ASP.NET 2.0(一)
    学习Professional ASP.NET 2.0(二)
    下载:微软网页设计工具CTP测试版(支持asp.net2.0)
    学习ECommerce Starter Kit (1)
  • 原文地址:https://www.cnblogs.com/Teacher-Smoking/p/4173286.html
Copyright © 2020-2023  润新知