静态页分页功能js代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-Type" content="text/html;charset=gb2312">
<meta name="keywords" content="站长,网页特效,js特效,js脚本,脚本,广告代码,zzjs,zzjs.net,sky,www.zzjs.net,站长特效 网" />
<meta name="description" content="www.zzjs.net,站长特效网,站长必备js特效及广告代码。大量高质量js特效,提供高质量广告代码下载,尽在站长特效网" />
<title>网页特效 静态代码的分页效果 站长特效网欢迎您。</title>
<style type="text/css">
tr{display:none}
</style>
</head>
<body>
<a href="http://www.zzjs.net/">站长特效网</a>,站长必备的高质量网页特效和广告代码。zzjs.net,站长js特效。<hr>
<!--欢迎来到站长特效网,我们网站收集大量高质量js特效,提供许多广告代码下载,网址:www.zzjs.net,[email protected],用.net打造靓站-->
<table id="www_zzjs_net">
<tr><td>站长特效01页,打造国内最帅的网页特效站!</td></tr>
<tr><td>站长特效02页,打造国内最帅的网页特效站!</td></tr>
<tr><td>站长特效03页,打造国内最帅的网页特效站!</td></tr>
<tr><td>站长特效04页,打造国内最帅的网页特效站!</td></tr>
<tr><td>站长特效05页,打造国内最帅的网页特效站!</td></tr>
<tr><td>站长特效06页,打造国内最帅的网页特效站!</td></tr>
<tr><td>站长特效07页,打造国内最帅的网页特效站!</td></tr>
<tr><td>站长特效08页,打造国内最帅的网页特效站!</td></tr>
<tr><td>站长特效09页,打造国内最帅的网页特效站!</td></tr>
<tr><td>站长特效10页,打造国内最帅的网页特效站!</td></tr>
<tr><td>站长特效11页,打造国内最帅的网页特效站!</td></tr>
<tr><td>站长特效12页,打造国内最帅的网页特效站!</td></tr>
<tr><td>站长特效13页,打造国内最帅的网页特效站!</td></tr>
<tr><td>站长特效14页,打造国内最帅的网页特效站!</td></tr>
<tr><td>站长特效15页,打造国内最帅的网页特效站!</td></tr>
<tr><td>站长特效16页,打造国内最帅的网页特效站!</td></tr>
<tr><td>站长特效17页,打造国内最帅的网页特效站!</td></tr>
<tr><td>站长特效18页,打造国内最帅的网页特效站!</td></tr>
<tr><td>站长特效19页,打造国内最帅的网页特效站!</td></tr>
<tr><td>站长特效20页,打造国内最帅的网页特效站!</td></tr>
</table>
<div id="changpage"></div>
<script language="javascript">
var obj,j;
var page=0;
var nowPage=0;//当前页
var listNum=3;//每页显示<ul>数
var PagesLen;//总页数
var PageNum=4;//分页链接接数(5个)
onload=function(){
obj=document.getElementById("www_zzjs_net").getElementsByTagName("tr");
j=obj.length
PagesLen=Math.ceil(j/listNum);
upPage(0)
}
function upPage(p){
nowPage=p
//内容变换
for (var i=0;i<j;i++){
obj[i].style.display="none"
}
for (var i=p*listNum;i<(p+1)*listNum;i++){
if(obj[i])obj[i].style.display="block"
}//欢迎来到站长特效网,我们的网址是www.zzjs.net,很好记,zz站长,js就是js特效,本站收集大量高质量js代码,还有许多广告代码下载。
//分页链接变换
strS=‘<a href="###" onclick="upPage(0)">首页</a> ‘
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 (nowPage<PageNum_2){startPage=0;endPage=PagesLen-1>PageNum?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<=endPage;i++){
if (i==nowPage)strC+=‘<a href="###" style="color:red;font-weight:700;" onclick="upPage(‘+i+‘)">‘+(i+1)+‘</a> ‘
else strC+=‘<a href="###" onclick="upPage(‘+i+‘)">‘+(i+1)+‘</a> ‘
}//欢迎来到站长特效网,我们的网址是www.zzjs.net,很好记,zz站长,js就是js特效,本站收集大量高质量js代码,还有许多广告代码下载。
strE=‘ <a href="###" onclick="upPage(‘+(PagesLen-1)+‘)">尾页</a> ‘
strE2=nowPage+1+"/"+PagesLen+"页"+" 共"+j+"条"
document.getElementById("changpage").innerHTML=strS+strC+strE+strE2
}
</script>
</body>
</html>

时间: 2024-10-23 22:43:48

