仿豆瓣分页原型(Javascript版)

最新推荐文章于 2024-06-20 21:48:49 发布

iteye_6481

最新推荐文章于 2024-06-20 21:48:49 发布

阅读量123

点赞数

文章标签： JavaScript CSS ASP XHTML PHP ViewUI

本文介绍了一种仿豆瓣网站风格的分页设计实现方案，通过HTML、CSS和JavaScript技术完成。该分页组件可以根据参数动态生成页面导航链接，并支持前后页跳转功能。

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

<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml"xml:lang="gb2312">
<head>
<metahttp-equiv="content-type"content="text/html;charset=gb2312"/>
<metaname="author"content="SmilingDolphin"/>
<metaname="keywords"content="design,css,cascading,style,sheets,xhtml,graphicdesign,w3c,webstandards,visual,display,java,javascript,c++,php,jsp,asp,py,pl"/>
<metaname="description"content="myfavoriteslanguage."/>
<metaname="robots"content="all"/>
<title>仿豆瓣分页原型（Javascript版）</title>
<styletype="text/css"title="currentStyle"media="screen">
/*Paginator*/
.paginator{
font:14.8pxnormalArial,Helvetica,sans-serif;
color:#666666;
margin-top:10px;
margin-bottom:5px;
line-height:150%;
background-color:#EEFFEE;
text-align:center;
}
.paginatora,.thispage,.break{
padding:2px4px;
}
.paginator.prev{
margin-right:20px;
}
.paginator.next{
margin-left:20px;
}
.paginator.count{
margin-left:20px;
font-size:11px;
}
</style>
</head>
<body>
<divid="pagebar"class="paginator"></div>
<scriptlanguage="javascript"type="text/javascript">
functionQueryString(item){
varsValue=location.search.match(newRegExp("[\?\&]"+item+"=([^\&]*)(\&?)","i"))
returnsValue?sValue[1]:sValue
}
varcount=560;
varperpage=20;
varcurrentpage=QueryString("page");
if(currentpage==null){
currentpage=1;
}else{
currentpage=parseInt(currentpage);
}
varpagecount=Math.floor(count/perpage);
varpagestr="";
varbreakpage=9;
varcurrentposition=4;
varbreakspace=2;
varmaxspace=4;
varprevnum=currentpage-currentposition;
varnextnum=currentpage+currentposition;
if(prevnum<1)prevnum=1;
if(nextnum>pagecount)nextnum=pagecount;
pagestr+=(currentpage==1)?'<spanclass="prev"><前页</span>':'<spanclass="prev"><<ahref="?page='+(currentpage-1)+'">前页</a></span>';
if(prevnum-breakspace>maxspace){
for(i=1;i<=breakspace;i++)
pagestr+='<ahref="?page='+i+'">'+i+'</a>';
pagestr+='<spanclass="break">...</span>';
for(i=pagecount-breakpage+1;i<prevnum;i++)
pagestr+='<ahref="?page='+i+'">'+i+'</a>';
}else{
for(i=1;i<prevnum;i++)
pagestr+='<ahref="?page='+i+'">'+i+'</a>';
}
for(i=prevnum;i<=nextnum;i++){
pagestr+=(currentpage==i)?'<spanclass="thispage">'+i+'</span>':'<ahref="?page='+i+'">'+i+'</a>';
}
if(pagecount-breakspace-nextnum+1>maxspace){
for(i=nextnum+1;i<=breakpage;i++)
pagestr+='<ahref="?page='+i+'">'+i+'</a>';
pagestr+='<spanclass="break">...</span>';
for(i=pagecount-breakspace+1;i<=pagecount;i++)
pagestr+='<ahref="?page='+i+'">'+i+'</a>';
}else{
for(i=nextnum+1;i<=pagecount;i++)
pagestr+='<ahref="?page='+i+'">'+i+'</a>';
}
pagestr+=(currentpage==pagecount)?'<spanclass="next">后页></span>':'<spanclass="next"><ahref="?page='+(currentpage+1)+'">后页</a>></span>';
document.getElementById("pagebar").innerHTML=pagestr;
</script>
</body>
</html>