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 相关文章推荐
Jquery + Ajax调用webService实例代码(asp.net)
Aug 27 Javascript
JavaScript中的常见问题解决方法(乱码,IE缓存,代理)
Nov 28 Javascript
浅析jquery的作用与优势
Dec 02 Javascript
asp.net+js实现金额格式化
Feb 27 Javascript
node.js+express制作网页计算器
Jan 17 Javascript
5种JavaScript脚本加载的方式
Jan 16 Javascript
微信小程序实战之仿android fragment可滑动底部导航栏(4)
Apr 16 Javascript
全面解析vue router 基本使用(动态路由,嵌套路由)
Sep 02 Javascript
javascript面向对象三大特征之多态实例详解
Jul 24 Javascript
浅谈javascript错误处理
Aug 11 Javascript
微信域名检测接口调用演示步骤(含PHP、Python)
Dec 08 Javascript
微信小程序pinker组件使用实现自动相减日期
May 07 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
水质对咖图啡风味的影响具体有哪些
2021/03/03 冲泡冲煮
php 获取mysql数据库信息代码
2009/03/12 PHP
PHP stristr() 函数(不区分大小写的字符串查找)
2010/06/03 PHP
PHP 魔术变量和魔术函数详解
2015/02/25 PHP
PHP生成图片缩略图类示例
2017/01/12 PHP
ThinkPHP类似AOP思想的参数验证的实现方法
2019/12/18 PHP
JavaScript中的Math.atan2()方法使用详解
2015/06/15 Javascript
jQuery实现TAB风格的全国省份城市滑动切换效果代码
2015/08/24 Javascript
ThinkPHP+jquery实现“加载更多”功能代码
2017/03/11 Javascript
javascript实现滑动解锁功能
2017/03/22 Javascript
vue2.0使用swiper组件实现轮播效果
2017/11/27 Javascript
微信小程序提交form操作示例
2018/12/30 Javascript
JQueryDOM之样式操作
2019/03/27 jQuery
详解JavaScript的数据类型以及数据类型的转换
2019/04/20 Javascript
浅析Vue中拆分视图层代码的5点建议
2019/08/15 Javascript
浅谈JavaScript中this的指向问题
2020/07/28 Javascript
如何在vue中使用HTML 5 拖放API
2021/01/14 Vue.js
[01:11]回顾历届DOTA2国际邀请赛中国区预选赛
2017/06/26 DOTA
Python基于递归实现电话号码映射功能示例
2018/04/13 Python
Python检测网络延迟的代码
2018/05/15 Python
Python之inspect模块实现获取加载模块路径的方法
2018/10/16 Python
在Python中定义一个常量的方法
2018/11/10 Python
pymongo中group by的操作方法教程
2019/03/22 Python
python文件写入write()的操作
2019/05/14 Python
Django+python服务器部署与环境部署教程详解
2020/03/30 Python
Python virtualenv虚拟环境实现过程解析
2020/04/18 Python
Python configparser模块操作代码实例
2020/06/08 Python
Python unittest装饰器实现原理及代码
2020/09/08 Python
PyQt实现计数器的方法示例
2021/01/18 Python
美国网上鞋城:Shoeline.com
2016/11/17 全球购物
澳大利亚个性化儿童礼品网站:Bright Star Kids
2019/06/14 全球购物
JoJo Maman Bébé爱尔兰官网:英国最受欢迎的精品母婴品牌
2020/12/20 全球购物
淘宝店铺营销方案
2014/02/13 职场文书
讲文明懂礼貌演讲稿
2014/09/11 职场文书
2015年幼儿园德育工作总结
2015/05/25 职场文书
欧元符号 €
2022/02/17 杂记