【原】HTML + XML + JAVASCIPT 实现翻页，跳页功能 ——一个小小英语学习小手册【有注释，有源码】
这个我就不多描述什么了，看标题就知道了。
先看效果图：
这个我就不多描述什么了，看标题就知道了。
先看效果图：
现在再来看代码:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>English Sentences</title>
</head>
<body topmargin="0" leftmargin="0">
<style>
<!
--定义样式-- > .table3d
{
baobao: expression(table3d(this));
}
.td3d
{
baobao: expression(td3d(this));
}
</style>
<script language="javascript">
var pagenum=2; //每页显示几条信息
var page=0 ;
var contpage ;
var BodyText="";
var xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
var mode="NO";
var toolBar;
xmlDoc.async="false"
xmlDoc.load("English.xml")
header="<table border='0px' width ='100% ' class=table3d><tr><td class=td3d><font color=#FFFFFF>English files</font></td></tr><tr><td><hr color=#285577 size=1></td></tr>";
//检索的记录数
maxNum = xmlDoc.getElementsByTagName(mode).length
//每条记录的列数
column=xmlDoc.getElementsByTagName(mode).item(0).childNodes
//每条记录的列数
colNum=column.length
//页数
pagesNumber=Math.ceil(maxNum/pagenum)-1;
pagesNumber2=Math.ceil(maxNum/pagenum);
//上一个页面
function UpPage(page)
{
thePage="<<";
if(page+1>1) thePage="<A HREF='#' onclick='Javascript:return UpPageGo()'><<</A>";
return thePage;
}
function NextPage(page)
{
thePage=">>";
if(page<pagesNumber) thePage="<A HREF='#' onclick='Javascript:return NextPageGo()'>>></A>";
return thePage;
}
function UpPageGo(){
if(page>0) page--;
getContent();
BodyText="";
}
//当前的页数
function currentPage()
{
var cp;
cp=(page+1)+" of";
return cp;
}
//总共的页数
function allPage()
{
var ap;
ap=pagesNumber+1;
return ap
}
function NextPageGo()
{
if (page<pagesNumber) page++;
getContent();
BodyText="";
}
//显示分页状态栏
function pageBar(page)
{
var pb;
pb=UpPage(page)+" "+NextPage(page)+" "+currentPage()+" "+allPage()+selectPage();
return pb;
}
function changePage(tpage)
{
page=tpage
if(page>=0) page--;
if (page<pagesNumber) page++;
getContent();
BodyText="";
}
function selectPage()
{
var sp;
sp="<select name='hehe' onChange='javascript:changePage(this.options[this.selectedIndex].value)'>";
//sp="<select name='hehe' onChange='alert(this.options[this.selectedIndex].value)'>";
sp=sp+"<option value=''></option>";
for (t=0;t<=pagesNumber;t++)
{
sp=sp+"<option value='"+t+"'>"+(t+1)+"</option>";
}
sp=sp+"</select>"
return sp;
}
function getContent()
{
if (!page) page=0;
n=page*pagenum;
endNum=(page+1)*pagenum;
if (endNum>maxNum) endNum=maxNum;
BodyText=header+BodyText;
for (;n<endNum;n++)
{
for (m=0;m<=colNum-1;m++)
{
mName=column.item(m).tagName;
BodyText=BodyText+("<tr><td class=td3d><font color=#FFFFFF>"+xmlDoc.getElementsByTagName(mName).item(n).text+"</font></td></tr>");
}
BodyText=BodyText+("<tr><td><hr color=#285577 size=1></td></tr>");
mm="";
}
showhtml.innerHTML=BodyText+"</table>"+pageBar(page);
BodyText=""
}
//定义table的样式.cellSpacing,cellPadding
//borderColorLight ,borderColorDark.
function table3d(obj) {
obj.border=0;
obj.cellSpacing=0;
obj.cellPadding=0;
obj.borderColorLight="#000000";
obj.borderColorDark="#000000";
}
//定义td的样式. bgColor
//borderColorLight, borderColorDark
function td3d(obj) {
obj.bgColor="#285577";
obj.borderColorLight="#FF0000";
obj.borderColorDark="#FFFFFF";
}
</script>
<div id="showhtml">
</div>
<script>
if (maxNum==0)
{
document.write("没有检索到英语句子")
}
else
{
getContent()
}
</script>
</body>
</html>
<Root>
<NO id="0001">
<English>
<![CDATA[
"work experience" is the type of work you've done in the past. If you haven't started working yet you can say "Right now I'm still a student." or "I'm a recent grad and Ihaven't started working yet." In the second sentence, "recent grad" is short for "recent graduate" and means that you have just finished school.
]]>
</English>
<Chinese>
<![CDATA[
请告诉我你过去的工作经验，工作经验就是你过去所做的工作。如果尚未开始工作，就可以回答“Right now I'm still a student.”（现在我还是个学生。）或者说“I'm a recent grad and I haven't started working yet.”（我刚刚毕业，还没有开始工作。）“recent grad”是“recent graduate”的缩写，意思是刚刚毕业。
]]>
</Chinese>
</NO>
<NO id="0002">
<English>
<![CDATA[
What's your greatest weakness? This is a popular question that western employers like to ask to make candidates nervous! In fact, they ask this to know how you respond to a difficult question. You shouldn't answer by telling your greatest weakness since you might not get the job! Instead, you can tell them something that isn't directly related to the job position.
]]>
</English>
<Chinese>
<![CDATA[
你最大的缺点是什么？西方老板特别爱问这个问题，让面试者感到很紧张。事实上，他问这个问题是看你对棘手问题的反应。你没必要如实回答你的弱点，因为那有可能让你得不到这份工作。相反，你可以告诉他们一些与工作不直接相关的事情。
]]>
</Chinese>
</NO>
<NO id="0003">
<English>
<![CDATA[
Why do you feel you are qualified for this job? This question is a good opportunity to brag a little bit. You should talk about some extra skills you have that maybe wasn't included in your resume, or talk about your greatest strength in more detail.
]]>
</English>
<Chinese>
<![CDATA[
你为什么觉得自己胜任这份工作？这时候你要充分发挥你的“自夸”本领。你可以讲述一些简历资料里面没有包括的技能；或者是再详细强调一下你的特长。
]]>
</Chinese>
</NO>
<NO id="0004">
<English>
<![CDATA[
What kind of salary did you have in mind? Salary is how much money you earn, usually per year. When asked this, it's best to answer with a salary range or approximation and not an exact figure. This shows that you are familiar with the industry if you know what the approximate salary should be.
]]>
</English>
<Chinese>
<![CDATA[
你期望的薪水是多少？“salary”就是你赚多少钱，通常是年收入。回答这个问题时，最好说出一个大致范围，而不是一个确切的数字。如果你能说出这个工资范围，那就说明你对此行业非常了解。
]]>
</Chinese>
</NO>
<NO id="0005">
<English>
<![CDATA[
If hired, when could you start work? When answering this it's best not to say you can start right away. This might make you seem very desperate for a job. A safe answer would be "I can start at the beginning of next month."
]]>
</English>
<Chinese>
<![CDATA[
如果雇佣的话，你什么时候开始工作？回答这个问题时。一定要注意！不要说我马上可以工作。那会让对方认为你非常迫切地需要这份工作。一个非常保险的回答可以是“I can start at the beginning of next month.”（我下月初可以开始上班。）
]]>
</Chinese>
</NO>
<NO id="0006">
<English>
<![CDATA[
What kind of work does the posi-tion involve? You can ask this to clarify exactly what kind of work you'll be doing.
]]>
</English>
<Chinese>
<![CDATA[
这个职位包括哪些工作？通过问这句话，你可以清楚地了解到你的工作内容。
]]>
</Chinese>
</NO>
<!-- Templet
<NO id="0000">
<English>
<![CDATA[
]]>
</English>
<Chinese>
<![CDATA[
]]>
</Chinese>
</NO>
-->
</Root>
