非常不错的一个JS分页效果代码
<!doctype html public "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="gb2312">
<head>
<title>JS静态分页程序--www.jbxue.com</title>
</head>
<style type="text/css">
a:link,a:visited,a:hover,.current,#info{
border:1px solid #DDD;
background:#F2F2F2;
display:inline-block;
margin:1px;
text-decoration:none;
font-size:12px;
width:15px;
height:15px;
text-align:center;
line-height:15px;
color:#AAA;
padding:1px 2px;
}
a:hover{
border:1px solid #E5E5E5;
background:#F9F9F9;
}
.current{
border:1px solid #83E7E4;
background:#DFF9F8;
margin:1px;
color:#27CBC7;
}
#info{
width:auto;
}
</style>
<body>
<div id="setpage"></div>
<script type="text/javascript">
<!--
var totalpage,pagesize,cpage,count,curcount,outstr;
//初始化
cpage = 1;
totalpage = 56;
pagesize = 10;
outstr = "";
function gotopage(target)
{
cpage = target; //把页面计数定位到第几页
setpage();
//reloadpage(target); //调用显示页面函数显示第几页,这个功能是用在页面内容用ajax载入的情况
}
function setpage()
{
if(totalpage<=10){ //总页数小于十页
for (count=1;count<=totalpage;count++)
{ if(count!=cpage)
{
outstr = outstr + "<a href='javascript:void(0)' onclick='gotopage("+count+")'>"+count+"</a>";
}else{
outstr = outstr + "<span class='current' >"+count+"</span>";
}
}
}
if(totalpage>10){ //总页数大于十页
if(parseInt((cpage-1)/10) == 0)
{
for (count=1;count<=10;count++)
{ if(count!=cpage)
{
outstr = outstr + "<a href='javascript:void(0)' onclick='gotopage("+count+")'>"+count+"</a>";
}else{
outstr = outstr + "<span class='current'>"+count+"</span>";
}
}
outstr = outstr + "<a href='javascript:void(0)' onclick='gotopage("+count+")'> next </a>";
}
else if(parseInt((cpage-1)/10) == parseInt(totalpage/10))
{
outstr = outstr + "<a href='javascript:void(0)' onclick='gotopage("+(parseInt((cpage-1)/10)*10)+")'>previous</a>";
for (count=parseInt(totalpage/10)*10+1;count<=totalpage;count++)
{ if(count!=cpage)
{
outstr = outstr + "<a href='javascript:void(0)' onclick='gotopage("+count+")'>"+count+"</a>";
}else{
outstr = outstr + "<span class='current'>"+count+"</span>";
}
}
}
else
{ www.jbxue.com
outstr = outstr + "<a href='javascript:void(0)' onclick='gotopage("+(parseInt((cpage-1)/10)*10)+")'>previous</a>";
for (count=parseInt((cpage-1)/10)*10+1;count<=parseInt((cpage-1)/10)*10+10;count++)
{
if(count!=cpage)
{
outstr = outstr + "<a href='javascript:void(0)' onclick='gotopage("+count+")'>"+count+"</a>";
}else{
outstr = outstr + "<span class='current'>"+count+"</span>";
}
}
outstr = outstr + "<a href='javascript:void(0)' onclick='gotopage("+count+")'> next </a>";
}
}
document.getElementById("setpage").innerHTML = "<div id='setpage'><span id='info'>共"+totalpage+"页|第"+cpage+"页<\/span>" + outstr + "<\/div>";
outstr = "";
}
setpage(); //调用分页
//-->
</script>
</body>
</html>
您可能感兴趣的文章：
非常不错的一个JS分页效果代码的更多相关文章
- js 删除效果代码
效果 css文件delcss.css 代码如下: ;;} #div1{;; filter:alpha(opacity:0); display:none;} #div1 h3{ height:20px; ...
- js分页效果
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 一个js对象的代码结构
初步理解的js里一个对象的写法: GameLayer GameLayer.js var GameLayer = cc.Layer.extend({ //私有属性(带下划线"_&q ...
- HTML5动态分页效果代码
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- JS - 常用效果代码库 (四)
1.首字母大写示例: var value = “一段文本或一个参数”; value = value.toString() return value.charAt(0).toUpperCase() + ...
- 一个JS效果竟然要研究一天，我是不是不适合做前端？
前言 今天这篇文章的标题,显然是要搞事情.一个JS交互效果,居然花费了一天的宝贵时间才研究出来,我是不是不太适合做前端? 别急,搬好小板凳,正文从这开始- 本来今天下班回来感觉有点累,想着今天就别学了 ...
- 面向对象版js分页
基于前一个js分页,我将代码改成一个面向对象版的js分页,代码如下 http://peng666.github.io/blogs/pageobj <!DOCTYPE html> <h ...
- 如何查看一个网页特定效果的js代码（动画效果可js和css）（页面可以看到js的源代码）
如何查看一个网页特定效果的js代码(动画效果可js和css)(页面可以看到js的源代码) 一.总结 1.动画效果可能是 CSS 实现的,也可能是 JS 实现的. 2.直接Chrome的F12调试即可, ...
- 关于js实现分页效果的简单代码
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...
随机推荐
- Esper学习之三：进程模型
之前对Esper所能处理的事件结构进行了概述,并结合了例子进行讲解,不清楚的同学请看Esper学习之二:事件类型.今天主要为大家解释一下Esper是怎么处理事件的,即Esper的进程模型. 1.Upd ...
- 【大数据系列】windows搭建hadoop开发环境
一.安装JDK配置环境变量 已经安装略过 二.安装eclipse 已经安装略过 三.安装Ant 1.下载http://ant.apache.org/bindownload.cgi 2.解压 3.配置A ...
- Github for Windows 登录时报代理问题？
Github for Windows 登录时报如下错误: 不要被它的提示信息误导了. 登录失败,跟代理半毛钱关系都没有. 是 .net framework 组件 的问题. 更新下 .net frame ...
- 题目1453：Greedy Tino（dp题目）
题目链接:http://ac.jobdu.com/problem.php?pid=1453 详解链接:https://github.com/zpfbuaa/JobduInCPlusPlus 参考代码: ...
- [原]git的使用(六)---远程仓库
10.远程仓库 -------------------------------------------------------------------------------------------- ...
- nginx命令行参数和信号
nginx命令行参数 [user@host dir]$ /usr/local/nginx/sbin/nginx -hnginx version: nginx/1.8.0Usage: nginx [-? ...
- 【CF744D】Hongcow Draws a Circle 二分+几何
[CF744D]Hongcow Draws a Circle 题意:给你平面上n个红点和m个蓝点,求一个最大的圆,满足圆内不存在蓝点,且至少包含一个红点. $n,m\le 10^3$ 题解:我们先不考 ...
- iOS学习笔记06—Category和Extension
iOS学习笔记06—Category和Extension 一.概述 类别是一种为现有的类添加新方法的方式. 利用Objective-C的动态运行时分配机制,Category提供了一种比继承(inher ...
- vue--环境搭建（创建运行项目）
如何搭建vue环境: 1.安装之前必须要安装 node.js 2.搭建Vue环境,安装vue的脚手架工具 npm install --global vue-cli / cnpm install --g ...
- POJ-2353 Ministry（动态规划）
Ministry Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 4761 Accepted: 1528 Special Judg ...