非常不错的一个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 ...
随机推荐
- Linux 如何开启SFTP
一.SFTP讲解 SFTP 是Secure File Transfer Protocol的缩写,安全文件传送协议.可以为传输文件提供一种安全的加密方法. SFTP 与 FTP有着几乎一样的语法和功能. ...
- Artech的MVC4框架学习——第六章Model的验证
第一Model验证旨在为通过Model绑定生成参数进行检验以确保用户输入数据的有效性(p318) 第二Model验证分两种:服务器端(三种解决方案 p256)和客户端(ajax\jQuery) 第三服 ...
- 关于Jmeter3.0，你必须要知道的5点变化
2016.5.18日,Apache 发布了jmeter 3.0版本,本人第一时间上去查看并下载使用了,然后群里或同事都会问有什么样变化呢?正好在网上看到一遍关于3.0的文章,但是是英文的.这里翻译一下 ...
- Android 应用内切换语言
extends :http://bbs.51cto.com/thread-1075165-1.html,http://www.cnblogs.com/loulijun/p/3164746.html 1 ...
- 'cmd' 不是内部或外部命令,也不是可运行的程序 或批处理文件.
添加path内容: %SystemRoot%\system32; %SystemRoot%; %SystemRoot%\System32\Wbem;
- SQL已存在则更新不存在则插入
不废话,下代码. replace into T_Life_UMessage(message_id,account,isread,isdelete)values(?,?,1,1) 意思是若不存在则插入要 ...
- UVM phase的用法研究【zz】
原文地址:http://bbs.eetop.cn/viewthread.php?tid=383872&extra=&authorid=828160&page=1 我相信很多朋友 ...
- nginx 反向代理apache服务器 配置java与PHP共存环境
listen 80; listen 443; ssl on; ssl_certificate /passport.crt; ssl_certificate_key /passport.key; ssl ...
- Linux--抓取Appium网站命令
# 获取各命令url地址 curl http://appium.io/docs/en/commands/device/app/is-app-installed/ 2>/dev/null | gr ...
- 《MYSQL必知必会2
60.NULL是没有值,空串是一个有效值61.主键只能使用不允许未NULL值的列62.每个表只允许一个auto_increment列63.不允许使用函数作为默认值,只支持常量64.InnoDB 支持事 ...