静态页分页功能js代码的相关文章

WPF DataGrid分页功能实现代码 修改原作者不能实现的部分

这两天需要给Datagrid加个分页,查找了一些相关的文章,发现有一个写了一个控件比较好,地址是 http://blog.csdn.net/zdw_wym/article/details/8221894 感谢这位大神12年的帖子,但是照着做了以后,发现除了点击数字和GO按钮好使意外,神马“首页.上一页.下一页.末页”都不好使. 继续找寻相关的资料和查看大神的源码,发现有的地方写的不对,因为textblock没有click事件,而大神写了click事件,所以没有得到触发,介于这个问题,我稍作了修改

静态页分页效果

//分页 (function(){ var cur=1; $(".newslist li").hide(); var size = $(".newslist li").length; var page = Math.floor($(".newslist li").length/20)+1; for(var i=1; i<=page; i++){ $(".page").append('<a href="ja

静态页面表单中js验证

笔记: 1. onblur事件:onblur 事件会在对象失去焦点时发生.http://www.w3school.com.cn/jsref/event_onblur.asp onkeyup事件:onkeyup 事件会在键盘按键被松开时发生.http://www.w3school.com.cn/jsref/event_onkeyup.asp 这两者事件的发生机制截然不同,在用js对表单进行验证的时候,建议大家,尽量用onkeyup,因为交互性好,能够实时反馈用户输入的有效性: 2. js中空字符串

jQuery静态分页功能

分页功能在做项目的过程中是常常用到的,下面是我常用的一款分页效果: 1.分页的CSS样式(page.css) 1 #setpage { 2 margin: 15px auto; 3 text-align: center; 4 } 5 #setpage a:link,#setpage a:visited,#setpage a:hover,#setpage .current,#setpage #info{ 6 border:1px solid #DDD; 7 background:#0d6cbf;

生成静态页技术

概要: 1.什么是生成静态页技术? 答:互联网上流行的做法是将数据源代码写入数据库再从数据库读取生成静态面,这样无形间就加大了数据库.将现有的ASP页直接生成静态页,将会节省很多. 2.为什么要生成静态页以及好处? 答:一.加快页面打开浏览速度,静态页面无需连接数据库打开速度较动态页面有明 显提高: 二.有利于搜索引擎优化SEO,Baidu.Google都会优先收录静态页面,不仅被收录的快还收录的全: 三.减轻服务器负担,浏览网页无需调用系统数据库: 四.网站更安全,HTML页面不会受Asp相关

jQuery插件 dataTable Ajax分页功能实现

jQuery 的插件 dataTables 是一个优秀的表格插件,提供了针对表格的排序.浏览器分页.服务器分页.筛选.格式化等功能.需要可以到 dataTables 的网站 http://www.datatables.net/ 下载这个脚本库. 在网页开发过程中,我们可能会从后台读入数据建表.当数据过大时,可能导致建表时间过长,于是就需要实现Ajax分页功能,代码如下: HTML: <table id="example" class="display" wid

网页分页功能的实现

最近在学习JavaWeb的时候,用到了分页功能,现在进行一个记录,以备不时之需 第一步:先完成分页Bean的编写. 就是对当前页数,每页显示的记录数,总记录数,总页数,分页显示的信息进行封装.作为通用的分页功能的实现,这里用到了泛型 import java.util.List; /** * 分页封装 * */ public class PageBean<T> { private int currPage;//当前页数 private int pageSize;//每页显示记录数 private

最好用的兼容多种数据库通用高效的大数据分页功能

通用权限管理系统底层有一个通用分页查询功能,该功能可实现多种数据库的查询,支持多表关联分页查询,目前是最完善的分页功能实现. 下面代码是使用的方法截图: /////////////////////////////// 后台代码截图1 /////////////////////////////// 后台代码截图2 /////////////////////////////// 后台代码截图3 /////////////////////////////// 后台代码截图4 /////////////

jsp、js分页功能的简单总结

一.概述 首先,我们要明确为何需要分页技术,主要原因有以下: 1.分页可以提高客户体验度,适当地选择合适的数据条数,让页面显得更有条理,使得用户体验感良好,避免过多数据的冗余. 2.提高性能的需要.分页技术,有选择的加载某部分数据,在数据量较大的时候,分部分加载数据.显示数据,可以有效提高程序的性能,当然,单纯的js的分页技术并没有这种效果. 所以,分页技术是web技术中比较常用的技术,而下面讨论的主要是两种分页技术:一种是jsp的分页技术,其读取数据分批次读取,操作页数跳转的时候才加载相应页面