求一分页代码,用在静态页面上. 二十几个静态页,想做出第一页,上一页,本页,下一页和最后一页的效果,用JS能实现吗,文件名,PAGE1.HTML,PAGE2.HTML......PAGE19.HTML 解决方案 » 免费领取超大流量手机卡,每月29元包185G流量+100分钟通话, 中国电信官方发货 方法1:AJAX 刷新。方法2:JS+CSS 控制层的显示,做伪效果。方法3:URL重定向。方法4:伪静态。不知道你想要的是哪种? <!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" lang="gb2312"> <head> <title>JS静态分页程序</title> </head> <style type="text/css"> a:link,a:visited{ border:1px solid #DDD; background:#F2F2F2; display:inline-block; margin:1px; text-decoration:none; font-size:12px; width:15px; height:15px; text-align:center; line-height:15px; color:#AAA; padding:1px 2px; } a:hover{ border:1px solid #E5E5E5; background:#F9F9F9; display:inline-block; margin:1px; text-decoration:none; font-size:12px; width:15px; height:15px; text-align:center; line-height:15px; color:#AAA; padding:1px 2px; } .current{ border:1px solid #83E7E4; background:#DFF9F8; display:inline-block; margin:1px; text-decoration:none; font-size:12px; width:15px; height:15px; text-align:center; line-height:15px; color:#27CBC7; padding:1px 2px; } #info{ display:inline-block; font-size:9pt; border:1px solid #DDD; background:#F2F2F2; margin:1px; height:15px; text-align:center; line-height:15px; color:#AAA; padding:1px 2px; } </style> <body> <div id="setpage"></div> <script type="text/javascript"> <!-- var totalpage,pagesize,cpage,count,curcount,outstr; cpage = 1; totalpage = 105; pagesize = 10; outstr = ""; function gotopage(target) { cpage = target; //把页面计数定位到第几页 setpage(); //reloadpage(target); //调用显示页面函数显示第几页,这个功能是用在页面内容用ajax载入的情况 } function setpage() { if(totalpage<=10){ //总页数小于十页 for (count=1;count<=totalpage;count++) { if(count!=cpage) { outstr = outstr + "<a href='javascript:javascript:void(0 target=_blank)' onclick='gotopage("+count+")'>"+count+"</a>"; }else{ outstr = outstr + "<span class='current' href='javascript:javascript:void(0)' onclick='gotopage("+count+")'>"+count+"</span>"; } } } if(totalpage>10){ //总页数大于十页 if(parseInt((cpage-1)/10) == 0) { for (count=1;count<=10;count++) { if(count!=cpage) { outstr = outstr + "<a href='javascript:gotopage("+count+" target=_blank)' onclick=''>"+count+"</a>"; }else{ outstr = outstr + "<span class='current' href='javascript:gotopage("+count+")' onclick=''>"+count+"</span>"; } } outstr = outstr + "<a href='javascript:gotopage("+count+" target=_blank)' onclick=''> next </a>"; } else if(parseInt((cpage-1)/10) == parseInt(totalpage/10)) { outstr = outstr + "<a href='javascript:gotopage("+(parseInt((cpage-1 target=_blank)/10)*10)+")' onclick=''>previous</a>"; for (count=parseInt(totalpage/10)*10+1;count<=totalpage;count++) { if(count!=cpage) { outstr = outstr + "<a href='javascript:gotopage("+count+" target=_blank)' onclick=''>"+count+"</a>"; }else{ outstr = outstr + "<span class='current' href='javascript:gotopage("+count+")' onclick=''>"+count+"</span>"; } } } else { outstr = outstr + "<a href='javascript:gotopage("+(parseInt((cpage-1 target=_blank)/10)*10)+")' onclick=''>previous</a>"; for (count=parseInt((cpage-1)/10)*10+1;count<=parseInt((cpage-1)/10)*10+10;count++) { if(count!=cpage) { outstr = outstr + "<a href='javascript:gotopage("+count+" target=_blank)' onclick=''>"+count+"</a>"; }else{ outstr = outstr + "<span class='current' href='javascript:gotopage("+count+")' onclick=''>"+count+"</span>"; } } outstr = outstr + "<a href='javascript:gotopage("+count+" target=_blank)' onclick=''> next </a>"; } } document.getElementById("setpage").innerHTML = "<div id='setpage'><span id='info'>共"+totalpage+"页|第"+cpage+"页<\/span>" + outstr + "<\/div>"; outstr = "" } setpage(); //--> </script> </body> </html> <html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312"><title>表格分页显示</title></head><body><div id="divTable"><table border="1" cellpadding="0" cellspacing="0" id="tab1"><tbody><tr><td width="73"> 序号</td><td width="223"> 标题</td><td width=80> 作者</td><td width=100> 发表时间</td></tr><tr height="20"><td width="73">00</td><td width="223" align="left"><a href="###">00</a></td><td width=80>00</td><td width=100>00</td></tr><tr height="20"><td width="73">11</td><td width="223" align="left"><a href="###">11</a></td><td width=80>11</td><td width=100>11</td></tr><tr height="20"><td width="73">22</td><td width="223" align="left"><a href="###">22</a></td><td width=80>22</td><td width=100>22</td></tr><tr height="20"><td width="73">33</td><td width="223" align="left"><a href="###">33</a></td><td width=80>33</td><td width=100>33</td></tr><tr height="20"><td width="73">44</td><td width="223" align="left"><a href="###">44</a></td><td width=80>44</td><td width=100>44</td></tr><tr height="20"><td width="73">55</td><td width="223" align="left"><a href="###">55</a></td><td width=80>55</td><td width=100>55</td></tr><tr height="20"><td width="73">66</td><td width="223" align="left"><a href="###">66</a></td><td width=80>66</td><td width=100>66</td></tr><tr height="20"><td width="73">77</td><td width="223" align="left"><a href="###">77</a></td><td width=80>77</td><td width=100>77</td></tr><tr height="20"><td width="73">88</td><td width="223" align="left"><a href="###">88</a></td><td width=80>88</td><td width=100>88</td></tr><tr height="20"><td width="73">99</td><td width="223" align="left"><a href="###">99</a></td><td width=80>99</td><td width=100>99</td></tr></table></div><br><input id="first" type=button value="第一页" onclick="firstOrLast(0)"><input id="back" type=button value="上一页" onclick="N(-1)"><input id="next" type=button value="下一页" onclick="N(1)"><input id="last" type=button value="最后一页" onclick="firstOrLast(1)"><script language="javascript"><!--var pageSize=4,currentPageNum=1,totlePageNumvar obj,totleRows,totleColsvar rowHeigth = 20;var obj=document.getElementById('tab1').rows;onload=function(){ totleRows=obj.length; totleCols=document.getElementById('tab1').rows(0).cells.length; totlePageNum=Math.ceil((totleRows-1)/pageSize) //如果某一页行数小于pageSize,则增加空行 if(totleRows==0 || (totleRows-1)%pageSize != 0){ var tempCols if(totleRows==0) tempCols = totleCols; else tempCols = pageSize-(totleRows-1)%pageSize; for(i=0;i<tempCols;i++){ var newBlankRow = document.getElementById('tab1').insertRow(); var point = newBlankRow.rowIndex; for (m=0; m < totleCols; m++) { obj[point].insertCell(); obj[point].cells(m).innerHTML = " "; } } totleRows = document.getElementById('tab1').rows.length; } N(0)}function resetStyle(){ for (var i=1;i<totleRows;i++)obj[i].style.display="none"}function N(k){ if (k>0 && currentPageNum>=totlePageNum ||k<0 && currentPageNum<=1)return; currentPageNum+=k; resetStyle(); toPage(currentPageNum); filter(currentPageNum);}function firstOrLast(flag){ if(flag==0) currentPageNum = 1; else if(flag==1) currentPageNum = totlePageNum; else return ; resetStyle(); toPage(currentPageNum); filter(currentPageNum);}function toPage(currentPageNum){ for (var i=(currentPageNum-1)*pageSize+1;i<=currentPageNum*pageSize;i++) obj[i].style.display="";}function filter(currentPageNum){ //如果是第一页,则“上一页”不可用 if(currentPageNum-1<1) { document.getElementById("back").disabled=true; document.getElementById("first").disabled=true; } else{ document.getElementById("back").disabled=false; document.getElementById("first").disabled=false; } //如果是最后一页,则"下一页"不可用 if(currentPageNum+1>totlePageNum ) { document.getElementById("next").disabled=true; document.getElementById("last").disabled=true; } else{ document.getElementById("next").disabled=false; document.getElementById("last").disabled=false; }}//--></script></body></html> URL重定向到下一HTML文件,比如,PAGE1.HTML点下一页跳入到PAGE2.HTML,楼上..? 导入此js即可<script>var url=location.href,start=1,end=19;//定义开始页和结尾页var currentPage=parseInt(/page(\d+)/i.exec(url)[1]);//获取当前页,注意如果你的名称不为page的,修改此正则if(currentPage<=start)document.write('<font color="#666666">首页 上一页</font>');else document.write('<a href="page'+start+'.html">首页</a> <a href="page'+(currentPage-1)+'.html">上一页</a>');document.write(' 当前页:'+currentPage+' ');if(currentPage>=end)document.write('<font color="#666666">下一页 尾页</font>');else document.write('<a href="page'+(currentPage+1)+'.html">下一页</a> <a href="page'+end+'.html">尾页</a>');</script> 如果所有的19页在/SOURIRE/TOI-ET-MOI/这个文件夹中是不是要改这几个地<script>var url=location.href,start=1,end=19;//定义开始页和结尾页var currentPage=parseInt(/page(\d+)/i.exec(url)[1]);//获取当前页,注意如果你的名称不为page的,修改此正则if(currentPage<=start)document.write('<font color="#666666">首页 上一页</font>');else document.write('<a href="/SOURIRE/TOI-ET-MOI/page'+start+'.html">首页</a> <a href="/SOURIRE/TOI-ET-MOI/page'+(currentPage-1)+'.html">上一页</a>');document.write(' 当前页:'+currentPage+' ');if(currentPage>=end)document.write('<font color="#666666">下一页 尾页</font>');else document.write('<a href="/SOURIRE/TOI-ET-MOI/page'+(currentPage+1)+'.html">下一页</a> <a href="/SOURIRE/TOI-ET-MOI/page'+end+'.html">尾页</a>');</script>这样改正确吗?? 不需要加的,SOURIRE/TOI-ET-MOI这样的路径浏览器会帮你加上的,除非你重写过url了 求教一个ExtJS问题 请教,asp如何取javascript里面的值 一个选元素的问题 求高手 网页表格编辑功能的实现 求代码,图片链接,MouseOut显示图片a,MouseOver显示图片b,MouseDown显示图片c 关于arcgis10.1中几何服务的问题 一个页面跳转到另一个页面的tab选项卡的指定页上 如何用 vml 画一个圆形 和 长方形和 文字的输出!!!!!!!! url 取值问题 打开页面特效功能 js 获取mediaplayer 下载百分比
方法2:JS+CSS 控制层的显示,做伪效果。
方法3:URL重定向。
方法4:伪静态。不知道你想要的是哪种?
<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>表格分页显示</title></head><body>
<div id="divTable">
<table border="1" cellpadding="0" cellspacing="0" id="tab1">
<tbody><tr>
<td width="73"> 序号</td>
<td width="223"> 标题</td>
<td width=80> 作者</td>
<td width=100> 发表时间</td></tr><tr height="20">
<td width="73">00</td>
<td width="223" align="left"><a href="###">00</a></td>
<td width=80>00</td>
<td width=100>00</td></tr><tr height="20">
<td width="73">11</td>
<td width="223" align="left"><a href="###">11</a></td>
<td width=80>11</td>
<td width=100>11</td></tr><tr height="20">
<td width="73">22</td>
<td width="223" align="left"><a href="###">22</a></td>
<td width=80>22</td>
<td width=100>22</td></tr><tr height="20">
<td width="73">33</td>
<td width="223" align="left"><a href="###">33</a></td>
<td width=80>33</td>
<td width=100>33</td></tr><tr height="20">
<td width="73">44</td>
<td width="223" align="left"><a href="###">44</a></td>
<td width=80>44</td>
<td width=100>44</td></tr><tr height="20">
<td width="73">55</td>
<td width="223" align="left"><a href="###">55</a></td>
<td width=80>55</td>
<td width=100>55</td></tr><tr height="20">
<td width="73">66</td>
<td width="223" align="left"><a href="###">66</a></td>
<td width=80>66</td>
<td width=100>66</td></tr><tr height="20">
<td width="73">77</td>
<td width="223" align="left"><a href="###">77</a></td>
<td width=80>77</td>
<td width=100>77</td></tr><tr height="20">
<td width="73">88</td>
<td width="223" align="left"><a href="###">88</a></td>
<td width=80>88</td>
<td width=100>88</td></tr><tr height="20">
<td width="73">99</td>
<td width="223" align="left"><a href="###">99</a></td>
<td width=80>99</td>
<td width=100>99</td></tr>
</table>
</div>
<br>
<input id="first" type=button value="第一页" onclick="firstOrLast(0)">
<input id="back" type=button value="上一页" onclick="N(-1)">
<input id="next" type=button value="下一页" onclick="N(1)">
<input id="last" type=button value="最后一页" onclick="firstOrLast(1)">
<script language="javascript">
<!--
var pageSize=4,currentPageNum=1,totlePageNum
var obj,totleRows,totleCols
var rowHeigth = 20;
var obj=document.getElementById('tab1').rows;
onload=function(){
totleRows=obj.length;
totleCols=document.getElementById('tab1').rows(0).cells.length;
totlePageNum=Math.ceil((totleRows-1)/pageSize)
//如果某一页行数小于pageSize,则增加空行
if(totleRows==0 || (totleRows-1)%pageSize != 0){
var tempCols
if(totleRows==0)
tempCols = totleCols;
else tempCols = pageSize-(totleRows-1)%pageSize;
for(i=0;i<tempCols;i++){
var newBlankRow = document.getElementById('tab1').insertRow();
var point = newBlankRow.rowIndex;
for (m=0; m < totleCols; m++) {
obj[point].insertCell();
obj[point].cells(m).innerHTML = " ";
}
}
totleRows = document.getElementById('tab1').rows.length;
} N(0)
}
function resetStyle(){
for (var i=1;i<totleRows;i++)obj[i].style.display="none"
}
function N(k){
if (k>0 && currentPageNum>=totlePageNum ||k<0 && currentPageNum<=1)return;
currentPageNum+=k;
resetStyle();
toPage(currentPageNum);
filter(currentPageNum);
}
function firstOrLast(flag){
if(flag==0)
currentPageNum = 1;
else if(flag==1)
currentPageNum = totlePageNum;
else
return ;
resetStyle();
toPage(currentPageNum);
filter(currentPageNum);}
function toPage(currentPageNum){
for (var i=(currentPageNum-1)*pageSize+1;i<=currentPageNum*pageSize;i++)
obj[i].style.display="";
}function filter(currentPageNum){
//如果是第一页,则“上一页”不可用
if(currentPageNum-1<1) {
document.getElementById("back").disabled=true;
document.getElementById("first").disabled=true;
}
else{
document.getElementById("back").disabled=false;
document.getElementById("first").disabled=false;
}
//如果是最后一页,则"下一页"不可用
if(currentPageNum+1>totlePageNum ) {
document.getElementById("next").disabled=true;
document.getElementById("last").disabled=true;
}
else{
document.getElementById("next").disabled=false;
document.getElementById("last").disabled=false;
}
}
//-->
</script></body></html>
var url=location.href,start=1,end=19;//定义开始页和结尾页
var currentPage=parseInt(/page(\d+)/i.exec(url)[1]);//获取当前页,注意如果你的名称不为page的,修改此正则
if(currentPage<=start)document.write('<font color="#666666">首页 上一页</font>');
else document.write('<a href="page'+start+'.html">首页</a> <a href="page'+(currentPage-1)+'.html">上一页</a>');
document.write(' 当前页:'+currentPage+' ');
if(currentPage>=end)document.write('<font color="#666666">下一页 尾页</font>');
else document.write('<a href="page'+(currentPage+1)+'.html">下一页</a> <a href="page'+end+'.html">尾页</a>');
</script>
<script>
var url=location.href,start=1,end=19;//定义开始页和结尾页
var currentPage=parseInt(/page(\d+)/i.exec(url)[1]);//获取当前页,注意如果你的名称不为page的,修改此正则
if(currentPage<=start)document.write('<font color="#666666">首页 上一页</font>');
else document.write('<a href="/SOURIRE/TOI-ET-MOI/page'+start+'.html">首页</a> <a href="/SOURIRE/TOI-ET-MOI/page'+(currentPage-1)+'.html">上一页</a>');
document.write(' 当前页:'+currentPage+' ');
if(currentPage>=end)document.write('<font color="#666666">下一页 尾页</font>');
else document.write('<a href="/SOURIRE/TOI-ET-MOI/page'+(currentPage+1)+'.html">下一页</a> <a href="/SOURIRE/TOI-ET-MOI/page'+end+'.html">尾页</a>');
</script>这样改正确吗??