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 相关文章推荐
基于JavaScript实现一定时间后去执行一个函数
Dec 14 Javascript
jQuery mobile 移动web(4)
Dec 20 Javascript
JavaScript事件类型中焦点、鼠标和滚轮事件详解
Jan 25 Javascript
更高效的使用JQuery 这里总结了8个小技巧
Apr 13 Javascript
BootStrap 动态表单效果
Jun 02 Javascript
js实现前端图片上传即时预览功能
Aug 02 Javascript
微信小程序基于slider组件动态修改标签透明度的方法示例
Dec 04 Javascript
使用webpack-dev-server处理跨域请求的方法
Apr 18 Javascript
vue代理和跨域问题的解决
Jul 18 Javascript
微信小程序实现无限滚动列表
May 29 Javascript
原生js实现密码强度验证功能
Mar 18 Javascript
vant中的toast轻提示实现代码
Nov 04 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
PHP类的使用 实例代码讲解
2009/12/28 PHP
PHP 第二节 数据类型之字符串类型
2012/04/28 PHP
简单的cookie计数器实现源码
2013/06/07 PHP
PHP基于cookie实现统计在线人数功能示例
2019/01/16 PHP
PHP中mysqli_get_server_version()的实例用法
2020/02/03 PHP
javascript静态页面传值的三种方法分享
2013/11/12 Javascript
每天一篇javascript学习小结(Date对象)
2015/11/13 Javascript
D3.js实现散点图和气泡图的方法详解
2016/09/21 Javascript
Ajax+FormData+javascript实现无刷新表单信息提交
2016/10/24 Javascript
关于ES6的六个小特性(二)
2017/02/20 Javascript
yii form 表单提交之前JS在提交按钮的验证方法
2017/03/15 Javascript
node.js+jQuery实现用户登录注册AJAX交互
2017/04/28 jQuery
js+html5实现侧滑页面效果
2017/07/15 Javascript
解决vue2.0路由跳转未匹配相应用路由避免出现空白页面的问题
2018/08/24 Javascript
JavaScript 几种循环方式以及模块化的总结
2020/09/03 Javascript
vue仿携程轮播图效果(滑动轮播,下方高度自适应)
2021/02/11 Vue.js
[03:54]Ehome出征西雅图 回顾2016国际邀请赛晋级之路
2016/08/02 DOTA
[45:52]2018DOTA2亚洲邀请赛 4.1小组赛 A组加赛 LGD vs Liquid
2018/04/02 DOTA
[29:16]完美世界DOTA2联赛决赛日 Inki vs LBZS 第三场 11.08
2020/11/10 DOTA
python实现代码行数统计示例分享
2014/02/10 Python
基于Python_脚本CGI、特点、应用、开发环境(详解)
2017/05/23 Python
python将字典内容存入mysql实例代码
2018/01/18 Python
python八皇后问题的解决方法
2018/09/27 Python
python,Django实现的淘宝客登录功能示例
2019/06/12 Python
django 数据库 get_or_create函数返回值是tuple的问题
2020/05/15 Python
丝芙兰加拿大官方网站:SEPHORA加拿大
2018/11/20 全球购物
西班牙最好的在线购买葡萄酒的商店:Vinoseleccion
2019/10/30 全球购物
东方通信股份有限公司VC面试题
2014/08/27 面试题
夜班门卫岗位职责
2013/12/09 职场文书
优秀应届毕业生推荐信
2014/02/18 职场文书
节水倡议书范文
2014/04/15 职场文书
小学生优秀评语
2014/12/29 职场文书
学生会任命书范本
2015/09/21 职场文书
小学生班干部竞选稿
2015/11/20 职场文书
MySQL 不等于的三种使用及区别
2021/06/03 MySQL
CSS精灵图的原理与使用方法介绍
2022/03/17 HTML / CSS