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 相关文章推荐
extjs两个tbar问题探讨
Aug 08 Javascript
jQuery仿淘宝网产品品牌隐藏与显示效果
Sep 01 Javascript
JS随机洗牌算法之数组随机排序
Mar 23 Javascript
简单谈谈ES6的六个小特性
Nov 18 Javascript
javascript实现table单元格点击展开隐藏效果(实例代码)
Apr 10 Javascript
JavaScript 中调用 Kotlin 方法实例详解
Jun 09 Javascript
webpack构建换肤功能的思路详解
Nov 27 Javascript
分享vue里swiper的一些坑
Aug 30 Javascript
微信小程序实现拍照画布指定区域生成图片
Jul 18 Javascript
vue element upload实现图片本地预览
Aug 20 Javascript
微信小程序实现列表滚动头部吸顶的示例代码
Jul 12 Javascript
Vue-resource安装过程及使用方法解析
Jul 21 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微信开发之查询微信精选文章
2016/06/23 PHP
Yii2 如何在modules中添加验证码的方法
2017/06/19 PHP
PHP实现通过CURL上传文件功能示例
2018/05/30 PHP
Jquery 跨域访问 Lightswitch OData Service的方法
2013/09/11 Javascript
jQuery实现的多选框多级联动插件
2014/05/02 Javascript
JavaScript 实现打印,打印预览,打印设置
2014/12/30 Javascript
完美解决node.js中使用https请求报CERT_UNTRUSTED的问题
2017/01/08 Javascript
微信小程序开发之实现自定义Toast弹框
2017/06/08 Javascript
webpack学习笔记之优化缓存、合并、懒加载
2017/08/24 Javascript
JavaScript实现计算多边形质心的方法示例
2018/01/31 Javascript
vuex与组件联合使用的方法
2018/05/10 Javascript
微信小程序自定义tab实现多层tab嵌套功能
2018/06/15 Javascript
Vue组件间通信方法总结(父子组件、兄弟组件及祖先后代组件间)
2019/04/17 Javascript
jQuery实现视频展示效果
2020/05/30 jQuery
[01:28]2014DOTA2国际邀请赛中国区预选赛四大豪门直升机抵达会场
2014/05/24 DOTA
python安装PIL模块时Unable to find vcvarsall.bat错误的解决方法
2016/09/19 Python
python3.5实现socket通讯示例(TCP)
2017/02/07 Python
python3 pillow生成简单验证码图片的示例
2017/09/19 Python
python实现二分查找算法
2017/09/21 Python
python实战串口助手_解决8串口多个发送的问题
2019/06/12 Python
django foreignkey外键使用的例子 相当于left join
2019/08/06 Python
Python爬虫实现“盗取”微信好友信息的方法分析
2019/09/16 Python
Django自带的加密算法及加密模块详解
2019/12/03 Python
python中sympy库求常微分方程的用法
2020/04/28 Python
H5 meta小结(前端必看篇)
2016/08/24 HTML / CSS
享受加州生活方式的时尚舒适:XCVI
2018/07/09 全球购物
尤为Wconcept中国官网:韩国设计师品牌服饰
2019/01/10 全球购物
幼儿园儿童节主持词
2014/03/21 职场文书
本科生求职信
2014/06/17 职场文书
国土资源局开展党的群众路线教育实践活动整改措施
2014/09/26 职场文书
租车协议书
2015/01/27 职场文书
2015年行政工作总结范文
2015/04/09 职场文书
2015年行政执法工作总结
2015/05/23 职场文书
毕业论文答辩稿范文
2015/06/23 职场文书
毕业班班主任工作总结2015
2015/07/23 职场文书
教师岗位说明书
2015/09/30 职场文书