仿豆瓣分页原型(Javascript版)

更新时间：2007年04月07日 00:00:00 作者：

好久没发过帖子了~~。
因为工作需要，仿豆瓣式写了个分页的样式。
自我感觉，这样的分页前后兼顾，对于用户的体验是蛮好使的。

<!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="Smiling Dolphin" />     <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 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 class="prev">&lt; &#21069;&#39029;</span>':'<span class="prev">&lt; <a href="?page='+(currentpage-1)+'">&#21069;&#39029;</a></span>'; if(prevnum-breakspace>maxspace){     for(i=1;i<=breakspace;i++)         pagestr += '<a href="?page='+i+'">'+i+'</a>';     pagestr += '<span 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 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 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 class="next">&#21518;&#39029; &gt;</span>':'<span class="next"><a href="?page='+(currentpage+1)+'">&#21518;&#39029;</a> &gt;</span>'; document.getElementById("pagebar").innerHTML = pagestr; </script> </body> </html>

[Ctrl+A 全选注:引入外部Js需再刷新一下页面才能执行]

您可能感兴趣的文章:

仿豆瓣分页原型(Javascript版)

小程序中实现excel数据的批量导入的示例代码
本文主要介绍了小程序中实现excel数据的批量导入的示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2022-07-07
JS实现回到页面顶部动画效果的简单实例
下面小编就为大家带来一篇JS实现回到页面顶部动画效果的简单实例。小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2016-05-05
JavaScript类的继承操作实例总结
这篇文章主要介绍了JavaScript类的继承操作,结合实例形式总结分析了JavaScript面向对象程序设计中类的继承常见实现方式与操作技巧,需要的朋友可以参考下
2018-12-12
js 实现菜单上下显示附效果图
菜单上下显示的实现方法有很多,在本文将为大家介绍下使用js是如何实现的，需要的朋友不要错过
2013-11-11
JavaScript迭代器的含义及用法
这篇文章主要介绍了JavaScript迭代器的含义及用法,迭代器就是为实现对不同集合进行统一遍历操作的一种机制，只要给需要遍历的数据结构部署Iterator接口，通过调用该接口，或者使用消耗该接口的API实现遍历操作。,需要的朋友可以参考下
2019-06-06
js实现无缝轮播图
这篇文章主要为大家详细介绍了js实现无缝轮播图，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2020-03-03
记录一次开发微信网页分享的步骤
这篇文章主要介绍了记录一次开发微信网页分享的步骤，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2019-05-05
Javascript变量作用域详解
这篇文章主要是对Javascript变量作用域进行了详细的分析介绍，需要的朋友可以过来参考下，希望对大家有所帮助
2013-12-12
JS对象转换为Jquery对象示例
JS对象转换为Jquery对象的方便在于可以使用jquery的一些方法，下面有个示例，大家可以参考下
2014-01-01
Javascript静态分页(多个资料，静态自动分页)
看的处理是个不错的想法与应用大家可以看下。
2009-02-02

仿豆瓣分页原型(Javascript版)

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具