用JS模拟本站PHP动态分页效果
作者：黑马
静态网页动态分页又一示例，其效果同本站的留言簿、栏目导航页等。以下是详细的JS代码：
<script language="javascript">
var total=3000; //总条目: 用时实时获取
var show=20; //每页显示条目数: 自定义
total%show==0?page=total/show:page=Math.ceil(total/show); //总页数
page%5==0?pgr_tt=page/5:pgr_tt=Math.ceil(page/5); //页组总数
//取得当前页序号 - idx
idx=window.location.search;
if(idx=="") idx="?0";
mylen=idx.length-1;
idx=idx.substr(1,mylen);
pgrp_id=Math.floor(idx/5); //页组所在序号
var title=new Array(); //测试用数组(赋值)
for(i=0;i<total;i++) {
k=i+1;
title[i]="条目" + k + "<br>";
}
function echostr(pg) { //函数: 打印各页内容
var mystr="";
for(i=0;i<show;i++) {
myidx=pg*show+i;
if(title[myidx]) mystr+=title[myidx];
}
document.write(mystr);
}
//显示相关资料 - 测试用
document.write('总条目: ' + total + '┊每页显示数: ' + show + '┊需要页数: ' + page + '┊当前页码序号(idx): ' + idx + '<br><br>');
echostr(idx); //显示页面内容
function pg_link(all,pgrid,pgrtt,id){ //函数: 打印页码链接
pre5=pgrid*5-1; //前五页
behind5=pgrid*5+5; //后五页
idx!=0 ? linkstr="<br><a title=' 最首页' href='jspage.htm?0'><<</a> " : linkstr="<br><< ";
pgrid!=0 ? linkstr+="<a title=' 前五页 ' href='jspage.htm?" + pre5 + "'><</a> ": linkstr+="< ";
for(i=pgrid*5;i<pgrid*5+5;i++) {
j=i+1;
i!=idx ? linkstr+="<a title=' 第" + j + "页 ' href='jspage.htm?" + i + "'>" + j + "</a> " : linkstr+=j + " ";
}
pgrid!=pgrtt-1 ? linkstr+="<a title=' 后五页 ' href='jspage.htm?" + behind5 + "'>></a> " : linkstr+="> ";
idx!=all-1 ? linkstr+="<a title=' 最尾页 ' href='jspage.htm?" + (all-1) + "'>>></a>" : linkstr+=">>";
document.write(linkstr + " [共 " + all + "页]<br><br>");
}
pg_link(page,pgrp_id,pgr_tt,idx); //显示页码链接
</script>
脚本演示 >> jspg.htm
【 文章来源 本站原创[2008.3.9] 转载请注明出处与作者等信息 】
网 |
更新日期：2008年03月13日 