Javascript静态分页(多个资料，静态自动分页)

静态分页(首尾页)www.jb51.net

ul {display:none}

  • 01
  • 02
  • 03
  • 04
  • 05
  • 06
  • 07
  • 08
  • 09
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20

var obj,j;
var page=0;
var nowPage=0;//当前页
var listNum=3;//每页显示

    数
    var PagesLen;//总页数
    var PageNum=4;//分页链接接数(5个)
    onload=function(){
    obj=document.getElementById("mydiv").getElementsByTagName("ul");
    j=obj.length
    PagesLen=Math.ceil(j/listNum);
    upPage(0)
    }
    function upPage(p){
    nowPage=p
    //内容变换
    for (var i=0;i首页  '
    var PageNum_2=PageNum%2==0?Math.ceil(PageNum/2)+1:Math.ceil(PageNum/2)
    var PageNum_3=PageNum%2==0?Math.ceil(PageNum/2):Math.ceil(PageNum/2)+1
    var strC="",startPage,endPage;
    if (PageNum>=PagesLen) {startPage=0;endPage=PagesLen-1}
    else if (nowPagePageNum?PageNum:PagesLen-1}//首页
    else {startPage=nowPage+PageNum_3>=PagesLen?PagesLen-PageNum-1: nowPage-PageNum_2+1;var t=startPage+PageNum;endPage=t>PagesLen?PagesLen-1:t}
    for (var i=startPage;i'+(i+1)+' '
    else strC+=''+(i+1)+' '
    }
    strE=' 尾页  '
    strE2=nowPage+1+"/"+PagesLen+"页"+"  共"+j+"条"
    document.getElementById("changpage").innerHTML=strS+strC+strE+strE2
    }

    [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

赞 (0)

相关推荐

  • javascript分页代码(当前页码居中)

    复制代码 代码如下: function setPage(opt){ if(!opt.pageDivId || opt.allPageNum < opt.curpageNum || opt.allPageNum < opt.showPageNum){return false}; var allPageNum = opt.allPageNum; //总的页数 var showPageNum = opt.showPageNum; //显示的页数 var curpageNum = opt.curpag

  • javascript实现简单的分页特效

    下面是一段javascript实现的分页代码,当然必须要结合后台代码实现.大家可以自行分析一下代码,希望能够给大家带来一定的帮助,代码如下: <script type="text/javascript"> function setPage(opt) { if(!opt.pageDivId || opt.allPageNum < opt.curpageNum || opt.allPageNum < opt.showPageNum) { return false }

  • 超酷的鼠标拖拽翻页(分页)效果实现javascript代码

    拖动分页 body{ border:0px; margin:0px; overflow:hidden; background-color:transparent; font-family:宋体; } .page{ position:absolute; width:700px; border:1px solid #999; background-color:#000; left:425px; margin-left:-350px; cursor:default; z-index:0; } ul{

  • javascript 新闻标题静态分页代码 (无刷新)

    javascript 新闻标题静态分页代码 (无刷新)

       一个模板,从数据库取n条记录,生成静态. 做单页面的静态化,索引页面是用JS对数组进行组合的. 因为记录只是一个标题,一个链接,字节数不会太大, 那么用js去用这个大数组进行分页,貌似不错,很节约带宽! 还是很棒的,简单,实用,值得推荐! JS代码: 复制代码 代码如下: function title_array(title, link_add, store_time) { this.title = title; this.link_add = link_add; this.store_t

  • Javascript静态分页(多个资料，静态自动分页)

    静态分页(首尾页)www.jb51.net ul {display:none} 01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 var obj,j; var page=0; var nowPage=0;//当前页 var listNum=3;//每页显示 数 var PagesLen;//总页数 var PageNum=4;//分页链接接数(5个) onload=function(){ obj=document.getEle

  • JavaScript仿静态分页实现方法

    JavaScript仿静态分页实现方法

    本文实例讲述了JavaScript仿静态分页实现方法.分享给大家供大家参考.具体如下: 这里基于JavaScript模仿网页不刷新静态分页的功能,实际用的时候估计要做些改动,因为目前需要分页的内容是作为一个字符串变量存在JS里,使用时这里的数据要变为数据库中读取的数据,不知道它的实用性有多高,需要的朋友慢慢调整一下. 运行效果如下图所示: 具体代码如下: <HTML> <HEAD> <TITLE> 静态分页</TITLE> <style> * {

  • ASP AJAX 静态分页第1/2页

    <html> <head> <title>AJAX静态分页演示:http://www.jb51.net</title> <meta http-equiv="content-type" content="text/html;charset=gb2312"> <style type="text/css"> <!-- body                { text-al

  • JavaScript事件概念详解(区分静态注册和动态注册)

    js中的事件 什么是事件?事件是电脑输入设备与页面进行交互的响应,我们称之为事件 事件类型 鼠标单击:例如单击button.选中checkbox和radio等元素:鼠标进入.悬浮或退出页面的某个热点:例如鼠标停在一个图片上方或者进入table的范围: 键盘按键:当按下按键或释放按键时: HTML事件:例如页面body被加载时:在表单中选取输入框或改变输入框中文本的内容:例如选中或修改了文本框中的内容: 突变事件:主要指文档底层元素发生改变时触发的事件,如DomSubtreeModified(DO

  • JavaScript前端分页实现示例

    JavaScript前端分页实现示例

    目录 初窥前端分页 前言 需求分析 实现目标: 解决思路: 开工,上代码: 转折: 初窥前端分页 前言 近日接到了一个关于前端分页的需求,某系统仓储模块的分页功能,由于以前分页都是后端处理的,第一次接到这种需求,借此记录一下. 需求分析 应用场景简述:在商品出库以及退回时,需要通过接口获取商品列表,前端通过table方式展示数据,用户多选数据提交后保存在上一级页面的table中. 用户选择数据: 存储用户选择的数据到上一页面 实现目标: 正常的用户翻页,用户已经添加的数据在翻页时进行操作(删除)

  • PHP静态延迟绑定和普通静态效率的对比

    PHP静态延迟绑定和普通静态效率的对比 只是一个简单的小实验,对比了下 延迟绑定 和 非延迟的效率 延迟绑定主要就是使用 static 关键字来替代原来的 self ,但功能非常强大了 实验代码: class A { protected static $cc1 = array('a1', 'b', 'c', 'd'); protected static $cc2 = array('a2', 'b', 'c', 'd'); protected static $cc3 = array('a3', '

  • springboot无法从静态上下文中引用非静态变量的解决方法

    静态方法可以不用创建对象就调用,非静态方法必须有了对象的实例才能调用. 因此想在静态方法中直接引用非静态方法是不可能的,因为不知道调用哪个对象的非静态方法,编译器不可能给出答案,因为没有对象. java就怕找不到对象. 解决办法: spring的set注入方法,通过非静态的setter方法注入静态变量,样例如下 @PropertySource(value = {"classpath:config/application.yml"},ignoreResourceNotFound = tr

  • 利用JavaScript实现仿QQ个人资料卡效果

    利用JavaScript实现仿QQ个人资料卡效果

    目录 前言 思路 实现代码 HTML CSS 背景音乐 JavaScript 最终效果 前言 最近在学习前端的知识,无意间发现QQ 那个个人资料卡还挺好看的,就想着自己能不能照着原版搞出一个高仿出来,话不多时直接开始先睡上一觉,找找灵感,睡醒来又饿了,出去吃个饭,回来天tm都黑了,哈哈哈哈,金今天又是摆烂的一天,啊啊啊,不行至少今天这篇博客得写个前言部分…于是乎我们来到第二天,开始干(要干啥来着,幸亏昨天还写了个标题,要不然都忘了——HTML+CSS+JS实现仿QQ个人资料卡) 不多逼逼直接上干

  • javascript动态分页的实现方法实例

    javascript动态分页的实现方法实例

    之前分页都是使用框架给出的分页类来实现分页,当然,体验可能不是那么好. 这次在写YII2.0框架的后台管理系统的小例子的时候,我这也尝试了一下前后分离,用ajax来实现分页跳转. 那么前端的页码绘制及跳页等其他的样式,都是由JavaScript根据后台返回的数据拼接而成.我的分页效果如下图所示: 大概就是上面的样子. Html代码如下:对照第一张图片 <ul> <li><span>1<span data-id="1"></span&

  • 前端静态资源福利：百度静态JS资源公共库（CDN）

    前端的很多静态资源,比如JS,CSS怎么办呢?这时,我们需要一个公共且高速的静态资源托管平台. 这里就推荐百度静态资源公共库,百度静态资源公共库是稳定,快速,全面,开源的国内CDN加速服务.遍布全国各地100+个CDN节点提供加速服务.让开源库享受与百度首页静态资源同等待遇. 如果你在使用jQuery.Bootstrap.backbone.dojo.zepto等各种流行库,一定不要错过百度静态资源公共库. accounting.js http://apps.bdimg.com/libs/acco

随机推荐