仿豆瓣分頁原型(Javascript版)

2019-11-21 02:09:44

字體：大中小

供稿：網(wǎng)友

好久沒發(fā)過帖子了~~。
因為工作需要，仿豆瓣式寫了個分頁的樣式。
自我感覺，這樣的分頁前后兼顧，對于用戶的體驗是蠻好使的。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="gb2312" > <head>     <meta http-equiv="content-type" content="text/html; charset=gb2312" />     <meta name="author" content="http://m.survivalescaperooms.com/"/>     <meta name="keywords" content="design, css, cascading, style, sheets, xhtml, graphic design, w3c, web standards, visual, display, java, javascript, c++, php, jsp, asp, py, pl" />     <meta name="description" content="my favorites language." />     <meta name="robots" content="all" />     <title>仿豆瓣分頁原型（Javascript版）</title>     <style type="text/css" title="currentStyle" media="screen">         /* Paginator */         .paginator {             font: 14.8px normal Arial, Helvetica, sans-serif;             color: #666666;             margin-top: 10px;             margin-bottom: 5px;             line-height: 150%;             background-color: #EEFFEE;             text-align: center;         }         .paginator a, .thispage, .break {             padding: 2px 4px;         }         .paginator .prev {             margin-right: 20px;         }         .paginator .next {             margin-left: 20px;         }         .paginator .count {             margin-left: 20px;             font-size: 11px;         }     </style> </head> <body> <div   class="iwvjtn8m0"   id="pagebar" class="paginator"></div> <script language="javascript" type="text/javascript"> function QueryString(item){     var sValue=location.search.match(new RegExp("[/?/&]"+item+"=([^/&]*)(/&?)","i"))     return sValue?sValue[1]:sValue } var count = 560; var perpage = 20; var currentpage = QueryString("page"); if (currentpage==null){     currentpage = 1; }else{     currentpage = parseInt(currentpage); } var pagecount = Math.floor(count/perpage); var pagestr = ""; var breakpage = 9; var currentposition = 4; var breakspace = 2; var maxspace = 4; var prevnum = currentpage-currentposition; var nextnum = currentpage+currentposition; if(prevnum<1) prevnum = 1; if(nextnum>pagecount) nextnum = pagecount; pagestr += (currentpage==1)?'<span id="iwvjtn8m0"    class="prev">< 前页</span>':'<span id="iwvjtn8m0"    class="prev">< <a href="?page='+(currentpage-1)+'">前页</a></span>'; if(prevnum-breakspace>maxspace){     for(i=1;i<=breakspace;i++)         pagestr += '<a href="?page='+i+'">'+i+'</a>';     pagestr += '<span id="iwvjtn8m0"    class="break">...</span>';     for(i=pagecount-breakpage+1;i<prevnum;i++)         pagestr += '<a href="?page='+i+'">'+i+'</a>'; }else{     for(i=1;i<prevnum;i++)         pagestr += '<a href="?page='+i+'">'+i+'</a>'; } for(i=prevnum;i<=nextnum;i++){     pagestr += (currentpage==i)?'<span id="iwvjtn8m0"    class="thispage">'+i+'</span>':'<a href="?page='+i+'">'+i+'</a>'; } if(pagecount-breakspace-nextnum+1>maxspace){     for(i=nextnum+1;i<=breakpage;i++)         pagestr += '<a href="?page='+i+'">'+i+'</a>';     pagestr += '<span id="iwvjtn8m0"    class="break">...</span>';     for(i=pagecount-breakspace+1;i<=pagecount;i++)         pagestr += '<a href="?page='+i+'">'+i+'</a>'; }else{     for(i=nextnum+1;i<=pagecount;i++)         pagestr += '<a href="?page='+i+'">'+i+'</a>'; } pagestr += (currentpage==pagecount)?'<span id="iwvjtn8m0"    class="next">后页 ></span>':'<span id="iwvjtn8m0"    class="next"><a href="?page='+(currentpage+1)+'">后页</a> ></span>'; document.getElementById("pagebar").innerHTML = pagestr; </script> </body> </html>

[Ctrl+A 全選注:如需引入外部Js需刷新才能執(zhí)行]

上一篇：javascript表格控件：Chgrid，簡化型

下一篇：在頁面上點擊任一鏈接時觸發(fā)一個事件的代碼