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小技巧
Mar 01 Javascript
jquery的键盘事件修改代码
Feb 24 Javascript
JavaScript高级程序设计(第3版)学习笔记9 js函数(下)
Oct 11 Javascript
使用Post提交时须将空格转换成加号的解释
Jan 14 Javascript
extjs 时间范围选择自动判断的实现代码
Jun 24 Javascript
干货!教大家如何选择Vue和React
Mar 13 Javascript
bootstrap如何让dropdown menu按钮式下拉框长度一致
Apr 10 Javascript
基于bootstrap实现bootstrap中文网巨幕效果
May 02 Javascript
JS运动改变单物体透明度的方法分析
Jan 23 Javascript
Vue实现6位数密码效果
Aug 18 Javascript
vue.js实现带日期星期的数字时钟功能示例
Aug 28 Javascript
GitHub上77.9K的Axios项目有哪些值得借鉴的地方详析
Jun 15 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类常量的使用详解
2013/06/08 PHP
php判断GIF图片是否为动画的方法
2020/09/04 PHP
php中isset与empty函数的困惑与用法分析
2019/07/05 PHP
学习ExtJS Panel常用方法
2009/10/07 Javascript
基于JQuery的一个简单的鼠标跟随提示效果
2010/09/23 Javascript
node.js中的path.delimiter方法使用说明
2014/12/09 Javascript
jQuery超简单选项卡完整实例
2015/09/26 Javascript
浅析javascript异步执行函数导致的变量变化问题解决思路
2016/05/13 Javascript
JavaScript常用代码书写规范的超全面总结
2016/09/11 Javascript
微信js-sdk地理位置接口用法示例
2016/10/12 Javascript
全面总结Javascript对数组对象的各种操作
2017/01/22 Javascript
页面间固定参数,通过cookie传值的实现方法
2017/05/31 Javascript
JS实现访问DOM对象指定节点的方法示例
2018/04/04 Javascript
React之PureComponent的使用作用
2018/07/10 Javascript
vue组件横向树实现代码
2018/08/02 Javascript
electron实现qq快捷登录的方法示例
2018/10/22 Javascript
Vue.js 中 axios 跨域访问错误问题及解决方法
2018/11/21 Javascript
详解Vue 数据更新了但页面没有更新的 7 种情况汇总及延伸总结
2020/05/28 Javascript
[02:35]DOTA2英雄基础教程 末日使者
2013/12/04 DOTA
python进阶教程之循环相关函数range、enumerate、zip
2014/08/30 Python
python自定义线程池控制线程数量的示例
2019/02/22 Python
python3.6下Numpy库下载与安装图文教程
2019/04/02 Python
python利用selenium进行浏览器爬虫
2019/04/25 Python
Python除法之传统除法、Floor除法及真除法实例详解
2019/05/23 Python
python之当你发现QTimer不能用时的解决方法
2019/06/21 Python
12个Python程序员面试必备问题与答案(小结)
2019/06/24 Python
Python基于pyecharts实现关联图绘制
2020/03/27 Python
tensorflow使用freeze_graph.py将ckpt转为pb文件的方法
2020/04/22 Python
python 实现socket服务端并发的四种方式
2020/12/14 Python
什么叫应用程序域?什么是受管制的代码?什么是强类型系统?什么是装箱和拆箱?
2016/08/13 面试题
应届大学生的推荐信
2013/11/20 职场文书
高中自我鉴定
2013/12/20 职场文书
优秀少先队工作者事迹材料
2014/05/13 职场文书
普宁寺导游词
2015/02/04 职场文书
2015年度招聘工作总结
2015/05/28 职场文书
加薪申请书应该这样写!
2019/07/04 职场文书