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需刷新才能执行]
相关推荐
-
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分页代码(当前页码居中)
复制代码 代码如下: 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代码
拖动分页 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实现的分页代码,当然必须要结合后台代码实现.大家可以自行分析一下代码,希望能够给大家带来一定的帮助,代码如下: <script type="text/javascript"> function setPage(opt) { if(!opt.pageDivId || opt.allPageNum < opt.curpageNum || opt.allPageNum < opt.showPageNum) { return false }
-
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模仿网页不刷新静态分页的功能,实际用的时候估计要做些改动,因为目前需要分页的内容是作为一个字符串变量存在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前端分页实现示例
目录 初窥前端分页 前言 需求分析 实现目标: 解决思路: 开工,上代码: 转折: 初窥前端分页 前言 近日接到了一个关于前端分页的需求,某系统仓储模块的分页功能,由于以前分页都是后端处理的,第一次接到这种需求,借此记录一下. 需求分析 应用场景简述:在商品出库以及退回时,需要通过接口获取商品列表,前端通过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个人资料卡效果
目录 前言 思路 实现代码 HTML CSS 背景音乐 JavaScript 最终效果 前言 最近在学习前端的知识,无意间发现QQ 那个个人资料卡还挺好看的,就想着自己能不能照着原版搞出一个高仿出来,话不多时直接开始先睡上一觉,找找灵感,睡醒来又饿了,出去吃个饭,回来天tm都黑了,哈哈哈哈,金今天又是摆烂的一天,啊啊啊,不行至少今天这篇博客得写个前言部分…于是乎我们来到第二天,开始干(要干啥来着,幸亏昨天还写了个标题,要不然都忘了——HTML+CSS+JS实现仿QQ个人资料卡) 不多逼逼直接上干
-
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
随机推荐
- CSS3+JavaScript实现翻页幻灯片效果
- 解析SQL2005中如何使用CLR函数获取行号
- JS封装通过className获取元素的函数示例
- 正则表达式的使用 ASP
- iOS开发网络编程之断点续传
- Asp.net保持页面滚动条位置(页面提交后不变)
- Linux查找占用的端口,并杀死进程的方法
- 服务器安全设置小技巧
- 浅谈Linux中ldconfig和ldd的用法
- C#通过指针实现快速拷贝的方法
- 详解spring中使用Elasticsearch的代码实现
- js实现向右横向滑出的二级菜单效果
- 操作Oracle的php类
- 88H家园为您提供免费个人主页空间服务
- Python遍历numpy数组的实例
- 使用vue2.0创建的项目的步骤方法
- VMWare14.0.0的Ubuntu虚拟机中设置共享文件夹
- Maven多模块及version修改的实现方法
- Swift中初始化init的方法小结
- vue在自定义组件中使用v-model进行数据绑定的方法