由于工作需要

　　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 内容显示分页的更多相关文章

  1. div滚动条时div内容显示一半

    本文为博主原创,未经允许不得转载 今天在做页面浏览器适配时,将页面中的一个div进行放大时,出现了滚动条,但滚动条对应div中的 内容只能显示一半. 仔细对应属性样式时,div具有overflow:h ...

  2. 内容显示分页数字分页 aspx

    此处是aspx里面分页显示,数据层和业务层是由动软生成 当然,我们也可以可以利用listView实现分页ListView(高效分页) public partial class NewList : Sy ...

  3. js div的显示和隐藏

    <head>    <title></title>    <style type="text/css">        div    ...

  4. js对文章内容进行分页示例代码

    这篇文章主要介绍了使用js对文章内容进行分页的具体实现,需要的朋友可以参考下 Thinkphp中文章显示代码: 代码如下: <div id="showContent"> ...

  5. js 控制Div循环显示 非插件版

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  6. JS控制DIV隐藏显示

    转载自:http://blog.sina.com.cn/s/blog_6c3a67be0100ldbe.html JS控制DIV隐藏显示 一,需求描述: 现在有3个DIV块,3个超链接,需要点击一个链 ...

  7. 利用JS做到隐藏div和显示div

    div的visibility可以控制div的显示和隐藏,但是隐藏后页面显示空白 style="visibility: none;" document.getElementById( ...

  8. js 获取浏览器显示内容的宽度和高度

      js获取浏览器显示内容的宽度和高度 CreateTime--2017年7月10日17:24:12Author:Marydon 1.获取浏览器屏幕显示d的网页宽度 /** * 得到浏览器显示的屏幕高 ...

  9. Firebug中调试中的js脚本中中文内容显示为乱码

    Firebug中调试中的js脚本中中文内容显示为乱码 设置 页面 UFT-8 编码没用, 解决方法:点击 "Firebug"工具栏 中的"选项"---" ...

随机推荐

  1. codevs 3013 单词背诵 hash

    题目链接 题目描述 Description 灵梦有n个单词想要背,但她想通过一篇文章中的一段来记住这些单词. 文章由m个单词构成,她想在文章中找出连续的一段,其中包含最多的她想要背的单词(重复的只算一 ...

  2. 【转】CentOS图形界面的开启与关闭

    源自:http://blog.sina.com.cn/s/blog_4a1f76860100zpus.html 安装CentOS 5.6系统的时候我没有先装任何组件,现在用X Window,需要再安装 ...

  3. zoj 3171 The Hidden 7's

    这道题,我在网上看到两种dp,不过基本原理是一样的,不过感觉还是后面的一种比较巧妙!因为我对动态不是很熟,自能加上一些自己的理解,写上注释. 1) #include <stdio.h> # ...

  4. Umbraco隐藏属性

    Umbraco默认的Url地址,是根据Node路径来默认显示的,因此使用中文的话比较尴尬. 网上有传的方法,是修改源码,来实现Url的重写. 但实际大可不必如此麻烦,只需要增加两个类型为Textstr ...

  5. BBM（Bad Block Management）坏块管理

    不管WL算法如何高明,在使用中都会碰到一个头痛的问题,那就是坏块,所以一个SSD必须要有坏块管理机制.何谓坏块?一个闪存块里包含有不稳定的地址,不能保证读/写/擦时数据的准确性.            ...

  6. RHEL6.4 postfix+dovecot搭建邮件服务器

    实验需求:为公司搭建一台能够收信和发信的邮件服务器(192.168.100.1),为员工提供服务,公司域名为jinjianjun.com. 一.修改DNS服务器(192.168.100.2)上mx邮件 ...

  7. perl 爬取上市公司业绩预告

    <pre name="code" class="python">use LWP::UserAgent; use utf8; use DBI; use ...

  8. chrome extensions

        chrome web store   AppsGamesExtensionsThemes   CATEGORIES   All FEATURESClear   Runs Offline By ...

  9. VC中使用GetModuleFileName获取应用程序路径

      .\\与API函数GetModuleFileName获取应用程序目录有何不一样? 采用.\\也能获得应用程序目录,采用GetModuleFileName也能获得,二者有何不同? 一样!一个是相对路 ...

  10. java载入XML文件并解析xml

    import java.io.File; import java.util.List; import org.dom4j.Document; import org.dom4j.DocumentExce ...