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 相关文章推荐
改进版通过Json对象实现深复制的方法
Oct 24 Javascript
jQuery动画效果-fadeIn fadeOut淡入浅出示例代码
Aug 28 Javascript
javascript设计模式之工厂模式示例讲解
Mar 04 Javascript
Jquery中扩展方法extend使用技巧
Aug 24 Javascript
JavaScript中的toLocaleLowerCase()方法使用详解
Jun 06 Javascript
js小数运算出现多位小数如何解决
Oct 08 Javascript
JS实现颜色梯度与渐变效果完整实例
Dec 30 Javascript
工厂模式在JS中的实践
Jan 18 Javascript
Easyui在treegrid添加控件的实现方法
Jun 23 Javascript
利用vue + element实现表格分页和前端搜索的方法
Dec 25 Javascript
webpack 模块热替换原理
Apr 09 Javascript
Vue单页及多页应用全局配置404页面实践记录
May 22 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
PHP4之COOKIE支持详解
2006/10/09 PHP
php实现的简单压缩英文字符串的代码
2008/04/24 PHP
PHP实现的封装验证码类详解
2013/06/18 PHP
php猜单词游戏
2015/09/29 PHP
php利用ffmpeg提取视频中音频与视频画面的方法详解
2017/06/07 PHP
PHP使用pdo实现事务处理操作示例
2018/09/05 PHP
PHP 模拟登陆功能实例详解
2019/09/10 PHP
one.php 多项目、函数库、类库 统一为一个版本的方法
2020/08/24 PHP
CSS中一些@规则的用法小结
2021/03/09 HTML / CSS
超级强大的表单验证
2006/06/26 Javascript
数组Array进行原型prototype扩展后带来的for in遍历问题
2010/02/07 Javascript
javascript 判断数组是否已包含了某个元素的函数
2010/05/30 Javascript
从jQuery.camelCase()学习string.replace() 函数学习
2011/09/13 Javascript
jquery formValidator插件ajax验证 内容不做任何修改再离开提示错误的bug解决方法
2013/01/04 Javascript
Javacript实现颜色梯度变化和渐变的效果代码
2013/05/31 Javascript
javascript 获取图片尺寸及放大图片
2013/09/04 Javascript
jQuery EasyUI中DataGird动态生成列的方法
2016/04/05 Javascript
微信小程序地图绘制线段并且测量(实例代码)
2020/01/02 Javascript
JS实现可控制的进度条
2020/03/25 Javascript
vue项目中使用rem,在入口文件添加内容操作
2020/11/11 Javascript
python爬取网站数据保存使用的方法
2013/11/20 Python
matplotlib savefig 保存图片大小的实例
2018/05/24 Python
pyqt5数据库使用详细教程(打包解决方案)
2020/03/25 Python
CSS3 Notes: -webkit-box-reflect实现倒影的实例
2016/12/08 HTML / CSS
使用css3做0.5px的细线的示例代码
2018/01/18 HTML / CSS
详解CSS3 filter:drop-shadow滤镜与box-shadow区别与应用
2020/08/24 HTML / CSS
英国著名国际平价时尚男装品牌:Topman
2016/08/27 全球购物
Corelle官方网站:购买康宁餐具
2016/11/02 全球购物
美国羊皮公司:Overland
2018/01/15 全球购物
一套中级Java程序员笔试题
2015/01/14 面试题
电子商务个人自荐信
2013/12/12 职场文书
小学开学典礼主持词
2014/03/19 职场文书
2015年医院药剂科工作总结
2015/05/04 职场文书
神秘岛读书笔记
2015/07/01 职场文书
2019年公司快递收发管理制度模板
2019/11/20 职场文书
python中使用 unittest.TestCase单元测试的用例详解
2021/08/30 Python