仿豆瓣分页原型(Javascript版)

作者:tyhouse 来源:twocity.cn 时间:2007-11-05 14:04:00 

仿豆瓣分页原型(Javascript版)写了个分页的样式。

自我感觉,这样的分页前后兼顾,对于用户的体验是蛮好使的

Javascript分页代码如下:


<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">< 前页</span>':'<span 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 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">后页 ></span>':'<span class="next"><a href="?page='+(currentpage+1)+'">后页</a> ></span>';
document.getElementById("pagebar").innerHTML = pagestr;
</script>




 

 

标签:分页,javascript
0
投稿

猜你喜欢

  • 如何强制删除或恢复SQLServer正在使用的数据库

    2024-01-28 16:16:56
  • python实现的一只从百度开始不断搜索的小爬虫

    2022-05-20 10:46:18
  • 对Python3使运行暂停的方法详解

    2021-02-05 22:55:21
  • 百度工程师讲PHP函数的实现原理及性能分析(三)

    2023-10-20 01:33:03
  • Python ORM框架SQLAlchemy学习笔记之数据添加和事务回滚介绍

    2023-06-15 22:47:05
  • 封装一个python的pymysql操作类

    2024-01-19 09:44:47
  • Python3.遍历某文件夹提取特定文件名的实例

    2022-12-08 04:48:59
  • Selenium Webdriver元素定位的八种常用方式(小结)

    2022-08-11 10:04:07
  • 我用Python给班主任写了一个自动阅卷脚本(附源码)

    2023-11-16 07:43:25
  • 使用面向对象的技术创建高级JavaScript Web 应用程序

    2008-11-03 13:00:00
  • 基于torch.where和布尔索引的速度比较

    2021-10-07 16:20:54
  • Ubuntu中MySQL的参数文件my.cnf示例详析

    2024-01-13 02:26:28
  • 用virtualenv建立多个Python独立虚拟开发环境

    2023-10-28 06:24:07
  • python实现猜单词游戏

    2023-01-22 22:32:43
  • Python基于smtplib协议实现发送邮件

    2021-03-02 07:26:36
  • 将string类型的数据类型转换为spark rdd时报错的解决方法

    2023-05-03 00:35:12
  • 磁盘写满导致MySQL复制失败的解决方案

    2024-01-18 09:19:15
  • Python中常用数据类型使用示例概括总结

    2021-09-24 02:15:26
  • vue+canvas实现数据实时从上到下刷新瀑布图效果(类似QT的)

    2024-05-09 09:16:28
  • 浅谈vue中使用编辑器vue-quill-editor踩过的坑

    2024-04-10 13:46:00
  • asp之家 网络编程 m.aspxhome.com