js分页代码分享


Posted in Javascript onApril 28, 2014

js分页代码分享

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script  type='text/javascript' src='jQuery.js'></script>
<style type="text/css">
span{width: 60px;height: 20px;display: inline-block;border: solid 1px black;text-align: center;margin: 5px;cursor:pointer;}
</style>
</head>
<body>
<div id='page'></div>
<div id='con'></div>
<script type='text/javascript'>
 var arr=new Array(1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17);
 /*
 显示那一页的内容
 arr内容数组,那页的从哪条开始显示的,len就是每页显示内容条数
 */
 function pageCon(arr,start,len){
  var constr='';
  for(var i=start;i<start+len;i++){
   if(arr[i-1]){
         constr+=arr[i-1]+"<br/>";
     }
  }
  return constr;
 }
function show(arr,now_page){
  var sum=arr.length;
  var page_size=3;
  var page_num=Math.ceil(sum/page_size);
  var start=(now_page-1)*page_size+1;
  var page_str='';
    for(var i=1;i<=page_num;i++){
     var stylei=i;
     if(i==now_page){  stylei="<span style='background:black;color:white;margin:0'>"+i+"</span>";}
        page_str+='<span onclick="show(arr,'+i+')">'+stylei+'</span>';
    }
  $('#page').html(page_str);
  var constr=pageCon(arr,start,page_size);
  $('#con').html(constr);
}
show(arr,2);
</script>
</body>
</html>
Javascript 相关文章推荐
基于json的jquery地区联动效果代码
Jul 06 Javascript
父节点获取子节点的字符串示例代码
Feb 26 Javascript
鼠标悬浮显示二级菜单效果的jquery实现
Oct 29 Javascript
Javascript中的getUTCDay()方法使用详解
Jun 10 Javascript
JS数组排序技巧汇总(冒泡、sort、快速、希尔等排序)
Nov 24 Javascript
JS实现的倒计时效果实例(2则实例)
Dec 23 Javascript
深入理解Angularjs中$http.post与$.post
May 19 Javascript
JS原生轮播图的简单实现(推荐)
Jul 22 Javascript
深入理解Vue transition源码分析
Jul 30 Javascript
Vue 应用中结合vux使用微信 jssdk的方法
Aug 28 Javascript
Vuex,iView UI面包屑导航使用扩展详解
Nov 04 Javascript
js中实现继承的五种方法
Jan 25 Javascript
jquery使用ajax实现微信自动回复插件
Apr 28 #Javascript
jquery禁用右键示例
Apr 28 #Javascript
jquery实现带二级菜单的导航示例
Apr 28 #Javascript
jquery实现的导航固定效果
Apr 28 #Javascript
网页右侧悬浮滚动在线qq客服代码示例
Apr 28 #Javascript
一个简单的jquery进度条示例
Apr 28 #Javascript
javascript处理表单示例(javascript提交表单)
Apr 28 #Javascript
You might like
《逃离塔科夫》——“萌新劝退,老手自嗨”的硬核FPS游戏
2020/04/03 其他游戏
精致的人儿就要挑杯子喝咖啡
2021/03/03 冲泡冲煮
用 javascript 实现的点击复制代码
2007/03/24 Javascript
js获取图片长和宽度的代码
2009/11/24 Javascript
javascript Array.sort() 跨浏览器下需要考虑的问题
2009/12/07 Javascript
jQuery EasyUI 的EasyLoader功能介绍
2010/09/12 Javascript
JS字符串函数扩展代码
2011/09/13 Javascript
JS window对象的top、parent、opener含义介绍
2013/12/03 Javascript
jQuery基础知识小结
2014/12/22 Javascript
JavaScript中使用Callback控制流程介绍
2015/03/16 Javascript
javascript为按钮注册回车事件(设置默认按钮)的方法
2015/05/09 Javascript
JS实现带圆弧背景渐变效果的导航菜单代码
2015/10/13 Javascript
实例详解JavaScript获取链接参数的方法
2016/01/01 Javascript
JS通过Cookie判断页面是否为首次打开
2016/02/05 Javascript
node中koa中间件机制详解
2017/08/22 Javascript
Vue-resource拦截器判断token失效跳转的实例
2017/10/27 Javascript
vue.js使用v-model指令实现的数据双向绑定功能示例
2018/05/22 Javascript
js自定义input文件上传样式
2018/10/26 Javascript
使用vue cli4.x搭建vue项目的过程详解
2020/05/08 Javascript
Python提取频域特征知识点浅析
2019/03/04 Python
python实现维吉尼亚加密法
2019/03/20 Python
深入了解Django View(视图系统)
2019/07/23 Python
django的csrf实现过程详解
2019/07/26 Python
利用Python小工具实现3秒钟将视频转换为音频
2019/10/29 Python
Django models filter筛选条件详解
2020/03/16 Python
python中str内置函数用法总结
2020/12/27 Python
python程序实现BTC(比特币)挖矿的完整代码
2021/01/20 Python
html5文本内容_动力节点Java学院整理
2017/07/11 HTML / CSS
就业推荐表自我鉴定范文
2014/03/21 职场文书
高中生第一学年自我鉴定2015
2014/09/28 职场文书
英文辞职信范文
2015/05/13 职场文书
紧急迫降观后感
2015/06/15 职场文书
2015年十月一日放假通知
2015/08/18 职场文书
SqlServer 垂直分表(减少程序改动)
2021/04/16 SQL Server
python中的被动信息搜集
2021/04/29 Python
排查Tomcat进程假死的问题
2022/05/06 Servers