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 相关文章推荐
SyntaxHighlighter代码加色使用方法
Sep 07 Javascript
JavaScript 学习笔记(九)call和apply方法
Jan 11 Javascript
jQuery 锚点跳转滚动条平滑滚动一句话代码
Apr 30 Javascript
P3P Header解决Cookie跨域的问题
Mar 12 Javascript
jQuery中addClass()方法用法实例
Jan 05 Javascript
jquery图片切换插件
Mar 16 Javascript
简介JavaScript中setUTCSeconds()方法的使用
Jun 12 Javascript
基于Bootstrap的Metronic框架实现条码和二维码的生成及打印处理操作
Aug 29 Javascript
Require.JS中的几种define定义方式示例
Jun 01 Javascript
前端把html表格生成为excel表格的实例
Sep 19 Javascript
JavaScript实现学生在线做题计时器功能
Dec 05 Javascript
echarts柱状图背景重叠组合而非并列的实现代码
Dec 10 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 MVC模式在网站架构中的实现分析
2010/03/04 PHP
PHP中Restful api 错误提示返回值实现思路
2016/04/12 PHP
深入理解PHP中mt_rand()随机数的安全
2017/10/12 PHP
PHP7创建COOKIE和销毁COOKIE的实例方法
2020/02/03 PHP
php实现统计IP数及在线人数的示例代码
2020/07/22 PHP
js函数般调用正则
2008/04/08 Javascript
Jquery优化效率 提升性能解决方案
2010/09/06 Javascript
js 获取class的元素的方法 以及创建方法getElementsByClassName
2013/03/11 Javascript
瀑布流布局代码一例
2014/04/11 Javascript
深入学习JavaScript对象
2015/10/13 Javascript
jQuery移动web开发中的页面初始化与加载事件
2015/12/03 Javascript
浅谈js中StringBuffer类的实现方法及使用
2016/09/02 Javascript
Vue方法与事件处理器详解
2016/12/01 Javascript
AngularJS过滤器filter用法总结
2016/12/13 Javascript
Vue2路由动画效果的实现代码
2017/07/10 Javascript
jQuery自动或手动图片切换效果
2017/10/11 jQuery
Vuejs2 + Webpack框架里,模拟下载的实例讲解
2018/09/05 Javascript
微信小程序实现搜索指定景点周边美食、酒店
2019/05/18 Javascript
详解Jest结合Vue-test-utils使用的初步实践
2019/06/27 Javascript
在微信小程序中渲染HTML内容3种解决方案及分析与问题解决
2020/01/12 Javascript
9种方法优化jQuery代码详解
2020/02/04 jQuery
解决Element中el-date-picker组件不回填的情况
2020/11/07 Javascript
Python正则表达式介绍
2012/08/06 Python
详解Django通用视图中的函数包装
2015/07/21 Python
Python中遍历字典过程中更改元素导致异常的解决方法
2016/05/12 Python
在Python 2.7即将停止支持时,我们为你带来了一份python 3.x迁移指南
2018/01/30 Python
Python如何读写CSV文件
2020/08/13 Python
Python利用matplotlib绘制折线图的新手教程
2020/11/05 Python
一款纯css3实现的非常实用的鼠标悬停特效演示
2014/11/05 HTML / CSS
Laura官网:加拿大女性的顶级时尚目的地
2019/09/20 全球购物
什么是封装
2013/03/26 面试题
企业读书活动总结
2014/06/30 职场文书
《春酒》教学反思
2016/02/22 职场文书
10大幻兽系恶魔果实 蝙蝠果实上榜,第一自愈能力强
2022/03/18 日漫
「天才王子的赤字国家重生术」妮妮姆·拉雷粘土人开订
2022/03/21 日漫
golang连接MySQl使用sqlx库
2022/04/14 Golang