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

来源：互联网发布：51cto数据库.zip ed2k 编辑：程序博客网时间：2024/04/19 11:43

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

我在页面中将要分页的内容用不同的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">

<head>

<title>辛苦分页程序--三原色阿PAUL</title>

<!--

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>

</dl>

</div>

<ul>

<li>6sssss</li>

<li>9sewdewd</li>

<li>6sssss</li>

<li>9sewdewd</li>

<li>6sssss</li>

<li>9sewdewd</li>

<li>6sssss</li>

<li>9sewdewd</li>

<li>6sssss</li>

<li>9sewdewd</li>

<li>6sssss</li>

<li>9sewdewd</li>

<li>6sssss</li>

<li>9sewdewd</li>

<li>6sssss</li>

<li>9sewdewd</li>

<li>6sssss</li>

<li>9sewdewd</li>

<li>6sssss</li>

<li>9sewdewd</li>

<li>6sssss</li>

<li>9sewdewd</li>

<li>6sssss</li>

<li>9sewdewd</li>

<li>6sssss</li>

<li>9sewdewd</li>

<li>6sssss</li>

<li>9sewdewd</li>

<li>6sssss</li>

<li>9sewdewd</li>

</ul>

</div>

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>