用javascript做js页码,该如何解决
日期：2014-05-16 浏览次数：20425 次
用javascript做js页码
静态页面，原来只有几页，就直接在html里输入1 2 3 4 5…页码，并链上超链接。后来用了一个js，
document.write("<a href='index.html'>1</a> | <a href="shooting02.html">2</a> | <a href="shooting03.html">3</a> | <a href="shooting04.html">4</a> | <a href="shooting05.html">5</a>");
因为页面数固定，所以没有出现问题。
现在想增加一些内容，页面数也就会没有确定数地增加，呈下面这种情况：
前一页 1 2 3 4 5 6 7 8 … 后一页
如果仍采用在html里输入页码，那工作量会很大，每增加一个页面，都需把前面的页面修改一次再上传。如果用原来的js，对于“前一页”“后一页”无法解决。
因此，想请高手帮忙做一个js页码，这个js最好有动态网页中的页码功效，比如：
1、点击任意页码，页面自动跳到相应的html页；
2、点击任意页码后，“前一页”“后一页”对应的页码数也相应的变更；
3、点击进入当前页后，当前页没有超链接；
4、一次显示8个页码，点到后面的数字，显示数字会相应调整。（如果麻烦，一次全部显示也行。）
请高手帮忙写一个。
谢谢了！
------解决方案--------------------
静态页面，原来只有几页，就直接在html里输入1 2 3 4 5…页码，并链上超链接。后来用了一个js，
document.write("<a href='index.html'>1</a> | <a href="shooting02.html">2</a> | <a href="shooting03.html">3</a> | <a href="shooting04.html">4</a> | <a href="shooting05.html">5</a>");
因为页面数固定，所以没有出现问题。
现在想增加一些内容，页面数也就会没有确定数地增加，呈下面这种情况：
前一页 1 2 3 4 5 6 7 8 … 后一页
如果仍采用在html里输入页码，那工作量会很大，每增加一个页面，都需把前面的页面修改一次再上传。如果用原来的js，对于“前一页”“后一页”无法解决。
因此，想请高手帮忙做一个js页码，这个js最好有动态网页中的页码功效，比如：
1、点击任意页码，页面自动跳到相应的html页；
2、点击任意页码后，“前一页”“后一页”对应的页码数也相应的变更；
3、点击进入当前页后，当前页没有超链接；
4、一次显示8个页码，点到后面的数字，显示数字会相应调整。（如果麻烦，一次全部显示也行。）
请高手帮忙写一个。
谢谢了！
------解决方案--------------------
- HTML code
<html>
<head>
<title></title>
</head>
<style type="text/css">
a:link,a:visited,a:hover,.current,#info{
border:1px solid #DDD;
background:#F2F2F2;
display:inline-block;
margin:1px;
text-decoration:none;
font-size:12px;
height:15px;
text-align:center;
line-height:15px;
color:#AAA;
padding:1px 2px;
}
a:hover{
border:1px solid #E5E5E5;
background:#F9F9F9;
}
.current{
border:1px solid #83E7E4;
background:#DFF9F8;
margin:1px;
color:#27CBC7;
}
#info{
width:auto;
}
</style>
<body>
这是第1页
<div id="setpage"></div>
<script type="text/javascript">
<!--
var totalpage,pagesize,cpage,count,curcount,outstr;
var prefixion,suffixation;
//初始化
cpage = Page(); //初始页
totalpage = 29; //总页数,你这个如何确定？？
pagesize = 8;
prefixion="shooting"; //文件名前缀
suffixation=".htm"; //文件名后缀
outstr = "";
function Page(){
//取得当前页面
var page,$p;
$p=location.href;
$p=$p.substr($p.lastIndexOf("/")+1,$p.length-$p.lastIndexOf("/"));
page=parseInt($p.replace(/\D/g,''))==0?1:parseInt($p.replace(/\D/g,''));
return page;
}
document.title="第"+Page()+"页";
function gotopage(target)
{
cpage = target; //把页面计数定位到第几页
location.href=prefixion+target+suffixation;
}
function setpage()
{
if(totalpage<=pagesize){ //总页数小于pagesize 页
for (count=1;count<=totalpage;count++)
{ if(count!=cpage)
{
outstr = outstr + "<a href='javascript:gotopage("+count+");'>"+count+"</a>";
}else{
outstr = outstr + "<span class='current' >"+count+"</span>";
}
}
}
if(totalpage>pagesize){ //总页数大于pagesize 页
if(parseInt((cpage-1)/pagesize) == 0)
{
for (count=1;count<=pagesize;count++)
{ if(count!=cpage)
{
outstr = outstr + "<a href='javascript:gotopage("+count+");'>"+count+"</a>";
}else{
outstr = outstr + "<span class='current'>"+count+"</span>";
}
}
outstr = outstr + "<a href='javascript:gotopage("+count+");'> 后"+pagesize+"页 </a>";
}
else if(parseInt((cpage-1)/pagesize) == parseInt(totalpage/pagesize))
{
outstr = outstr + "<a href='javascript:gotopage("+(parseInt((cpage-1)/pagesize)*pagesize)+")'>前"+pagesize+"页</a>";
for (count=parseInt(totalpage/pagesize)*pagesize+1;count<=totalpage;count++)
{ if(count!=cpage)
{
outstr
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
