JS实现当前页居中分页效果的方法


Posted in Javascript onJune 18, 2015

本文实例讲述了JS实现当前页居中分页效果的方法。分享给大家供大家参考。具体实现方法如下:

function show_page(cur_pc)
{
  var cp=cur_pc;  //curent page count
  var tp=this.p;  //total page count
  var sp=this.pc;  //show page count
  var bp;      //begin page count
  var ep;      //end page count
  if(sp%2==0) sp=sp+1;   //this process need an odd number
  var dp=Math.floor(sp/2); //each side count to show
  var dif=tp-sp;  //check weather it have enough page to make mid-show
  var f=cp-dp;   //to check weather it has enough page to make mid-show from the begin
  var g=tp-(cp+dp); //to check weather it has enough page to make mid-show from the end
  if(sp && dif>=0)
  {
    if(g>0)
    {
      if(f>0)
      { 
        bp=f; 
        ep=cp+dp; 
      }
      else
      { 
        bp=1; 
        ep=2*dp+1; 
      }
    }
    else
    { 
      bp=tp-2*dp; 
      ep=tp; 
    }  
  }
  else
  { 
    bp=1; 
    ep=tp; 
  }
  var buf=[];
  for(var i=bp;i<=ep;i++)
  {
    if(i==cur_pc)
    {
      buf.push("<a href='javascript:;' class='current'>",i,"</a>");
    }
    else
    {
      buf.push("<a href='javascript:;' class='normal'>",i,"</a>");
    }
  }
  document.write(buf);
}

运行效果如下图所示:

JS实现当前页居中分页效果的方法

希望本文所述对大家的javascript程序设计有所帮助。

Javascript 相关文章推荐
JQUERY复选框CHECKBOX全选,取消全选
Aug 30 Javascript
jquery之empty()与remove()区别说明
Sep 10 Javascript
jquery控制表单输入框显示默认值的方法
May 22 Javascript
将JavaScript的jQuery库中表单转化为JSON对象的方法
Nov 17 Javascript
Bootstrap组件系列之福利篇几款好用的组件(推荐二)
Jul 12 Javascript
Javascript中浏览器窗口的基本操作总结
Aug 18 Javascript
canvas实现粒子时钟效果
Feb 06 Javascript
BootStrapValidator初使用教程详解
Feb 10 Javascript
AngularJS实现根据不同条件显示不同控件
Apr 20 Javascript
vue.js使用v-if实现显示与隐藏功能示例
Jul 06 Javascript
vue.js 实现点击展开收起动画效果
Jul 07 Javascript
layer.prompt输入层的例子
Sep 24 Javascript
javascript中Date()函数在各浏览器中的显示效果
Jun 18 #Javascript
javaScript中Math()函数注意事项
Jun 18 #Javascript
理解Javascript的动态语言特性
Jun 17 #Javascript
你所不了解的javascript操作DOM的细节知识点(一)
Jun 17 #Javascript
jQuery实现复选框批量选择与反选的方法
Jun 17 #Javascript
在Python中使用glob模块查找文件路径的方法
Jun 17 #Javascript
举例简介AngularJS的内部语言环境
Jun 17 #Javascript
You might like
php下使用SimpleXML 处理XML 文件
2010/02/27 PHP
php显示时间常用方法小结
2015/06/05 PHP
php官方微信接口大全(微信支付、微信红包、微信摇一摇、微信小店)
2015/12/21 PHP
php 反斜杠处理函数addslashes()和stripslashes()实例详解
2016/12/25 PHP
PHP数据库编程之MySQL优化策略概述
2017/08/16 PHP
PHP PDOStatement::fetchObject讲解
2019/02/01 PHP
php 比较获取两个数组相同和不同元素的例子(交集和差集)
2019/10/18 PHP
JS array 数组详解
2009/03/22 Javascript
jQuery 使用手册(五)
2009/09/23 Javascript
再谈querySelector和querySelectorAll的区别与联系
2012/04/20 Javascript
jquery实现excel导出的方法
2013/04/04 Javascript
JavaScript获取伪元素(Pseudo-Element)属性的方法技巧
2015/03/13 Javascript
javascript中this指向详解
2016/04/23 Javascript
bootstrap的3级菜单样式,支持母版页保留打开状态实现方法
2016/11/10 Javascript
tab栏切换原理
2017/03/22 Javascript
JS实现的Unicode编码转换操作示例
2017/04/28 Javascript
利用PM2部署node.js项目的方法教程
2017/05/10 Javascript
利用Three.js如何实现阴影效果实例代码
2017/09/26 Javascript
浅谈Node.js爬虫之网页请求模块
2018/01/11 Javascript
vue 简单自动补全的输入框的示例
2018/03/12 Javascript
vue实现按需加载组件及异步组件功能
2019/05/27 Javascript
Python实现线程池代码分享
2015/06/21 Python
widows下安装pycurl并利用pycurl请求https地址的方法
2018/10/15 Python
Python实现分段线性插值
2018/12/17 Python
Python实现字典排序、按照list中字典的某个key排序的方法示例
2018/12/18 Python
python numpy 按行归一化的实例
2019/01/21 Python
python实现最速下降法
2020/03/24 Python
python 如何调用远程接口
2020/09/11 Python
CSS3 函数技巧 用css 实现js实现的事情(clac Counters Tooltip)
2017/08/15 HTML / CSS
CSS3 按钮边框动画的实现
2020/11/12 HTML / CSS
美国正版电视节目和电影在线观看:Hulu
2018/05/24 全球购物
动漫设计与制作专业推荐信
2014/07/07 职场文书
2014年超市员工工作总结
2014/11/18 职场文书
第一书记观后感
2015/06/08 职场文书
新教师教学工作总结
2015/08/14 职场文书
2016习总书记系列重要讲话心得体会
2016/01/15 职场文书