仿豆瓣分页原型(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版)

Angular Js文件上传之form-data
angular-file-upload 是一个基于HTML5技术的文件上传轻量级 AngularJS指令（directive），当浏览器不支持时转为采用 FileAPI polyfill技术实现(基于Flash)。本文主要给大家介绍Angular Js文件上传之form-data，需要的朋友可以参考下
2015-08-08
js实现踩五彩块游戏
这篇文章主要为大家详细介绍了js实现踩五彩块游戏，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2020-02-02
arctext.js实现文字平滑弯曲弧形效果的插件
这篇文章主要介绍了arctext.js实现文字平滑弯曲弧形效果的插件，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-05-05
微信小程序仿抖音短视频切换效果的实例代码
这篇文章主要介绍了微信小程序仿抖音短视频切换效果,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2020-06-06
利用JavaScript实现创建虚拟键盘的示例代码
这篇文章主要为大家详细介绍了如何利用JavaScript实现创建虚拟键盘，文中的示例代码讲解详细，对我们学习JavaScript有一定帮助，需要的可以参考一下
2022-09-09
JS中innerHTML和pasteHTML的区别实例分析
这篇文章主要介绍了JS中innerHTML和pasteHTML的区别,结合实例形式较为详细的分析了innerHTML和pasteHTML的具体功能与使用区别,需要的朋友可以参考下
2016-06-06
微信小程序实现渐入渐出动画效果
这篇文章主要给大家介绍了关于微信小程序实现渐入渐出动画效果的相关资料，文中通过示例代码介绍的非常详细，对大家学习或者使用微信小程序具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧
2019-06-06
JavaScript使用技巧精萃[代码非常实用]
为方便大家查找不做分页设置ctrl+F即可
2008-11-11
JavaScript中函数柯里化示例详解
JavaScript 函数柯里化是将一个多参数的函数转换为一系列单参数的函数,每个单参数函数都可以接收一个参数,并返回一个新的函数,本文将通过代码示例给大家讲讲JavaScript函数柯里化的优缺点,需要的朋友可以参考下
2023-09-09
JavaScript实现表单全选或反选效果
这篇文章主要为大家详细介绍了JavaScript实现表单全选或反选效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2021-06-06