原创一个分页效果共享，思路应早就有了。

于 2007-07-10 17:02:00 发布
阅读量1.4k 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： web开发 文章标签： function border div javascript html 网络
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/lovelium/article/details/1684583
本文介绍了一种使用HTML和JavaScript实现的简易网页分页技术。通过DOM操作获取内容数量，并计算分页总数，最终实现内容的分页显示。此方法适用于网站静态化后的最终静态页面分页。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

在帮一个朋友做它得网站分页时，我想到了一个方法。我不知道网上有没有这样的例子，也没有找。我喜欢自己看到效果去想办法实现，虽危害我的代码得得不规范也不高效，但是写完后还是很开心。今天共享一下这个吧。
思路如下。

我在页面中将要分页的内容用不同的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>
<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>
<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>
<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>
<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>25</li>
<li>26</li>
<li>25</li>
<li>26</li>
<li>25</li>
<li>26</li>
<li>25</li>
<li>26</li>
</ul>
</div>
<div id="pages"></div>
<script language="javascript">
var toutaltiao;
var toutalpage;
var onpage;
var tiaoshu=12;
var firstiao;


function g(v){return document.getElementById(v);}
var mylii=document.getElementsByTagName("li")
toutaltiao=mylii.length;

toutalpage=Math.ceil(toutaltiao/tiaoshu)

 


function setpage(page){
g("showme").innerHTML="";
onpage=page;
firstiao=(onpage-1)*tiaoshu;
var len=onpage==toutalpage&&(toutaltiao%tiaoshu) > 0?toutaltiao%tiaoshu:tiaoshu;
for (var i=firstiao; i<firstiao+len; i++)
  {
  g("showme").innerHTML=g("showme").innerHTML+"<dd>"+ mylii[i].innerHTML+"</dd>";
    }
 return false;
}

 

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>";
}
window.onload=function(){
setpage(1);
writepage();
}
</script>
更多效果:<a href="http://www.szrgb.net/newtext/">http://www.szrgb.net/newtext/</a></body>
</html>

 
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值