📄 小鹤与独角兽 - js分页代码,适合静态页分页.htm

📁 自己做项目时做的一个javascript的分页例子
💻 HTM
📖 第 1 页 / 共 2 页
字号:
12 下一页
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<!-- saved from url=(0053)http://www.ynutx.net/raindesign/blog/archive/174.html -->
<HTML lang=gb2312 xmlns="http://www.w3.org/1999/xhtml"><HEAD><TITLE>小鹤与独角兽 - JS分页代码,适合静态页分页</TITLE>
<META http-equiv=Content-Type content="text/html; charset=gb2312">
<META http-equiv=Content-Language content=gb2312>
<META content=all name=robots>
<META content=RainoXu name=author>
<META content=http://raino.ynutx.net版权所有 name=Copyright>
<META content="" name=description>
<META content=Xhtml+CSS,ASP,网页设计 name=keywords><!-- 调用样式表 --><LINK media=all 
href="小鹤与独角兽 - JS分页代码,适合静态页分页.files/style.css" type=text/css rel=stylesheet><!-- 打印时候使用的样式表 --><LINK media=print href="" type=text/css 
rel=stylesheet>
<SCRIPT src="小鹤与独角兽 - JS分页代码,适合静态页分页.files/mywords.js" 
type=text/javascript></SCRIPT>

<SCRIPT src="小鹤与独角兽 - JS分页代码,适合静态页分页.files/link.js" 
type=text/javascript></SCRIPT>

<SCRIPT src="小鹤与独角兽 - JS分页代码,适合静态页分页.files/runcode.js" 
type=text/javascript></SCRIPT>

<SCRIPT src="小鹤与独角兽 - JS分页代码,适合静态页分页.files/ad.js" type=text/javascript></SCRIPT>

<META content="MSHTML 6.00.2900.3314" name=GENERATOR></HEAD>
<BODY>
<DIV id=head></DIV><!-- 页面顶部 -->
<DIV id=mainbody><!-- 主框架 -->
<DIV id=middle><!-- 页面中部 -->
<DIV id=left>
<DIV class=list>
<DIV class=left_title>日历</DIV><!-- 列表标题栏 -->
<SCRIPT src="小鹤与独角兽 - JS分页代码,适合静态页分页.files/logcalender.js" 
type=text/javascript></SCRIPT>

<SCRIPT src="小鹤与独角兽 - JS分页代码,适合静态页分页.files/calender.js" 
type=text/javascript></SCRIPT>
</DIV>
<DIV class=list>
<DIV class=left_title>日志分类</DIV><!-- 列表标题栏 -->
<UL>
  <SCRIPT src="小鹤与独角兽 - JS分页代码,适合静态页分页.files/js.htm" 
  type=text/javascript></SCRIPT>
<!-- 日志分类，以<li>格式输出 --></UL></DIV>
<DIV class=list>
<DIV class=left_title>最新发表</DIV><!-- 列表标题栏 -->
<UL>
  <SCRIPT 
  src="C:\Documents and Settings\teamax.WWW404\桌面\fenye\小鹤与独角兽 - JS分页代码,适合静态页分页.files\js(1).htm" 
  type=text/javascript></SCRIPT>
<!-- 新发表的日志，以<li>格式输出 --></UL></DIV>
<DIV class=list>
<DIV class=left_title>最新评论</DIV><!-- 列表标题栏 -->
<UL>
  <SCRIPT 
  src="C:\Documents and Settings\teamax.WWW404\桌面\fenye\小鹤与独角兽 - JS分页代码,适合静态页分页.files\js(2).htm" 
  type=text/javascript></SCRIPT>
<!-- 新发表的评论，以<li>格式输出 --></UL></DIV>
<DIV class=list>
<DIV class=left_title>站内搜索</DIV><!-- 列表标题栏 -->
<FORM id=search name=form_search action=search.asp method=post><INPUT 
value=在此输入搜索内容 name=search> <INPUT class=button type=submit value=搜搜 name=Submit> </FORM></DIV>
<DIV class=list>
<DIV class=left_title>站内统计</DIV><!-- 列表标题栏 -->
<UL>
  <SCRIPT 
  src="C:\Documents and Settings\teamax.WWW404\桌面\fenye\小鹤与独角兽 - JS分页代码,适合静态页分页.files\js(3).htm" 
  type=text/javascript></SCRIPT>
<!--站点统计，[ 日志：00、评论：00、引用：00、访问：000 ]，将以<li>格式输出 --></UL></DIV>
<DIV class=list>
<DIV class=left_title>链接</DIV><!-- 列表标题栏 -->
<SCRIPT type=text/javascript>
				<!--
				document.write(str)
				//-->
				</SCRIPT>
<!-- <li>的形式输出 --></DIV></DIV>
<DIV id=right>
<DIV class=msgbox>
<SCRIPT type=text/javascript>
				<!--
				document.write("<div id=\"mywords\" style=\"text-align:left;border:1px dashed #E9E9E9;padding:3px 5px;background:#FCFCFC;margin-bottom:12px;\">主人寄语:")
				document.write(mywords[arr_num])
				document.write("</div>")
				//-->
				</SCRIPT>

