首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > JavaScript >

用javascript做js页码,该如何解决

2012-02-12 
用javascript做js页码静态页面,原来只有几页,就直接在html里输入1 2 3 4 5…页码,并链上超链接。后来用了一

用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 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 = outstr + "<a href='javascript:gotopage("+count+");'>"+count+"</a>";                 }else{                     outstr = outstr + "<span class='current'>"+count+"</span>";                 }             }         }         else         {                 outstr = outstr + "<a href='javascript:gotopage("+(parseInt((cpage-1)/pagesize)*pagesize)+")'> 前"+pagesize+"页 </a>";             for (count=parseInt((cpage-1)/pagesize)*pagesize+1;count<=parseInt((cpage-1)/pagesize)*pagesize+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>";         }     }         document.getElementById("setpage").innerHTML = "<div id='setpage'><span id='info'>共"+totalpage+"页|第"+cpage+"页<\/span>" + outstr + "<\/div>";     outstr = "";}setpage();     //调用分页//--></script></body></html> 

热点排行