在帮一个朋友做它得网站分页时,我想到了一个方法。我不知道网上有没有这样的例子,也没有找。我喜欢自己看到效果去想办法实现,虽危害我的代码得得不规范也不高效,但是写完后还是很开心。今天共享一下这个吧。
思路如下。
我在页面中将要分页的内容用不同的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>

