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

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

我在页面中将要分页的内容用不同的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='###' οnclick='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 >