<DIV class=article_topic>JS分页代码,适合静态页分页</DIV><!-- 文章标题 -->
<DIV class=article_date>[2007-6-25 17:50:52 by rainoxu] | 分类：<A 
href="http://www.ynutx.net/raindesign/blog/list.asp?cid=2">JavaScript专栏</A></DIV><!-- 输出的格式：[ 2007-2-14 by 珍宝猪 | 分类：生活感情 ]  -->
<DIV id=article>
<P>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
最近在练ajax,所以内容一多,自然需要分页,如果还要用动态分页,那个...ajax的优势就荡然无存了,无奈,自己写一个JS分页吧,这样就能结合ajax来实现免刷新翻页了.</P>
<P>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
原理很简单,用cpage来记录当前页,每次翻页后,把这个值改变成翻页后的就OK了,totalpage是总页数,这个一般可以通过ajax的xmlhttp.responseText方法来获得,这样,我们需要的实现翻页功能的两个参数都有了,不过这里为了方便,我就直接给它们设定初始值了,不再去用ajax了,毕竟这里是讲分页, 
不是讲ajax.等过几天再把它封装一下,成为一个整的函数使用起来更方便一些,呵呵!</P>
<P>
<DIV class=code>
<DIV class=codetitle>源代码</DIV>
<DIV class=code_content id=code0>
<P></P><FONT face=Arial><FONT face=Arial>
<P><FONT face=Arial>&lt;!doctype html public "-//W3C//DTD XHTML 1.0 
Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;<BR>&lt;html 
xmlns="http://www.w3.org/1999/xhtml" 
lang="gb2312"&gt;<BR>&lt;head&gt;<BR>&lt;title&gt;JS静态分页程序&lt;/title&gt;<BR>&lt;/head&gt;<BR>&lt;style 
type="text/css"&gt;<BR>a:link,a:visited,a:hover,.current,#info{<BR>&nbsp;&nbsp;&nbsp; 
border:1px solid #DDD;<BR>&nbsp;&nbsp;&nbsp; 
background:#F2F2F2;<BR>&nbsp;&nbsp;&nbsp; 
display:inline-block;<BR>&nbsp;&nbsp;&nbsp; margin:1px;<BR>&nbsp;&nbsp;&nbsp; 
text-decoration:none;<BR>&nbsp;&nbsp;&nbsp; 
font-size:12px;<BR>&nbsp;&nbsp;&nbsp; width:15px;<BR>&nbsp;&nbsp;&nbsp; 
height:15px;<BR>&nbsp;&nbsp;&nbsp; text-align:center;<BR>&nbsp;&nbsp;&nbsp; 
line-height:15px;<BR>&nbsp;&nbsp;&nbsp; color:#AAA;<BR>&nbsp;&nbsp;&nbsp; 
padding:1px 2px;<BR>}<BR>a:hover{<BR>&nbsp;&nbsp;&nbsp; border:1px solid 
#E5E5E5;<BR>&nbsp;&nbsp;&nbsp; 
background:#F9F9F9;<BR>}<BR>.current{<BR>&nbsp;&nbsp;&nbsp; border:1px solid 
#83E7E4;<BR>&nbsp;&nbsp;&nbsp; background:#DFF9F8;<BR>&nbsp;&nbsp;&nbsp; 
margin:1px;<BR>&nbsp;&nbsp;&nbsp; 
color:#27CBC7;<BR>}<BR>#info{<BR>&nbsp;&nbsp;&nbsp; 
width:auto;<BR>}<BR>&lt;/style&gt;<BR>&lt;body&gt;<BR>&lt;div 
id="setpage"&gt;&lt;/div&gt;<BR>&lt;script 
type="text/javascript"&gt;<BR>&lt;!--<BR>var 
totalpage,pagesize,cpage,count,curcount,outstr;<BR>//初始化<BR>cpage = 
1;<BR>totalpage = 56;<BR>pagesize = 10;<BR>outstr = "";<BR>function 
gotopage(target)<BR>{&nbsp;&nbsp;&nbsp; <BR>&nbsp;&nbsp;&nbsp; cpage = 
target;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
//把页面计数定位到第几页<BR>&nbsp;&nbsp;&nbsp; setpage();<BR>&nbsp;&nbsp;&nbsp; 
//reloadpage(target);&nbsp;&nbsp;&nbsp; 
//调用显示页面函数显示第几页,这个功能是用在页面内容用ajax载入的情况<BR>}<BR>function
12 下一页
⌨️ 快捷键说明

复制代码 Ctrl + C
搜索代码 Ctrl + F
全屏模式 F11
切换主题 Ctrl + Shift + D
显示快捷键 ?
增大字号 Ctrl + =
减小字号 Ctrl + -