JS实现当前页居中分页效果的方法
作者:bea
本文实例讲述了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 pag
本文实例讲述了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);
}
运行效果如下图所示:
希望本文所述对大家的javascript程序设计有所帮助。
有用 | 无用
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);
}
运行效果如下图所示:
希望本文所述对大家的javascript程序设计有所帮助。
有用 | 无用
猜你喜欢
您可能感兴趣的文章:
- 在AngularJS应用中实现一些动画效果的代码
- 使用AngularJS对路由进行安全性处理的方法
- 浅谈Node.js中的定时器
- 浅析AngularJS中的生命周期和延迟处理
- Node.js事件驱动
- 详解AngularJS的通信机制
- javascript背景时钟实现方法
- 移动Web中图片自适应的两种JavaScript解决方法
- javascript随机显示背景图片的方法
- 利用JavaScript的AngularJS库制作电子名片的方法
- javascript实现根据时间段显示问候语的方法
- javascript显示中文日期的方法
- 使用AngularJS制作一个简单的RSS阅读器的教程
- 使用AngularJS中的SCE来防止XSS攻击的方法
- 初步认识JavaScript函数库jQuery
- 用JavaScript显示浏览器客户端信息的超相近教程
- 浅谈Jquery核心函数
- $.extend 的一个小问题
- 纯js实现无限空间大小的本地存储