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 相关文章推荐
js中cookie的添加、取值、删除示例代码
Oct 21 Javascript
javascript与有限状态机详解
May 08 Javascript
JavaScript利用正则表达式去除日期中的-
Jun 09 Javascript
javascript中利用柯里化函数实现bind方法
Apr 29 Javascript
微信小程序 progress组件详解及实例代码
Oct 25 Javascript
深入探究AngularJs之$scope对象(作用域)
Jul 20 Javascript
Vue.js表单标签中的单选按钮、复选按钮和下拉列表的取值问题
Nov 22 Javascript
最适应的vue.js的form提交涉及多种插件【推荐】
Aug 27 Javascript
vue-lazyload使用总结(推荐)
Nov 01 Javascript
Vue项目结合Vue-layer实现弹框式编辑功能(实例代码)
Mar 11 Javascript
vue二选一tab栏切换新做法实现
Jan 19 Vue.js
vue Element-ui表格实现树形结构表格
Jun 07 Vue.js
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面向对象编程快速入门
2006/12/14 PHP
配置Apache2.2+PHP5+CakePHP1.2+MySQL5运行环境
2009/04/25 PHP
php判断一个数组是否为有序的方法
2015/03/27 PHP
常用PHP封装分页工具类
2017/01/14 PHP
关于PHP转换超过2038年日期出错的问题解决
2017/06/28 PHP
PHP常用操作类之通信数据封装类的实现
2017/07/16 PHP
PHP设计模式之模板模式定义与用法详解
2018/12/20 PHP
关于laravel 子查询 &amp; join的使用
2019/10/16 PHP
NodeJS学习笔记之MongoDB模块
2015/01/13 NodeJs
详解如何较好的使用js
2016/12/16 Javascript
教你5分钟学会用requirejs(必看篇)
2017/07/25 Javascript
Vue组件之全局组件与局部组件的使用详解
2017/10/09 Javascript
vue + element-ui实现简洁的导入导出功能
2017/12/22 Javascript
vue-cli项目代理proxyTable配置exclude的方法
2018/09/20 Javascript
使用angular-cli webpack创建多个包的方法
2018/10/16 Javascript
在Bootstrap开发框架中使用dataTable直接录入表格行数据的方法
2018/10/25 Javascript
Node.js系列之安装配置与基本使用(1)
2019/08/30 Javascript
[01:15:15]VG VS EG Supermajor小组赛B组胜者组第一轮 BO3第二场 6.2
2018/06/03 DOTA
深入理解Django的中间件middleware
2018/03/14 Python
python字典的遍历3种方法详解
2019/08/10 Python
Python脚本如何在bilibili中查找弹幕发送者
2020/06/04 Python
纯CSS3实现绘制各种图形实现代码详细整理
2012/12/26 HTML / CSS
印尼披萨外送专家:Domino’s Pizza印尼
2017/12/28 全球购物
铭宣海淘转运:美国、日本、英国转运等全球转运公司
2019/09/10 全球购物
Sisley法国希思黎美国官方网站:享誉全球的奢华植物美容品牌
2020/06/27 全球购物
单位消防安全制度
2014/01/12 职场文书
优秀班集体先进事迹材料
2014/05/28 职场文书
拉拉队口号
2014/06/16 职场文书
数学兴趣小组活动总结
2014/07/08 职场文书
机械设备与数控技术专业求职信
2014/08/10 职场文书
2014年劳动部工作总结
2014/12/11 职场文书
2016年小学“公民道德宣传日”活动总结
2016/04/01 职场文书
使用Springboot实现健身房管理系统
2021/07/01 Java/Android
python playwright 自动等待和断言详解
2021/11/27 Python
vue使用wavesurfer.js解决音频可视化播放问题
2022/04/04 Vue.js
win10蓝屏0xc0000001安全模式进不了怎么办?win10出现0xc0000001的解决方法
2022/08/05 数码科技