在帮一个朋友做它得网站分页时，我想到了一个方法。我不知道网上有没有这样的例子，也没有找。我喜欢自己看到效果去想办法实现，虽危害我的代码得得不规范也不高效，但是写完后还是很开心。今天共享一下这个吧。
思路如下。
我在页面中将要分页的内容用不同的LI来分开，然后用利用DOM来得到LI的个数。设置每页的显示个数后求得共分几页。这里有一个技巧，就是
toutalpage=Math.ceil(toutaltiao/tiaoshu)
得到正确的分页数。
然后写得分页个数
function writepage(){
for (var i=1; i<toutalpage+1; i++)
g("pages").innerHTML=g("pages").innerHTML+"<a href='###' onclick='setpage("+i+" target=_blank)'>第 "+ i +" 页</a>";
}
具体可以去看啦，个人感觉这个做网站静态化时的最终静态页面分页效果可用。不影响搜索收录
具体代码如下：
<!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" lang="utf-8">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta name="Keywords" content="ups scs,网站设计,网站制作,平面设计,效果图制作,广告,论坛,网络代理" />
<meta name="Description" content="ups scs,网站设计,网站制作,平面设计,效果图制作,广告,论坛,网络代理,三原色设计" />
<title>辛苦分页程序--三原色阿PAUL</title>
<style type="text/css">...
<!--
body{...}{margin:0px; padding:0px}
#mainbody{...}{margin:12px auto ; width:600px; border:1px solid #f2f2f2; background-color:#FF9900}
#showmess{...}{margin:12px auto ; width:600px; border:1px solid #f2f2f2;}
#pages{...}{margin:12px auto ; width:600px; border:1px solid #f2f2f2;}
ul{...}{ margin:0px; padding:0px; }
ul li{...}{margin:3px 0px; padding-left:15px; font-size:14px; line-height:20px; background-color:#CEEAFF}
dl{...}{ margin:0px; padding:0px; height:280px }
dl dd{...}{margin:3px 0px; padding-left:15px; font-size:14px; line-height:20px; background-color:#CEEAFF}
A:link,A:visited,A:active{...}{display:block; float:left; margin:2px 5px; width:50px; height:auto; line-height:21px; color:#000033; font-size:12px; text-decoration:none}
A:hover{...}{color:#FF6600; text-decoration:none}
-->
</style>
</head>
<body>
<div id="showmess">
<dl id="showme">
</dl>
</div>
<div id="mainbody" style="display:none ">
<ul>
<li>1sss</li>
<li>2sss</li>
<li>3ss</li>
<li>4sss</li>
<li>5ssss</li>
<li>6sssss</li>
<li>7</li>
<li>8ssss</li>
<li>9sewdewd</li>
<li>10</li>
<li>11</li>
<li>12</li>
<li>13</li>
<li>14</li>
<li>15</li>
<li>16</li>
<li>17</li>
<li>18</li>
<li>19</li>
<li>20</li>
<li>21</li>
<li>22</li>
<li>23</li>
<li>24</li>
<li>25</li>
<li>26</li>
<li>1sss</li>
<li>2sss</li>
<li>3ss</li>
<li>4sss</li>
<li>5ssss</li>
<li>6sssss</li>
<li>7</li>
<li>8ssss</li>
<li>9sewdewd</li>
<li>10</li>
<li>11</li>
<li>12</li>
<li>13</li>
<li>14</li>
<li>15</li>
<li>16</li>
<li>17</li>
<li>18</li>
<li>19</li>
<li>20</li>
<li>21</li>
<li>22</li>
<li>23</li>
<li>24</li>
<li>25</li>
<li>26</li>
<li>1sss</li>
<li>2sss</li>
<li>3ss</li>
<li>4sss</li>
<li>5ssss</li>
<li>6sssss</li>
<li>7</li>
<li>8ssss</li>
<li>9sewdewd</li>
<li>10</li>
<li>11</li>
<li>12</li>
<li>13</li>
<li>14</li>
<li>15</li>
<li>16</li>
<li>17</li>
<li>18</li>
<li>19</li>
<li>20</li>
<li>21</li>
<li>22</li>
<li>23</li>
<li>24</li>
<li>25</li>
<li>26</li>
<li>1sss</li>
分享到：
相关推荐
分页思路
在网页开发中，jQuery是一个非常流行的JavaScript库，它简化了DOM操作、事件处理以及动画制作。本主题将深入探讨如何利用jQuery实现内容自动分页功能，并同时应用两种不同的分页效果。通过提供的链接...
标题“几个不错的分页效果--美工效果而已”表明我们将探讨一些具有美观设计的分页实现。描述中的重复内容进一步强调了这个主题，即我们关注的是分页的视觉呈现。 分页效果的设计不仅关乎功能，更在于提升网站的整体...
"多种分页效果的实现"这个主题涉及到如何使用不同的方法和技术来创建功能多样且视觉吸引力强的分页组件。在这个压缩包中，包含了多个JavaScript分页库的不同版本，这些库可能提供了各种各样的分页效果，如脚本翻页...
综上所述，"100套css3分页效果"集合是一个宝贵的设计资源，它展示了CSS3在网页分页设计中的无限可能。通过学习和应用这些效果，开发者和设计师可以提升其作品的专业性和创新性，同时保证了对主流浏览器的良好支持。...
7. **响应式分页**：根据屏幕尺寸自动调整布局，确保在不同设备上都有良好的显示效果。这需要结合媒体查询和Flexbox或Grid布局来实现。 8. **搜索/过滤后的分页**：当用户进行搜索或过滤操作后，分页应该根据新的...
本示例聚焦于使用原生JavaScript实现一个分页效果，同时结合图片的运动效果，以提升用户体验。以下是对这个话题的详细阐述： 1. **JavaScript基础**：JavaScript是一种广泛应用于Web开发的客户端脚本语言，它可以...
为了实现真分页，我们需要设计一个分页实体类，该类包含了分页所需的各项属性，如当前页、上一页、下一页、首页、尾页以及每页显示的数据条数等。这些属性在分页逻辑中起着关键作用，帮助我们计算出正确的SQL查询...
GAE（Google App Engine）是一个平台，用于部署Web应用程序，但这不直接影响分页的实现，这里可能是为了提供一个运行环境。 总结，JS分页效果的实现涉及JavaScript基础、jQuery库的使用，以及CSS样式设计。通过合理...
开发者可能定义了一个或多个函数，如`loadData`或`getPageData`，这些函数负责向服务器发送请求，获取新的分页数据。函数内部可能会使用`XMLHttpRequest`对象或者现代浏览器的`fetch` API来实现异步通信。 接着，`...
在分页效果中，当用户切换页码时，可以触发一个信号，该信号连接到更新TableWidget的槽函数。 5. **QAbstractItemModel**：如果你的分页涉及到数据的动态加载，可能需要自定义QAbstractItemModel，以支持只加载当前...
当一个页面无法容纳所有信息时，分页可以帮助用户逐步浏览，提高用户体验。本篇将深入探讨如何利用CSS创建超酷的分页效果，适用于HTML、ASP、JSP、PHP和ASPX等各种网页开发语言。 首先，我们需要理解分页的基本结构...
很明显横向滑动的分页，第一反应就是使用ViewPager，毕竟只要通过自定义ViewPager，实现这个效果还是很容易，但是实际中问题时，当前模块是Recyclerview中某一个Holder，为了性能，肯定尽量使用Recyclerview去复用...
`jquery.reveal.js`是一个jQuery插件，可能用于创建模态框或者弹出窗口效果，虽然在"简单的分页效果"中并未直接提及，但可以想象它可能被用来显示更多信息，如当用户点击分页按钮时显示详细内容。 `reveal.css`是与...
首先，jQuery是一个轻量级的JavaScript库，它简化了DOM操作、事件处理、动画效果以及Ajax交互。在前端实现分页，jQuery提供了便利的API和方法来构建用户友好的界面。 1. **理解分页的基本原理** 分页通常涉及两个...
在网页设计和开发中，分页效果是不可或缺的一部分，尤其对于数据量大的内容展示，如电商产品列表、文章列表等。"一款很漂亮的分页效果组件"正是一款旨在提升用户体验，增强网页美观度的工具。它能够帮助用户轻松地...
JavaScript 分页效果是一种常见的网页设计元素，特别是在处理大量数据时，如电商网站的商品列表或博客文章。本示例“漂亮的js分页效果”是模仿淘宝网的分页样式，旨在提供用户友好的交互体验和美观的视觉效果。下面...
仿京东ajax js 分页效果，自己修改读取数据即可完成无刷新分页
本项目“商品Java分页效果”显然是一个利用Spring框架实现的商品管理系统的一部分，它关注的是如何高效地显示和操作商品数据。 在Java Web开发中，Spring框架是广泛使用的，它提供了丰富的功能，包括依赖注入、事务...