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 相关文章推荐
关于恒等于(===)和非恒等于(!==)
Aug 20 Javascript
JS 创建对象(常见的几种方法)
Nov 03 Javascript
JS getAttribute和setAttribute(取得和设置属性)的使用介绍
Jul 10 Javascript
使用delegate方法为一个tr标签加一个链接
Jun 27 Javascript
简单谈谈jQuery(function(){})与(function(){})(jQuery)
Dec 19 Javascript
javascript断点调试心得分享
Apr 23 Javascript
在JavaScript中模拟类(class)及类的继承关系
May 20 Javascript
JS获取及验证开始结束日期的方法
Aug 20 Javascript
webpack入门+react环境配置
Feb 08 Javascript
React Native实现地址挑选器功能
Oct 24 Javascript
JS常见DOM节点操作示例【创建 ,插入,删除,复制,查找】
May 14 Javascript
新手简单了解vue
May 29 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程序的方法小结
2012/02/23 PHP
用来解析.htgroup文件的PHP类
2012/09/05 PHP
php生成数组的使用示例 php全组合算法
2014/01/16 PHP
php开启openssl的方法
2014/05/15 PHP
安装PHP扩展时解压官方 tgz 文件后没有configure文件无法进行配置编译的问题
2020/08/26 PHP
深入理解PHP+Mysql分布式事务与解决方案
2020/12/03 PHP
ExtJS PropertyGrid中使用Combobox选择值问题
2010/06/13 Javascript
ASP.NET jQuery 实例12 通过使用jQuery validation插件简单实现用户注册页面验证功能
2012/02/03 Javascript
jquery 中的each()跳出循环的语句
2014/05/23 Javascript
node.js中的fs.fchownSync方法使用说明
2014/12/16 Javascript
基于JavaScript实现鼠标向下滑动加载div的代码
2016/08/31 Javascript
jquery+Jscex打造游戏力度条
2020/09/12 Javascript
bootstrap table表格客户端分页实例
2017/08/07 Javascript
在layui中select更改后生效的方法
2019/09/05 Javascript
vue之a-table中实现清空选中的数据
2019/11/07 Javascript
JavaScript 双向链表操作实例分析【创建、增加、查找、删除等】
2020/04/28 Javascript
如何在JavaScript中正确处理变量
2020/12/25 Javascript
[02:23]DOTA2英雄基础教程 幻影长矛手
2013/12/09 DOTA
[06:16]第十四期-国士无双绝地翻盘之撼地神牛
2014/06/24 DOTA
朴素贝叶斯算法的python实现方法
2014/11/18 Python
Python中的深拷贝和浅拷贝详解
2015/06/03 Python
Python实现PS滤镜特效之扇形变换效果示例
2018/01/26 Python
使用Python搭建虚拟环境的配置方法
2018/02/28 Python
tensorflow获取变量维度信息
2018/03/10 Python
python2与python3中关于对NaN类型数据的判断和转换方法
2018/10/30 Python
HTML5新增元素如何兼容旧浏览器有哪些方法
2014/05/09 HTML / CSS
测量实习生自我鉴定
2013/09/19 职场文书
日语系毕业生推荐信
2013/11/11 职场文书
“九一八事变纪念日”国旗下讲话稿
2014/09/14 职场文书
2014年底工作总结
2014/12/15 职场文书
技术支持岗位职责
2015/02/13 职场文书
高中运动会广播稿
2015/08/19 职场文书
2016年社区创先争优活动总结
2016/04/05 职场文书
创业计划书之养殖业
2019/10/11 职场文书
python异常中else的实例用法
2021/06/15 Python
学习nginx基础知识
2021/09/04 Servers