由于工作需要

　　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. 推荐一款手机端的图片滑动插件iSlider

    首先先放出中文官方地址   http://be-fe.github.io/iSlider/index.html 这是demo 众所周知,移动端的图片滑动插件有很多,为什么我要推荐这个iSlider呢? ...

  2. 四轴飞行器1.6 emwin与ucgui的移植，汉字外挂字库移植和DEMO效果对比

    飞控的遥控器打算自己做,这样全局都能掌握,可以通过遥控器对飞控的参数和飞行模式进行修改,而买遥控器是做不到这样的哈..以后做图传的时候,屏幕还可以实时现实摄像头拍回来的画面,挺好的哈.. 做遥控我们选 ...

  3. Linux 网络编程基础（1）--网络相关的数据结构及转化函数

    在Linux下进行网络编程,使用的语言一般为C.就个人感受而言,在Linux下进行网络程序的编写,重要的不是代码能力要多强,而是对Linux的网络编程思想的理解和对Linux网络数据结构的掌握.如果想 ...

  4. Excel如何进行SVN

    KSFramework常见问题:Excel如何进行SVN协作.差异比较?   Excel如何进行SVN协作.差异比较? 嗯,这是一个令人困惑的问题.游戏开发.程序开发时,使用Excel可以添加文档.注 ...

  5. Delphi2010新发现-类的构造和析构函数功能

    Delphi2010发布了. 虽然凭着对Delphi的热爱第一时间就安装了,但是现在可能是年纪大了,对新事物缺乏兴趣了.一直都没有仔细研究. 今天有点时间试了一下新功能. 本来C#和Delphi.NE ...

  6. hive原生和复合类型的数据载入和使用

    原生类型 原生类型包含TINYINT,SMALLINT,INT,BIGINT,BOOLEAN,FLOAT,DOUBLE,STRING,BINARY (Hive 0.8.0以上才可用),TIMESTAM ...

  7. 超高性价比USB转CAN适配器，2500V工业级隔离，兼容ZLG软件

    淘宝链接: http://item.taobao.com/item.htm?spm=a230r.1.14.16.QGsAZg&id=20134109594&initiative_new ...

  8. 2.词法结构-JavaScript权威指南笔记

    今天是第二章.所谓词法结构(lexical structure),就是写代码中最基本的东西,变量命名,注释,语句分隔等,这是抄书抄的... 1.字符集,必须是Unicode,反正Unicode是ASC ...

  9. HTML5API___manifest

    离线缓存 manifest 在html标签里面增加个属性 mainfest 就可以告诉浏览器缓存文件在哪里. <html manifest='show.manifest' xmlns=" ...

  10. SqlServer 2015修改表时出现“save changes is not permitted…”的解决方法

    使用SqlServer 2015的过程中,会出现如下情况: 在修改完表字段名或是类型后点击保存时会弹出一个对话框,且无法保存已做的修改.对话框内容大致如下: Saving changes is not ...