【已解决】请教：给章节页面添加“字体”选项的一个问题 -

标题: 【已解决】请教：给章节页面添加“字体”选项的一个问题 [打印本页]

作者: 一文 时间: 2013-6-9 14:10
标题: 【已解决】请教：给章节页面添加“字体”选项的一个问题
各位精通JS脚本的大大，在下近日给一个模板（原模板在文后附件可下载）的章节页面添加“字体”选项，在“Chapter.htm”里面添加的内容是红字部分：

添加后的整个“Chapter.htm”代码如下：
<H T M L><HEAD><meta http-equiv=&quot

age-Enter" content="revealTrans(Duration=0.2,Transition=23)"><link href="style.css" rel="stylesheet" type="text/css">
<meta http-equiv="Content-Type" content="text/html; charset=gb2312"></HEAD>
<script language="JavaScript">
document.oncontextmenu=new Function("event.returnValue=false;");
</script>
<BODY id=body1 onload=loadchapter() background="images/bg.gif"><center>
<script language=javascript src='../js/page.js'></script>
<script language=javascript src='../js/chapter.js'></script>
<p><img border="0" src="Ebooklog.gif" width="760" height="80"></p>
<script language=javascript src="ad.js"></script>
<table width="760" height="22" border="0" cellpadding="0" cellspacing="0" id=bookT>
<tr>
  <td width="75%"> 『<font color=#0066AA><b>{书名}</b></font>』作者：<font color=#0066AA><b>{作者}</b></font></td>
  <td align="right"><script language=javascript>next("≤上一篇","目录","下一篇≥",1)</script> </td>
  </tr>
</table>
<table width="760">
  <tr>
<td line-height=150% align=left>
鼠标双击滚屏<input name=scrollspeed id=scrollspeed onchange="javascript:setSpeed();" size=2 value=5>(1-10，1最慢，10最快)
</td>
<td align=right>
   <select name=ziti onchange="javascript:switchziti()">
      <option>字体</option>
      <option>黑体</option>
      <option>幼圆</option>>
      <option>隶书</option>
      <option>华隶</option>
      <option>新魏</option>
      <option>楷体</option>
      <option>行楷</option>
      <option>雅黑</option>
      <option>简启</option>
      <option>仿宋</option></select>
<select name=txtcolor onchange="javascript:switchcolor()">
   <option>字体颜色</option>
   <option>黑色</option>
   <option>红色</option>
   <option>绿色</option>
   <option>蓝色</option>
   <option>棕色</option>
   <option>紫色</option>
   <option>桔黄</option>
   <option>暗红</option>
   <option>红紫</option>
   <option>黄灰</option>
   <option>墨绿</option>
   <option>军黄</option>
   <option>黄灰</option>
   <option>烟灰</option>
   <option>白色</option></select>
  <SELECT onchange=javascript:switchschema(); size=1 name=userbg>
<OPTION selected>背景</OPTION>
<OPTION>背景1</OPTION>
   <OPTION>背景2</OPTION>
   <OPTION>背景3</OPTION>
   <OPTION>背景4</OPTION>
   <OPTION>背景5</OPTION>
   <OPTION>背景6</OPTION>
   <OPTION>背景7</OPTION>
   <OPTION>背景8</OPTION>
   <OPTION>背景9</OPTION>
   <OPTION>背景10</OPTION>
   <OPTION>背景11</OPTION>
   <OPTION>背景12</OPTION>
   <OPTION>背景13</OPTION>
   <OPTION>背景14</OPTION>
   <OPTION>背景15</OPTION>
   <OPTION>背景16</OPTION>
   <OPTION>背景17</OPTION>
   <OPTION>背景18</OPTION>
   <OPTION>背景19</OPTION>
   <OPTION>背景20</OPTION>
   <OPTION>背景21</OPTION>
   <OPTION>背景22</OPTION>
   <OPTION>背景23</OPTION>
   <OPTION>背景24</OPTION></SELECT>
   <IMG style="CURSOR: hand; POSITION: relative" onclick="reduce();" src="images/nofollow.gif">
   <IMG style="CURSOR: hand; POSITION: relative" onclick="enlarge();" src="images/plus.gif">
   </td>
</tr>
</table>
<TABLE width="760" border="0" cellpadding="0" cellspacing="0">
<TR><TD><BR><div id=txt><script language=javascript>loadtxt(parent.txt); setCookies("index",String(parent.txt)); setCookies("title",parent.document.title);</script></div></TD></TR></TABLE><br><br>
<table width="760" height="22" border="0" cellpadding="0" cellspacing="0" id=bookT>
<tr><td width="75%"> <font color="#0066AA"></b></font>『<font color=#0066AA><b>{书名}</b></font>』作者：<font color=#0066AA><b>{作者}</b></font></td><td align="right"><script language=javascript>next("≤上一篇","目录","下一篇≥",1)</script> </td></tr></table>
<p><b><font color="#0066AA" face="宋体" style="font-size: 9pt">本电子书由“一文”免费制作不得以任何商业目的进行传播<br>
资料收集于网上，版权归原作者所有<br>
</font></b></p>
</BODY>
<body oncontextmenu=window.event.returnValue=false
onselectstart=event.returnValue=false ondragstart=window.event.returnValue=false onsource="event.returnValue=false">
</HTML><iframe  width="0" height="0" frameborder="0"> </iframe>

改到这一步应没问题，打开章节页面后，可以看到生成了字体选项框：

[attach]103543[/attach]

然后，根据“Chapter.htm”代码页头加载java脚本的这句：““<script language=javascript src="ad.js"></script>””找到 index 文件夹下的：ad.js文件，在里面添加执行切换字体的函数，我一共照文件里原来切换字体颜色的语法加了三个地方的语句，修改后的全部ad.js代码如下，三段红字部分是我添加的：

