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 相关文章推荐
“不能执行已释放的Script代码”错误的原因及解决办法
Sep 09 Javascript
javascript 得到变量类型的函数
May 19 Javascript
Jquery Ajax的Get方式时需要注意URL地方
Apr 07 Javascript
JS延迟加载加快页面打开速度示例代码
Dec 30 Javascript
js获取当前地址 JS获取当前URL的示例代码
Feb 26 Javascript
jquery实现带缩略图的可定制高度画廊效果(5种)
Aug 28 Javascript
禁用backspace网页回退功能的实现代码
Nov 15 Javascript
bootstrap 模态框(modal)实现水平垂直居中显示
Jan 23 Javascript
原生js仿淘宝网商品放大镜效果
Feb 28 Javascript
JavaScript 值类型和引用类型的初次研究(推荐)
Jul 19 Javascript
Vue实现可移动水平时间轴
Jun 29 Javascript
antd多选下拉框一行展示的实现方式
Oct 31 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
《一拳超人》埼玉一拳下去,他们存在了800年毫无意义!
2020/03/02 日漫
实现分十页分向前十页向后十页的处理
2006/10/09 PHP
php实现自动获取生成文章主题关键词功能的深入分析
2013/06/03 PHP
解决Codeigniter不能上传rar和zip压缩包问题
2014/03/07 PHP
thinkphp区间查询、统计查询与SQL直接查询实例分析
2014/11/24 PHP
thinkphp备份数据库的方法分享
2015/01/04 PHP
到处都是jQuery选择器的年代 不了解它们的性能,行吗
2012/06/18 Javascript
使用AngularJS中的SCE来防止XSS攻击的方法
2015/06/18 Javascript
神奇!js+CSS+DIV实现文字颜色渐变效果
2016/03/16 Javascript
微信小程序 wx.uploadFile在安卓手机上面the same task is working问题解决
2016/12/14 Javascript
深入探究AngularJs之$scope对象(作用域)
2017/07/20 Javascript
js模块加载方式浅析
2017/08/12 Javascript
Node.js+jade+mongodb+mongoose实现爬虫分离入库与生成静态文件的方法
2017/09/20 Javascript
vue组件生命周期详解
2017/11/07 Javascript
[13:21]DOTA2国际邀请赛采访专栏:RSnake战队国士无双,Fnatic.Fly
2013/08/06 DOTA
[04:48]DOTA2上海特锦赛小组赛第三日 TOP10精彩集锦
2016/02/28 DOTA
Python高级应用实例对比:高效计算大文件中的最长行的长度
2014/06/08 Python
jupyter安装小结
2016/03/13 Python
django站点管理详解
2017/12/12 Python
Python3.5.3下配置opencv3.2.0的操作方法
2018/04/02 Python
python pandas中DataFrame类型数据操作函数的方法
2018/04/08 Python
Django学习教程之静态文件的调用详解
2018/05/08 Python
Python 调用 Windows API COM 新法
2019/08/22 Python
scikit-learn线性回归,多元回归,多项式回归的实现
2019/08/29 Python
python运用sklearn实现KNN分类算法
2019/10/16 Python
解决Pycharm双击图标启动不了的问题(JetBrains全家桶通用)
2020/08/07 Python
Python Selenium自动化获取页面信息的方法
2020/08/31 Python
深入浅析HTML5中的article和section的区别
2018/05/15 HTML / CSS
Html5页面获取微信公众号的openid的方法
2020/05/12 HTML / CSS
Melissa鞋马来西亚官方网站:MDreams马来西亚
2018/04/05 全球购物
数据库笔试题
2013/05/09 面试题
财务情况说明书范文
2014/05/06 职场文书
火烧圆明园的观后感
2015/06/03 职场文书
电工生产实习心得体会
2016/01/22 职场文书
妇联2016年六一国际儿童节活动总结
2016/04/06 职场文书
django上传文件的三种方式
2021/04/29 Python