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 31 Javascript
javascript延时加载之defer测试
Dec 28 Javascript
Javascript中使用A标签获取当前目录的绝对路径方法
Mar 02 Javascript
基于JavaScript实现类似于百度学术高级检索功能
Mar 02 Javascript
Javascript的表单验证-初识正则表达式
Mar 18 Javascript
Javascrip实现文字跳动特效
Nov 27 Javascript
判断颜色是否合法的正则表达式(详解)
May 03 Javascript
js实现canvas保存图片为png格式并下载到本地的方法
Aug 31 Javascript
三分钟教你用Node做一个微信哄女友(基友)神器(面向小白)
Jun 21 Javascript
bootstrap实现tab选项卡切换
Aug 09 Javascript
vue 函数调用加括号与不加括号的区别
Oct 29 Javascript
详解微信小程序「渲染层网络层错误」的解决方法
Jan 06 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 Squid中可缓存的动态网页设计
2008/09/17 PHP
PHP.ini中配置屏蔽错误信息显示和保存错误日志的例子
2014/05/12 PHP
php中session_id()函数详细介绍,会话id生成过程及session id长度
2015/09/23 PHP
PHP调用Mailgun发送邮件的方法
2017/05/04 PHP
PHP使用PDO创建MySQL数据库、表及插入多条数据操作示例
2019/05/30 PHP
将jQuery应用于login页面的问题及解决
2009/10/17 Javascript
jQuery解决下拉框select设宽度时IE 6/7/8下option超出显示不全
2013/05/27 Javascript
JQuery使用index方法获取Jquery对象数组下标的方法
2015/05/18 Javascript
JQuery Dialog对话框 不能通过Esc关闭的原因分析及解决办法
2017/01/18 Javascript
深入浅出webpack教程系列_安装与基本打包用法和命令参数详解
2017/09/10 Javascript
对angular 实时更新模板视图的方法$apply详解
2018/10/09 Javascript
Vue.js轮播图走马灯代码实例(全)
2019/05/08 Javascript
node.JS二进制操作模块buffer对象使用方法详解
2020/02/06 Javascript
Vue + Element-ui的下拉框el-select获取额外参数详解
2020/08/14 Javascript
压缩包密码破解示例分享(类似典破解)
2014/01/17 Python
Python程序中使用SQLAlchemy时出现乱码的解决方案
2015/04/24 Python
Python ftp上传文件
2016/02/13 Python
利用python爬取散文网的文章实例教程
2017/06/18 Python
浅谈python函数之作用域(python3.5)
2017/10/27 Python
python 一篇文章搞懂装饰器所有用法(建议收藏)
2019/08/23 Python
Django模板获取field的verbose_name实例
2020/05/19 Python
css3 利用transform打造走动的2D时钟
2020/10/20 HTML / CSS
HTML5 新事件 小结
2009/07/16 HTML / CSS
HTML5+JS实现俄罗斯方块原理及具体步骤
2013/11/29 HTML / CSS
解决HTML5中的audio在手机端和微信端的不能自动播放问题
2019/11/04 HTML / CSS
阿迪达斯西班牙官方网站:adidas西班牙
2016/07/21 全球购物
综合素质的自我鉴定
2013/10/07 职场文书
中文专业学生自我评价范文
2014/02/06 职场文书
《太阳》教学反思
2014/02/21 职场文书
岗位明星事迹材料
2014/05/18 职场文书
租房协议书范例
2014/10/14 职场文书
小学生表扬稿范文
2015/05/05 职场文书
2016三八妇女节慰问信
2015/11/30 职场文书
2016年“抗战胜利纪念日”71周年校园广播稿
2015/12/18 职场文书
总结Java对象被序列化的两种方法
2021/06/30 Java/Android
2022微信温控新功能上线
2022/05/09 数码科技