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 相关文章推荐
javascript 面向对象编程  function是方法(函数)
Sep 17 Javascript
javascript setAttribute, getAttribute 在不同浏览器上的不同表现
Aug 05 Javascript
JQuery入门——用bind方法绑定事件处理函数应用介绍
Feb 05 Javascript
javascript ajax的5种状态介绍
Aug 18 Javascript
javascript如何写热点图
Dec 08 Javascript
js实现图片轮播效果
Dec 19 Javascript
node.js 中国天气预报 简单实现
Jun 06 Javascript
JS使用onerror捕获异常示例
Aug 03 Javascript
JavaScript自定义函数实现查找两个字符串最长公共子串的方法
Nov 24 Javascript
关于Google发布的JavaScript代码规范你要知道哪些
Apr 04 Javascript
JavaScript设计模式之命令模式实例分析
Jan 16 Javascript
Vue.js+cube-ui(Scroll组件)实现类似头条效果的横向滚动导航条
Jun 24 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提取中文首字母
2008/04/09 PHP
php smarty模版引擎中的缓存应用
2009/12/11 PHP
PHP利用Mysql锁解决高并发的方法
2018/09/04 PHP
Jquery插件 easyUI属性汇总
2011/01/19 Javascript
jquery刷新页面的实现代码(局部及全页面刷新)
2011/07/11 Javascript
JavaScript中去掉数组中的重复值的实现方法
2011/08/03 Javascript
js和jquery中循环的退出和继续学习记录
2014/09/06 Javascript
jQuery实现的淡入淡出二级菜单效果代码
2015/09/15 Javascript
jQuery Mobile 触摸事件实例
2016/06/04 Javascript
vue2.0全局组件之pdf详解
2017/06/26 Javascript
React Native预设占位placeholder的使用
2017/09/28 Javascript
浅谈Koa2框架利用CORS完成跨域ajax请求
2018/03/06 Javascript
angular6 利用 ngContentOutlet 实现组件位置交换(重排)
2018/11/02 Javascript
axios携带cookie配置详解(axios+koa)
2018/12/28 Javascript
jquery+css实现Tab栏切换的代码实例
2019/05/14 jQuery
vue实现数字滚动效果
2020/06/29 Javascript
从零开始用webpack构建一个vue3.0项目工程的实现
2020/09/24 Javascript
Python变量赋值的秘密分享
2018/04/03 Python
解决pandas.DataFrame.fillna 填充Nan失败的问题
2018/11/06 Python
django一对多模型以及如何在前端实现详解
2019/07/24 Python
python opencv鼠标事件实现画框圈定目标获取坐标信息
2020/04/18 Python
执行Django数据迁移时报 1091错误及解决方法
2019/10/14 Python
以SQLite和PySqlite为例来学习Python DB API
2020/02/05 Python
Python中的全局变量如何理解
2020/06/04 Python
Python将字典转换为XML的方法
2020/08/01 Python
伦敦最有品味的百货:Liberty London
2016/11/12 全球购物
MADE荷兰:提供原创设计师家具
2018/04/03 全球购物
世界上最大的隐形眼镜商店:1-800 Contacts
2018/11/03 全球购物
合作意向书格式及范文
2014/03/31 职场文书
医院院务公开实施方案
2014/05/03 职场文书
电焊工岗位工作职责
2014/07/09 职场文书
判缓刑人员个人思想汇报
2014/10/10 职场文书
质量负责人岗位职责
2015/02/15 职场文书
小学一年级数学教学反思
2016/02/16 职场文书
导游词之西安骊山
2019/12/20 职场文书
Java elasticsearch安装以及部署教程
2021/06/28 Java/Android