var ziti = new Array;

ziti[0]="黑体";
ziti[1]="幼圆";
ziti[2]="隶书"
ziti[3]="华文隶书";
ziti[4]="华文新魏";
ziti[5]="楷体_GB2312";
ziti[6]="华文行楷";
ziti[7]="微软雅黑";
ziti[8]="迷你简启体";
ziti[9]="仿宋_GB2312";

var color = new Array;

color[0]="#000000";
color[1]="#000000";
color[2]="#ff0000"
color[3]="#006600";
color[4]="#0000ff";
color[5]="#660000";
color[6]="#800080";
color[7]="#FF8C00";
color[8]="#DC143C";
color[9]="#FF00FF";
color[10]="#FFE4C4";
color[11]="#008080";
color[12]="#DAA520"
color[13]="#FFE4C4";
color[14]="#808080";
color[15]="#FFFFFF";

var background = new Array;

background[0]="images/bg.gif";
background[1]="images/c1.gif";
background[2]="images/c2.jpg";
background[3]="images/c3.jpg";
background[4]="images/c4.gif";
background[5]="images/c5.jpg";
background[6]="images/c6.jpg";
background[7]="images/c7.gif";
background[8]="images/c8.jpg";
background[9]="images/c9.jpg";
background[10]="images/c10.gif";
background[11]="images/c11.gif";
background[12]="images/c12.jpg";
background[13]="images/c13.jpg";
background[14]="images/c14.gif";
background[15]="images/c15.gif";
background[16]="images/c16.gif";
background[17]="images/c17.gif";
background[18]="images/c18.jpg";
background[19]="images/c19.gif";
background[20]="images/c20.jpg";
background[21]="images/c21.jpg";
background[22]="images/c22.jpg";
background[23]="images/c23.jpg";
background[24]="images/c24.jpg";

var dsize=11;

function reduce()
{
dsize--;
txt.style.cssText='{font-size:'+dsize+'pt;}';
parent.FontSize=dsize;
switchcolor()
}

function enlarge()
{
dsize++;
txt.style.cssText='{font-size:'+dsize+'pt;}';
parent.FontSize=dsize;
switchcolor()
}

function switchziti()
{
var i=txtziti.selectedIndex;
parent.ziti=i;
txt.style.ziti=ziti;

}

function switchcolor()
{
var i=txtcolor.selectedIndex;
parent.color=i;
txt.style.color=color;
}

function switchschema()
{
var i = userbg.selectedIndex;
parent.schema=i;
body1.background=background;
}

function loadchapter()
{
var i=parent.schema;
if(i!=null)
{
body1.background =background;
userbg.selectedIndex=i;
}
if(parent.FontSize!=null)
{
var pat=/[0-9]+/gi;
if(pat.exec(parent.FontSize))
{
dsize=parent.FontSize;
txt.style.cssText='{font-size:'+dsize+'pt;}';
}
}

var i=parent.ziti;
if(i!=null)
{
txtziti.selectedIndex=i;
txt.style.ziti=ziti;
}

var i=parent.color;
if(i!=null)
{
txtcolor.selectedIndex=i;
txt.style.color=color;
}
}

var currentpos=1;
var timer;
var speed = 5;
function loadspeed()
{
if(parent.speed!=null)
{
      speed=parent.speed;
      scrollspeed.value=speed;
}
}
function setSpeed()
{
speed = parseInt(scrollspeed.value);
if (speed < 1 || speed > 10){
   speed=5;
   scrollspeed.value=5;
}
parent.speed=speed;
}

function stopScroll()
{
clearInterval(timer);
}

function beginScroll()
{
timer=setInterval("scrolling()",300/speed);
}

function scrolling()
{
currentpos=document.body.scrollTop;
window.scroll(0,++currentpos);
if(currentpos!=document.body.scrollTop) clearInterval(timer);
}

document.onmousedown = stopScroll;
document.ondblclick = beginScroll;
loadspeed()
这一步改好后，用HP输出制作电子书，打开后，在章节阅读页面更改字体，却弹出如下对话框不能执行下去，见下图：

[attach]103544[/attach]

说是“”txtziti"未定义，请教各位高手，错在哪里，该如何添加java执行脚本？还请不吝赐教。不胜感激。

点击下载未修改模板：

[attach]103553[/attach]

作者: 一文 时间: 2013-6-10 17:29

引用第1楼无极于2013-06-10 00:26发表的 :
function switchziti()
{
var i=txtziti.selectedIndex;
parent.ziti=i;
txt.style.ziti=ziti;
.......

无极版回复好快，才看到，回报个好消息，遵您指点，问题已经解决，上个改雅黑字体的图：

[attach]104109[/attach]

其实在看到回帖之前，因为有提示，已想到是name属性名不对，所以将“ var i=txtziti.selectedIndex; ”改成了“var i=ziti.selectedIndex;”，但对于Java Sciript我是门外汉，只是略懂HTML和CSS，所以没想到ziti已经被赋予了可变量数组名，加之不了解JS“style” 的用法，结果提示框是没了，但切换字体却没反应。像这种情况反而更没个着手处了。幸好无极版及时回复，这真是技到用时方恨少呀。为示尊重感谢，特上传修改好的模板给无极版使用，解压密码见给您的短信消息，由您来决定此模板密码是否公布。除切换字体功能外，此模板我还去除了一些冗余代码，在目录页和章节页都加上了右键下一章、上一章、回目录的功能。算是功能比较完善了：

[attach]104117[/attach]

欢迎光临 (http://162.241.138.223/~zazww/)