脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → 基础知识 → js分页代码

js分页代码分享

 更新时间：2014年04月28日 10:31:12   作者：  
这篇文章主要介绍了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浏览器兼容教程之事件处理

    如果在使用javascript的时候涉及到event处理，就需要知道event在不同的浏览器中的差异，主要的JavaScript的事件模型有三种（参考《Supporting Three Event Models at Once》），它们分别是NN4、IE4+和W3C/Safar。
    2014-06-06
  • js indexOf()定义和用法

    js indexOf()定义和用法

    js中indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置
    2012-10-10
  • javascript 函数使用说明

    javascript 函数使用说明

    其实通俗的说就是一个有名称的代码段，方便重用。
    2010-04-04
  • 12条写出高质量JS代码的方法

    12条写出高质量JS代码的方法

    这篇文章给大家讲述了如何遵循12条方法来写出高质量的JS代码的经验，有这方便需要的朋友参考下吧。
    2018-01-01
  • 荐书|您有一份JavaScript书单待签收

    荐书|您有一份JavaScript书单待签收

    &#8203;学习是一个持续不断的过程，在互联网技术里畅游的程序员们，对学习的渴望更是难以穷尽，下面这篇文章主要给大家分享了关于Javascript相关的书籍，对大家学习Javascript具有一定的参考学习价值，下面来一起看看吧。
    2017-07-07
  • 简单了解JavaScript异步

    简单了解JavaScript异步

    所谓"异步"，简单说就是一个任务分成两段，先执行第一段，然后转而执行其他任务，等做好了准备，再回过头执行第二段。比如，有一个任务是读取文件进行处理，下面小编来和大家一起学习一下
    2019-05-05
  • script标签的 charset 属性使用说明

    script标签的 charset 属性使用说明

    如果外部文件中的字符编码与主文件中的编码方式不同，就要用到 charset 属性。
    2010-12-12
  • 详解JavaScript中this关键字的用法

    详解JavaScript中this关键字的用法

    this是函数内部的对象并且被用于调用该函数,this在全局中的使用非常之灵活,下面就带大家来详解JavaScript中this关键字的用法
    2016-05-05
  • JavaScript offsetParent案例详解

    JavaScript offsetParent案例详解

    这篇文章主要介绍了JavaScript offsetParent案例详解,本篇文章通过简要的案例,讲解了该项技术的了解与使用,以下就是详细内容,需要的朋友可以参考下
    2021-08-08
  • JS暴虐查找法

    JS暴虐查找法

    JS暴虐查找法...
    2006-12-12

最新评论