非常不错的一个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 ...
随机推荐
- echarts - 特殊需求实现代码汇总之【线图】篇
时间过得好快,刚刚还是7月底,一转眼自己调整(浪费)了大半个月的时间.. 接下来要先总结一下自己之前的知识点,然后清掉自己的待办任务,重新轻装上阵! 继7月24的echarts-柱图配置汇总后,ech ...
- servlet相关 jar包位置 BAE上部署web应用
1手动编译servlet工程: 要编译servlet,则类路径classpath中必须包括Servlet API 的相关类,如果使用的web容器是Tomcat,则这些类通常封装在在tomcat的lib ...
- guzzle http异步 post
use GuzzleHttp\Pool;use GuzzleHttp\Client;//use GuzzleHttp\Psr7\Request;use Psr\Http\Message\Respons ...
- 2-3 vue配置介绍
一.通过vue-cli构建的项目的文件介绍 1.bulid文件夹 ==> 项目打包的配置文件夹 2.config文件夹 ==> 打包的配置 3.src文件夹 ==> 项目开发的源码 ...
- Android ActivityManager与WindowManager
<uses-permission android:name="android.permission.GET_TASKS" /> <uses-permission ...
- oracle简单存储过程以及如何查看编译错误
oracle简单存储过程以及如何查看编译错误; CREATE OR REPLACE PROCEDURE procedure_test ISval VARCHAR2(200);BEGIN /* val ...
- 转sklearn保存模型
训练好了一个Model 以后总需要保存和再次预测, 所以保存和读取我们的sklearn model也是同样重要的一步. 比如,我们根据房源样本数据训练了一下房价模型,当用户输入自己的房子后,我们就需要 ...
- postgresql----JSON类型和函数
postgresql支持两种json数据类型:json和jsonb,而两者唯一的区别在于效率,json是对输入的完整拷贝,使用时再去解析,所以它会保留输入的空格,重复键以及顺序等.而jsonb是解析输 ...
- Saltstack之SSH
salt-minion也可以不安装通过在master安装salt-ssh 1,安装 yum -y install salt-ssh 2,配置salt的花名册 vim /etc/salt/roster ...
- KMP算法小记
Knuth-Morris-Pratt算法: 转载来自http://www.ruanyifeng.com/blog/2013/05/Knuth%E2%80%93Morris%E2%80%93Pratt_ ...