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 相关文章推荐
List the UTC Time on a Computer
Jun 11 Javascript
js 方法实现返回多个数据的代码
Apr 30 Javascript
简单方法判断JavaScript对象为null或者属性为空
Sep 26 Javascript
javascript 应用小技巧方法汇总
Jul 05 Javascript
JS加载iFrame出现空白问题的解决办法
May 13 Javascript
Dropzone.js实现文件拖拽上传功能(附源码下载)
Nov 22 Javascript
angular动态删除ng-repaeat添加的dom节点的方法
Jul 20 Javascript
Dropify.js图片宽高自适应的方法
Nov 27 Javascript
JS栈stack类的实现与使用方法示例
Jan 31 Javascript
bootstrap tooltips在 angularJS中的使用方法
Apr 10 Javascript
浅谈VUE中演示v-for为什么要加key
Jan 16 Javascript
jQuery实现全选按钮
Jan 01 jQuery
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
phpMyAdmin安装并配置允许空密码登录
2015/07/04 PHP
php微信公众平台开发(四)回复功能开发
2016/12/06 PHP
PHP利用正则表达式将相对路径转成绝对路径的方法示例
2017/02/28 PHP
laravel orm 关联条件查询代码
2019/10/21 PHP
ExtJS 简介 让你知道extjs是什么
2008/12/29 Javascript
JavaScript DOM学习第六章 表单实例
2010/02/19 Javascript
Jquery 获得服务器控件值的方法小结
2010/05/11 Javascript
一段批量给页面上的控件赋值js
2010/06/19 Javascript
有关js的变量作用域和this指针的讨论
2010/12/16 Javascript
Js 弹出框口并返回值的两种常用方法
2010/12/30 Javascript
返回对象在当前级别中是第几个元素的实现代码
2011/01/20 Javascript
模拟jQuery ajax服务器端与客户端通信的代码
2011/03/28 Javascript
JavaScript计划任务后台运行的方法
2015/12/18 Javascript
学习javascript面向对象 理解javascript原型和原型链
2016/01/04 Javascript
深入理解Ajax的get和post请求
2016/06/02 Javascript
JavaScript使用Range调色及透明度实例
2016/09/25 Javascript
jQuery实现拖动剪裁图片作为头像
2016/12/28 Javascript
为Jquery EasyUI 组件加上清除功能的方法(详解)
2017/04/13 jQuery
vue.js 获取当前自定义属性值
2017/06/01 Javascript
详解Vue 开发模式下跨域问题
2017/06/06 Javascript
Vue模板语法中数据绑定的实例代码
2019/05/17 Javascript
微信小程序监听用户登录事件的实现方法
2019/11/11 Javascript
js防抖函数和节流函数使用场景和实现区别示例分析
2020/04/11 Javascript
[07:20]2018DOTA2国际邀请赛寻真——逐梦Mineski
2018/08/10 DOTA
[00:58]PWL开团时刻DAY5——十人开雾0换5
2020/11/04 DOTA
python版本坑:md5例子(python2与python3中md5区别)
2017/06/20 Python
Python如何爬取实时变化的WebSocket数据的方法
2019/03/09 Python
详解Django定时任务模块设计与实践
2019/07/24 Python
基于python traceback实现异常的获取与处理
2019/12/13 Python
在django中使用post方法时,需要增加csrftoken的例子
2020/03/13 Python
移动端HTML5实现文件上传功能【附代码】
2016/03/25 HTML / CSS
石油工程专业毕业生求职信
2014/04/13 职场文书
植树节口号
2014/06/21 职场文书
大专生求职信
2014/06/29 职场文书
工程承包协议书范本
2014/09/29 职场文书
深入解读Java三大集合之map list set的用法
2021/11/11 Java/Android