由于工作需要

  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. Application(basic)----Easyui

    一,效果图. 二,源代码. <!DOCTYPE html><html><head> <meta charset="UTF-8"> & ...

  2. 一周学会Mootools 1.4中文教程:(4)类型

    Mootools的类型主要包含下边几部分:String:字符串;Number:数字;Array:数组;Object:对象;Json:;Cookie:. 这也是我们今天的讲述重点.每一种数据类型Mt都为 ...

  3. hdu 4612 Warm up 有重边缩点+树的直径

    题目链接 Warm up Time Limit: 10000/5000 MS (Java/Others)    Memory Limit: 65535/65535 K (Java/Others)Tot ...

  4. Gulp 之二

    Gulp学习2 之前已经配置过一篇啦, 只不过那次是针对browserify 搬运 http://markpop.github.io/2014/09/17/Gulp%E5%85%A5%E9%97%A8 ...

  5. MYSQL 执行计划

    Explain语法 EXPLAIN SELECT …… 变体: 1. EXPLAIN EXTENDED SELECT …… 将执行计划“反编译”成SELECT语句,运行SHOW WARNINGS 可得 ...

  6. Linux 组与用户

    组: 添加: groupadd groupName -g groupID  --> groupadd dba -g 502 删除: groupdel  groupName             ...

  7. HDU 5741 Helter Skelter(构造法)

    [题目链接] http://acm.hdu.edu.cn/showproblem.php?pid=5741 [题目大意] 一个01相间的串,以0开头,给出的序列每个数字表示连续的0的个数或者1的个数, ...

  8. 《windows程序设计》学习_3.1:画出雷区,左键的使用

    #include<windows.h> #include "resource.h" LRESULT CALLBACK WndProc (HWND, UINT, WPAR ...

  9. java类的结构(属性、方法、构造函数)

    一.类的定义形式类定义的一般形式如下 [类定义修饰符] class  <类名> {   //类体 [成员变量声明] [构造函数] [成员方法] } 前面说过,在描述java语法时,方括号中 ...

  10. Java "==和equals区别"

    本文转载至中软国际电子政务部Jeff Chi总结,转载请说明出处. 概述:        A.==可用于基本类型和引用类型:当用于基本类型时候,是比较值是否相同:当用于引用类型的时候,是比较对象是否相 ...