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 相关文章推荐
使用onbeforeunload属性后的副作用
Mar 08 Javascript
有一段有意思的代码-javascript现实多行信息
Aug 26 Javascript
JavaScript ( (__ = !$ + $)[+$] + ({} + $)[_/_] +({} + $)[_/_] )
Feb 25 Javascript
js中数组(Array)的排序(sort)注意事项说明
Jan 24 Javascript
JS 获取浏览器和屏幕宽高等信息代码
Mar 31 Javascript
js和jquery如何获取图片真实的宽度和高度
Sep 28 Javascript
javascript实现表单提交后,提交按钮不可用的方法
Apr 18 Javascript
Javascript 实现全屏滚动实例代码
Dec 31 Javascript
基于Vuejs和Element的注册插件的编写方法
Jul 03 Javascript
JS二分查找算法详解
Nov 01 Javascript
使用taro开发微信小程序遇到的坑总结
Apr 08 Javascript
JQuery获取可视区尺寸和文档尺寸及制作悬浮菜单示例
May 14 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
PHP如何编写易读的代码
2007/07/10 PHP
PHP curl CURLOPT_RETURNTRANSFER参数的作用使用实例
2015/02/07 PHP
又拍云异步上传实例教程详解
2016/04/19 PHP
基于jquery的点击链接插入链接内容的代码
2012/07/31 Javascript
window.addEventListener来解决让一个js事件执行多个函数
2012/12/26 Javascript
Extjs4 消息框去掉关闭按钮(类似Ext.Msg.alert)
2013/04/02 Javascript
javascript实现的DES加密示例
2013/10/30 Javascript
jquery easyui 对于开始时间小于结束时间的判断示例
2014/03/22 Javascript
javascript的函数作用域
2014/11/12 Javascript
详解JavaScript的策略模式编程
2015/06/24 Javascript
js检测离开或刷新页面时表单数据是否更改的方法
2016/08/02 Javascript
BOM之navigator对象和用户代理检测
2017/02/10 Javascript
JQuery validate 验证一个单独的表单元素实例
2017/02/17 Javascript
让axios发送表单请求形式的键值对post数据的实例
2018/08/11 Javascript
快速对接payjq的个人微信支付接口过程解析
2019/08/15 Javascript
微信小程序一周时间表功能实现
2019/10/17 Javascript
[02:19]2018年度DOTA2最佳核心位选手-完美盛典
2018/12/17 DOTA
Python 元类使用说明
2009/12/18 Python
Python字典简介以及用法详解
2016/11/15 Python
pygame实现弹力球及其变速效果
2017/07/03 Python
Python 获取当前所在目录的方法详解
2017/08/02 Python
python SMTP实现发送带附件电子邮件
2018/05/22 Python
python得到一个excel的全部sheet标签值方法
2018/12/10 Python
Python从函数参数类型引出元组实例分析
2019/05/28 Python
Django之模板层的实现代码
2019/09/09 Python
python连接PostgreSQL数据库的过程详解
2019/09/18 Python
python异步编程 使用yield from过程解析
2019/09/25 Python
python jenkins 打包构建代码的示例代码
2019/11/29 Python
selenium切换标签页解决get超时问题的完整代码
2020/08/30 Python
浅谈html5标签css3的常用样式
2016/10/20 HTML / CSS
会计实习生自我鉴定
2013/12/12 职场文书
2014酒店客房部工作总结
2014/12/16 职场文书
优秀班集体申报材料
2014/12/25 职场文书
社区扶贫帮困工作总结
2015/05/20 职场文书
python执行js代码的方法
2021/05/13 Python
JavaScript如何利用Promise控制并发请求个数
2021/05/14 Javascript