转载:更简单的长遍文章分页方法

最新推荐文章于 2025-12-03 13:04:04 发布

转载最新推荐文章于 2025-12-03 13:04:04 发布 · 55 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/lgh/archive/2008/05/13/1195799.html

文章标签：

#javascript #ViewUI

本文介绍了一种使用JavaScript实现网页内容动态分页的方法。通过计算页面数量并生成相应数量的链接，用户可以点击不同的页码来查看同一页面的不同部分。这种方法提高了用户体验，尤其是在长篇文章中。

<html>

<head>
<title>

JavaScript实例自学手册:通过486个例子掌握Web开发捷径
- 免费试读 - book.csdn.net
</title><meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<style type="text/css">

#frameContent{

width:500px; /*调整显示区的宽*/

height:200px; /*调整显示区的高*/

font-size:14px;

line-height:20px;

border:1px solid #000000;

overflow-pageINdex:hidden;

overflow-y:hidden;

word-break:break-all;

}

font-size:12px;

color:#000000;

text-decoration:underline;

}

a:hover{

font-size:12px;

color:#CC0000;

text-decoration:underline;

}

</style>

</head>

<body>

在这里输入你的文章这里输入你的文章这里输入你的文章这里输入你的文章这里输入你的文章这里输入你的文章这里输入你的文章这里输入你的文章这里输入你的文章这里输入你的文章这里输入你的文章这里输入你的文章这里输入你的文章这里输入你的文章这里输入你的文章这里输入你的文章这里输入你的文章这里输入你的文章这里输入你的文章这里输入你的文章这里输入你的文章这里输入你的文章这里输入你的文章这里输入你的文章这里输入你的文章这里输入你的文章这里输入你的文章这里输入你的文章这里输入你的文章这里输入你的文章这里输入你的文章这里输入你的文章这里输入你的文章这里输入你的文章这里输入你的文章这里输入你的文章这里输入你的文章这里输入你的文章这里输入你的文章这里输入你的文章这里输入你的文章这里输入你的文章这里输入你的文章这里输入你的文章这里输入你的文章这里输入你的文章这里输入你的文章这里输入你的文章这里输入你的文章这里输入你的文章这里输入你的文章这里输入你的文章这里输入你的文章这里输入你的文章这里输入你的文章这里输入你的文章这里输入你的文章这里输入你的文章这里输入你的文章这里输入你的文章这里输入你的文章这里输入你的文章这里输入你的文章这里输入你的文章这里输入你的文章这里输入你的文章这里输入你的文章这里输入你的文章这里输入你的文章这里输入你的文章这里输入你的文章这里输入你的文章这里输入你的文章这里输入你的文章这里输入你的文章这里输入你的文章这里输入你的文章这里输入你的文章这里输入你的文章这里输入你的文章这里输入你的文章这里输入你的文章这里输入你的文章这里输入你的文章这里输入你的文章这里输入你的文章这里输入你的文章这里输入你的文章这里输入你的文章这里输入你的文章这里输入你的文章这里输入你的文章这里输入你的文章这里输入你的文章这里输入你的文章这里输入你的文章这里输入你的文章这里输入你的文章这里输入你的文章这里输入你的文章这里输入你的文章这里输入你的文章这里输入你的文章这里输入你的文章这里输入你的文章这里输入你的文章这里输入你的文章这里输入你的文章这里输入你的文章这里输入你的文章这里输入你的文章这里输入你的文章

</div>

<P>

var obj = document.getElementById("frameContent"); //获取内容层

var pages = document.getElementById("pages"); //获取翻页层

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> ";

//循环输出第几页

}