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 相关文章推荐
Firefox 无法获取cssRules 的解决办法
Oct 11 Javascript
JavaScript-世界上误解最深的语言分析
Aug 12 Javascript
js判断变量是否空值的代码
Oct 26 Javascript
Mootools 1.2教程 定时器和哈希简介
Sep 15 Javascript
JavaScript 获取当前时间戳的代码
Aug 05 Javascript
javascript的数组和常用函数详解
May 09 Javascript
JS实现弹性漂浮效果的广告代码
Sep 02 Javascript
jquery实现可自动判断位置的弹出层效果代码
Oct 12 Javascript
AngularJS通过$http和服务器通信详解
Sep 21 Javascript
详解vue 项目白屏解决方案
Oct 31 Javascript
JS实现随机生成10个手机号的方法示例
Dec 07 Javascript
浅谈监听单选框radio改变事件(和layui中单选按钮改变事件)
Sep 10 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
在WordPress中安装使用视频播放器插件Hana Flv Player
2016/01/04 PHP
php实现的双色球算法示例
2017/06/20 PHP
PHP PDOStatement::bindParam讲解
2019/01/30 PHP
PHP fopen函数用法实例讲解
2019/02/15 PHP
JavaScript TO HTML 转换
2006/06/26 Javascript
JS控件autocomplete 0.11演示及下载 1月5日已更新
2007/01/09 Javascript
jQuery入门第一课 jQuery选择符
2010/03/14 Javascript
在javascript将NodeList作为Array数组处理的方法
2010/07/09 Javascript
JavaScript基础语法让人疑惑的地方小结
2012/05/23 Javascript
解决js中window.open弹出的是上次的缓存页面问题
2013/12/29 Javascript
javascript实现避免页面按钮重复提交
2015/01/08 Javascript
js实现iframe自动自适应高度的方法
2015/02/17 Javascript
jquery 根据name名获取元素的value值
2015/02/27 Javascript
详解JavaScript的while循环的使用
2015/06/03 Javascript
jQuery插件实现静态HTML验证码校验
2015/11/06 Javascript
轻松学习jQuery插件EasyUI EasyUI表单验证
2015/12/01 Javascript
JS简单实现点击复制链接的方法
2016/08/03 Javascript
node.JS md5加密中文与php结果不一致的解决方法
2017/05/05 Javascript
深入浅析var,let,const的异同点
2018/08/07 Javascript
JavaScript创建对象的常用方式总结
2018/08/10 Javascript
vscode下vue项目中eslint的使用方法
2019/01/13 Javascript
JS实现的全选、全不选及反选功能【案例】
2019/02/19 Javascript
微信小程序云开发之模拟后台增删改查
2019/05/16 Javascript
详解Python的迭代器、生成器以及相关的itertools包
2015/04/02 Python
合并百度影音的离线数据( with python 2.3)
2015/08/04 Python
python如何读写csv数据
2018/03/21 Python
python写入文件自动换行问题的方法
2019/07/05 Python
如何基于Python创建目录文件夹
2019/12/31 Python
python框架flask入门之环境搭建及开启调试
2020/06/07 Python
Django如何批量创建Model
2020/09/01 Python
Django通过设置CORS解决跨域问题
2020/11/26 Python
浅析CSS3 用text-overflow解决文字排版问题
2020/10/28 HTML / CSS
美国现代家具和家居商店:Apt2B
2016/08/29 全球购物
IT工程师岗位职责
2014/07/04 职场文书
上课睡觉检讨书300字
2014/11/18 职场文书
南京大屠杀观后感
2015/06/02 职场文书