1 / 69

第 11 章 综合实训

第 11 章 综合实训. JavaScript 是 Web 页面中的一种脚本编程语言，也是一种通用的、跨平台的、基于对象和事件驱动并具有安全性的脚本语言。它不需要进行编译，而是直接嵌入在 HTML 页面中，把静态页面转变成支持用户交互并响应相应事件的动态页面。 通过前面 10 章的学习，相信读者已经对 JavaScript 有了深刻的认识和掌握。本章将通过 10 个实例来综合运用和扩展前面的知识，使读者进一步掌握所学知识。. 本章目录. √. 实训 1 JavaScript 基本操作 实训 2 HTML 文档基本操作

heller
Download Presentation

第 11 章 综合实训

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. 第11章 综合实训 JavaScript是Web页面中的一种脚本编程语言，也是一种通用的、跨平台的、基于对象和事件驱动并具有安全性的脚本语言。它不需要进行编译，而是直接嵌入在HTML页面中，把静态页面转变成支持用户交互并响应相应事件的动态页面。 通过前面10章的学习，相信读者已经对JavaScript有了深刻的认识和掌握。本章将通过10个实例来综合运用和扩展前面的知识，使读者进一步掌握所学知识。

  2. 本章目录 √ • 实训1 JavaScript基本操作 • 实训2 HTML文档基本操作 • 实训3 JavaScript语言基础操作 • 实训4 JavaScript基本语句的应用 • 实训5 函数的应用 • 实训6 对象编程的操作 • 实训7 事件处理的操作 • 实训8 浏览器对象的应用 • 实训9 css+div技术的应用 • 实训10 Ajax技术的应用 √ √ √ √ √ √ √ √ √

  3. 实训1 JavaScript基本操作 【实训目的】 （1）熟练掌握HTML文件中编写JavaScript程序的基本操作。 （2）基本掌握Dreamweaver编写工具。

  4. 实训1 JavaScript基本操作 【实训内容】 编写一个JavaScript程序，实现在页面上输出“欢迎访问明日公司主页”，效果如图11.1所示。

  5. 实训1 JavaScript基本操作 【实训步骤】 （1）打开Dreamweaver，在“创建新项目”列中选择“HTML”。 （2）自动创建HTML模板，将<title>…</title>标记间的内容改为“欢迎页”。 （3）在<body>…</body>标记间编写如下代码，实现在页面上输出“欢迎访问明日公司主页”。 <script language="javascript"> document.write("<HR>"); document.write("<h1>欢迎访问明日公司主页</h1>"); document.write("<HR>"); </script> （4）选择“文件”/“在浏览器中预览”/“IExplore 6.0”，预览网页。

  6. 实训2 HTML文档基本操作 【实训目的】 （1）熟练掌握HTML文档中的常用标记。 （2）熟练应用框架进行网页布局。

  7. 实训2 HTML文档基本操作 【实训内容】 （1）应用HTML文档中的常用标记制作一个在线音乐网站主页，要求主页应用框架实现。 （2）在各个子页应用HTML文档中的表格标记，段落标记、文字标记、列表标记和图像标记等来显示个人网站的LOGO，图像，音乐歌词等相关信息。 （3）单击主页歌名超级链接时，显示歌词信息，并将歌词显示在指定的框架页。 （4）在线音乐网主页页面美观大方，以不同大小、不同颜色、不同样式和不同格式的网页信息展现给读者。效果如图11.2所示。

  8. 实训2 HTML文档基本操作 【实训步骤】 （1）打开Dreamweaver，在“创建新项目”列中选择“HTML”。 （2）自动创建HTML模板，将文件保存为index.html。 （3）在index.html页中应用框架标记实现在音乐网主页的基本框架结构。框架页分别保存为top.html、left.html、main.html和bottom.html，效果如图11.3所示。

  9. 实训2 HTML文档基本操作 【实训步骤】 首页index.html实现框架的完整代码如下。 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>在线音乐网</title> </head> <frameset rows="220,*" frameborder="no" border="0" framespacing="0"> <frame src="top.html" name="topFrame" scrolling="No" noresize="noresize" id="topFrame" /> <frameset rows="*,159" cols="*" framespacing="0" frameborder="no" border="0"> <frameset rows="*" cols="430,*" framespacing="0" frameborder="no" border="0"> <frame src="left.html" name="leftFrame" scrolling="No" noresize="noresize" id="leftFrame" /> <frame src="main.html" name="mainFrame" id="mainFrame" /> </frameset> <frame src="bottom.html" name="bottomFrame" scrolling="No" noresize="noresize" id="bottomFrame" /> </frameset> </frameset> <noframes> <body bgcolor="#CCFF33"> </body> </noframes> </html>

  10. 实训2 HTML文档基本操作 【实训步骤】 （4）在top.html页中应用图像标记<img>调用在线音乐网的Banner广告，代码如下。 <table width="800" border="0" align="center" cellpadding="0" cellspacing="0"> <tr> <td align="center"><img src="images/bg.JPG" width="768" height="220" /></td> </tr> </table> （5）在bottom页中应用表格标记<table>、换行标记<br>输出版权信息，代码如下。 <table width="800" border="0" align="center" cellpadding="0" cellspacing="0"> <tr> <td height="70" align="center" bgcolor="#FFCC33">我行我秀&nbsp;在线音乐网 &nbsp;&nbsp;www.mrbccd.com<br/> <br/> 本站请使用IE 6.0 或以上版本 1024*768为最佳分辨率 </td> </tr> </table>

  11. 实训2 HTML文档基本操作 【实训步骤】 （6）在左侧导航页left.html页中，应用标题标记、列表标记和超链接标记等实现歌曲名称超级链接。 <table width="180" border="0" align="right" cellpadding="0" cellspacing="0"> <tr> <td width="206" height="507" valign="top" bgcolor="#FFFFCC"> <br><br> <h4>&nbsp;&nbsp;最新主打歌</h4> <ul type="circle"> <li><a href="music.html" target="mainFrame">小草</a></li> <li><a href="music.html" target="mainFrame">你是我的天使</a></li> <li><a href="music.html" target="mainFrame">我的爱人</a></li> <li><a href="music.html" target="mainFrame">缘没了爱依旧</a></li> <li><a href="music.html" target="mainFrame">花儿谢了</a></li> <li><a href="music.html" target="mainFrame">蓝色玫瑰</a></li> <li><a href="music.html" target="mainFrame">你是我伤口永远的痛</a></li> </ul> <br><br> <h4>&nbsp;&nbsp;经典老歌</h4> <ol type="A" start="1"> <li><a href="music.html" target="mainFrame">下辈子你会爱我吗</a></li> <li><a href="music.html" target="mainFrame">逃避你的眼神</a></li> <li><a href="music.html" target="mainFrame">没来由的爱</a></li> <li><a href="music.html" target="mainFrame">一生情</a></li> <li><a href="music.html" target="mainFrame">爱没完没了</a></li> <li><a href="music.html" target="mainFrame">我是最幸福的人</a></li> <li><a href="music.html" target="mainFrame">我的爱天作证</a></li> <li><a href="music.html" target="mainFrame">你是我永远的爱人</a></li> </ol> </td> </tr> </table>

  12. 实训2 HTML文档基本操作 【实训步骤】 为歌曲名称添加文字超级链接，单击歌曲名称，打开歌词链接文件music.html，并将music.html页中的内容显示在名称为“mainFrame”的框架内。 在歌词信息页music.html中，应用图像标记显示音乐图标，应用表格标记、段落标记、换行标记等显示歌词信息，完整代码如下。 <table width="600" border="0" align="left" cellpadding="0" cellspacing="0"> <tr> <td height="89" align="center" valign="top" bgcolor="#FFFFFF"><br /> <br /> <h2><img src="images/music.JPG" width="298" height="70" /><br /> <br /> </h2> </td> </tr> <tr> <td height="249" align="center" valign="top" bgcolor="#FFFFFF"><p class="STYLE1">写信告诉我今天海是什么颜色<br /> 夜夜陪著你的海心情又如何<br /> …… 为何你明明动了情却又不靠近</p> <p class="STYLE1">听海哭的声音<br /> 叹息著谁又被伤了心却还不清醒<br /> …… 说你在离开我的时候是怎样的心情 </td> </tr> </table>

  13. 实训2 HTML文档基本操作 【实训步骤】 （7）在信息主显示页main.html页中，应用表格标记、段落标记、换行标记、标题标记等显示歌词信息。 <table width="600" border="0" align="left" cellpadding="0" cellspacing="0"> <tr> <td height="89" align="center" valign="top" bgcolor="#EFFBA5"><br /> <br /> <h2>&nbsp;====&nbsp;音乐欣赏&nbsp;====</h2> </td> </tr> <tr> <td height="249" align="center" valign="top" bgcolor="#EFFBA5"> <p class="STYLE1">写信告诉我今天海是什么颜色<br/> 夜夜陪著你的海心情又如何<br /> …… 为何你明明动了情却又不靠近</p> <p class="STYLE1">听海哭的声音<br /> 叹息著谁又被伤了心却还不清醒<br /> …… 说你在离开我的时候是怎样的心情<br /> </td> </tr> </table> （8）选择“文件”/“在浏览器中预览”/“IExplore 6.0”，预览在线音乐网站，在主页单击歌曲名称超级链接，在mainFrame框架内显示歌词内容。

  14. 实训3 JavaScript语言基础操作 【实训目的】 （1）熟练掌握JavaScript常用的数据类型。 （2）熟练掌握定义变量的方法，熟悉运算符和表达式的应用。 （3）熟悉三目运算符的应用。

  15. 实训3 JavaScript语言基础操作 【实训内容】 编写一个JavaScript程序，通过三目运算符来返回用户输入的年份是否为闰年，如图11.4所示。

  16. 实训3 JavaScript语言基础操作 【实训步骤】 （1）打开Dreamweaver，在“创建新项目”列中选择“HTML”。 （2）自动创建HTML模板，将<title>…</title>标记间的内容改为“判断指定的年份是否为闰年”，将文件保存为index.html。 （3）在<body>…</body>标记间编写如下代码，应用三目运算符编写判断指定年份是否为闰年的JavaScript代码。 <script language="javascript"> function leapyear(){ var now = new Date(); var years = now.getFullYear(document.form1.txt_year.value); var str; var years = document.form1.txt_year.value; var result =(years%4==0 && years%100!=0)||(years%400==0)?years+"是闰年":years+"不是闰年"; document.form1.txt_yearresult.value = result; } </script>

  17. 实训3 JavaScript语言基础操作 【实训步骤】 <form name="form1" method="post" action=""> <table width="392" height="101" border="1" align="center" cellpadding="1" cellspacing="1" bordercolor="#009900" bgcolor="#CCFF00"> <tr> <td height="25" colspan="2" align="center" class="STYLE5">判断指定的年份是否为闰年</td> </tr> <tr> <td width="152" height="30" bgcolor="#FFFF99"><span class="STYLE3">请输入一个四位数的年份：</span></td> <td width="216" bgcolor="#FFFF99"><table width="196" height="29" border="0" cellpadding="0" cellspacing="0"> <tr> <td width="136"><input name="txt_year" type="text" value="2009" size="20"> </td> <td width="60">&nbsp; <input type="button" name="Button" value="计算" onClick="leapyear();"></td> </tr> </table> </td> </tr> <tr> <td height="37" colspan="2" align="center"> <input name="txt_yearresult" type="text" value="" size="51"> </td> </tr> </table> （4）选择“文件”/“在浏览器中预览”/“IExplore 6.0”，预览网页，在文本框中输入4位数的年份，单击“计算”按钮，判断指定的年份是否为闰年。

  18. 实训4 JavaScript基本语句的应用 【实训目的】 熟练掌握JavaScript中if条件语句和for循环语句的应用。

  19. 实训4 JavaScript基本语句的应用 【实训内容】 编写一个JavaScript程序，应用JavaScript脚本中的if语句和for循环语句实现复选框的全选和反选。单击“全选/”复选框可以实现快速选择当前页的所有用户信息；当“全选/反选”复选框处于选中状态时，再次单击“全选/”复选框可以实现快速在原有用户选择的状态进行反项选择，效果如图11.5、图11.6所示。

  20. 实训4 JavaScript基本语句的应用 【实训步骤】 （1）打开Dreamweaver，在“创建新项目”列中选择“HTML”。 （2）自动创建HTML模板，将<title>…</title>标记间的内容改为“应用if语句和for循环语句实现复选框的全选和反选”，将文件保存为index.html。 （3）在<head>…</head>标记间编写JavaScript脚本。应用if语句和for循环语句实现复选框的全选和反选。 <script language="javascript"> function CheckAll(elementsA,elementsB){ var len = elementsA; if(len.length > 0){ for(i=0;i<len.length;i++){ elementsA[i].checked = true; } if(elementsB.checked ==false){ for(j=0;j<len.length;j++){ elementsA[j].checked = false; } } } else{ len.checked = true; if(elementsB.checked == false){ len.checked = false; } } } </script>

  21. 实训4 JavaScript基本语句的应用 【实训步骤】 （4）在<body>…</body>标记间添加用户信息管理页面表单元素的HTML代码。 <form name="deluser" method="post"> <table width="600" border="1" align="center" cellpadding="3" cellspacing="2" bordercolor="#FFFFFF" bordercolorlight="#FFFFFF" bordercolordark="#336699" bgcolor="#CCFF33"> <tr> <td width="7%" height="27" align="center" nowrap style="color:black;">选 项</td> <td width="21%" height="27" align="center" nowrap style="color:black;">用户名称</td> <td width="22%" height="27" align="center" nowrap style="color:black;">密码</td> <td width="30%" height="27" align="center" nowrap style="color:black;">注册时间</td> </tr> <tr> <td height="27" align=center nowrap bgcolor="#FFFFCC"> <input type="checkbox" name="ChkBox" value="130008100001" style="border:0;"> </td> <td height="27" align=center nowrap bgcolor="#FFFFCC" style="color:black;">纯净水</td> <td height="27" align=center nowrap bgcolor="#FFFFCC" style="color:black;">chunjingshui666</td> <td height="27" align=center nowrap bgcolor="#FFFFCC" style="color:black;">2008-11-14 </td> </tr>

  22. 实训4 JavaScript基本语句的应用 【实训步骤】 <tr> <td height="27" align=center nowrap bgcolor="#FFFFCC"> <input type="checkbox" name="ChkBox" value="130008100008" style="border:0;"> </td> <td height="27" align=center nowrap bgcolor="#FFFFCC" style="color:black;">小草</td> <td height="27" align=center nowrap bgcolor="#FFFFCC" style="color:black;">xiaocao888</td> <td height="27" align=center nowrap bgcolor="#FFFFCC" style="color:black;">2008-12-10 </td> </tr> <tr> <td height="27" align=center nowrap bgcolor="#FFFFCC"> <input type="checkbox" name="ChkBox" value="130008100066" style="border:0;"> </td> <td height="27" align=center nowrap bgcolor="#FFFFCC" style="color:black;">城市中的狼</td> <td height="27" align=center nowrap bgcolor="#FFFFCC" style="color:black;">city12345</td> <td height="27" align=center nowrap bgcolor="#FFFFCC" style="color:black;">2009-2-6 </td> </tr> </table> <table width="600" border="0" cellspacing="0" cellpadding="0" align=center> <tr> <td width="9%" height="40" align=center nowrap> <input name="Chkall" type="checkbox" style="border:0;" onClick="CheckAll(this.form.ChkBox,this.form.Chkall)"> </td> <td width="91%" align=left nowrap style="color:black;">[全选/反选]</td> </tr> </table> </form> （5）选择“文件”/“在浏览器中预览”/“IExplore 6.0”，预览网页。

  23. 实训5 函数的应用 【实训目的】 熟练应用JavaScript脚本进行自定义函数，并掌握函数的调用方法。

  24. 实训5 函数的应用 【实训内容】 编写一个JavaScript程序，调用自定义函数来限制发送祝福的文字数量，效果如图11.7所示。

  25. 实训5 函数的应用 【实训步骤】 （1）打开Dreamweaver，在“创建新项目”列中选择“HTML”。 （2）自动创建HTML模板，将<title>…</title>标记间的内容改为“调用自定义函数来限制发送祝福的文字数量”，将文件保存为index.html。 （3）在<head>…</head>标记间编写JavaScript脚本。实现用户输入文字信息字符数量的计算，其中，英文、数字、空格占1个字符，汉字占两个字符。 <script language="javascript"> function textCounter(field, countfield, maxlimit) { //文本信息限制在150个字符内 var StrValue = field.value; var ByteCount = 0; var StrLength = field.value.length; for (i=0;i<StrLength;i++){ //计算输入的字符个数，英文数字占1个字符，汉字占两个字符 ByteCount = (StrValue.charCodeAt(i)<=256) ? ByteCount + 1 : ByteCount + 2; } if(ByteCount<=maxlimit){ strtemp=StrValue; countfield.value = maxlimit - ByteCount; }else{ document.getElementById('content').innerHTML = strtemp; } } </script>

  26. 实训5 函数的应用 【实训步骤】 （4）在<body>…</body>标记间添加用户信息管理页面表单元素的HTML代码。 <form id="form1" name="form1" method="post" action="wishingadd_ok.php"> <span style="margin-left:22px">您还能输入 <input style="BORDER-TOP-WIDTH: 0px; BORDER-LEFT-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; BORDER-RIGHT-WIDTH: 0px; color:#CC0099" readonly="readOnly" maxlength="3" size="3" value="150" name="freeLength" /> 个字符的祝福信息，发送给你最想祝福的人吧！<br /> <textarea name="content" id="content" cols="66" rows="6" onkeydown="textCounter(this.form.content,this.form.freeLength,150)" onkeyup="textCounter(this.form.content,this.form.freeLength,150)" style="background:url('images/mrbccd.gif')"></textarea> </span> </form> （5）选择“文件”/“在浏览器中预览”/“IExplore 6.0”，预览网页。

  27. 实训6 对象编程的操作 【实训目的】 （1）熟练掌握JavaScript中对象的创建及使用。 （2）熟练应用JavaScript中的日期对象、字符串对象、数学对象和数组对象。

  28. 实训6 对象编程的操作 【实训内容】 编写一个JavaScript程序，本实例主要应用日期对象、字符串对象、数学对象和数组对象来获取指定日期的相关信息，并用Lunar对象将指定日期转换成相应的农历日期。效果如图11.8所示。

  29. 实训6 对象编程的操作 【实训步骤】 （1）打开Dreamweaver，在“创建新项目”列中选择“HTML”。 （2）自动创建HTML模板，将<title>…</title>标记间的内容改为“带农历的日历”，将文件保存为index.html。 （3）在页面中添加一个表格，代码如下： <CENTER> <FORM name=CLD> <TABLE> <TR> <TD align=middle> <TABLE border=1 cellpadding="0" cellspacing="0" bordercolordark="#FFFFFF" bordercolor="#ffffff" bordercolorlight="#EEEEEE"> <TR bgcolor="#006600"> <TD colSpan=7><FONT color=#ffffff style="FONT-SIZE: 9pt">公历 <SELECT name=SY onchange=changeCld() style="FONT-SIZE: 9pt"> JavaScript代码在Menu组件中动态添加下拉菜单（年）： <SCRIPT language="JavaScript"> for(i=1900;i<2050;i++) document.write('<option>'+i); </SCRIPT> </SELECT> 年 <SELECT name=SM onchange=changeCld() style="FONT-SIZE: 9pt">

  30. 实训6 对象编程的操作 【实训步骤】 JavaScript代码在Menu组件中动态添加下拉菜单（月）： <SCRIPT language="JavaScript"> for(i=1;i<13;i++) document.write('<option>'+i); </SCRIPT> 在表格中添加单元格并设置单元格文本大小的HTML代码如下： </SELECT> 月 </FONT> <FONT color=#ffffff face=宋体 id=GZ style="FONT-SIZE: 12pt"></FONT><BR></TD> </TR> <TR align=middle bgColor=#e0e0e0> <TD width=54 style="font-size:9pt; padding:5pt;">日</TD> <TD width=54 style="font-size:9pt ">一</TD> <TD width=54 style="font-size:9pt ">二</TD> <TD width=54 style="font-size:9pt ">三</TD> <TD width=54 style="font-size:9pt ">四</TD> <TD width=54 style="font-size:9pt ">五</TD> <TD width=54 style="font-size:9pt ">六</TD></TR>

  31. 实训6 对象编程的操作 【实训步骤】 JavaScript代码在表格中添加6行7列的单元格。代码如下： <SCRIPT language="JavaScript"> var gNum; for(i=0;i<6;i++) { document.write('<tr align=center>'); for(j=0;j<7;j++) { gNum = i*7+j; document.write('<td id="GD' + gNum +'"><font id="SD' + gNum +'" size=2 face="Arial Black"'); if(j == 0) document.write(' color=red'); if(j == 6) document.write(' color=#000080'); document.write(' TITLE=""> </font><br><font id="LD' + gNum + '" size=2 style="font-size:9pt"> </font></td>'); } document.write('</tr>'); } </SCRIPT> HTML代码的相关结束标记。代码如下： </TABLE> </TD> </TR> </TABLE> </FORM> </CENTER>

  32. 实训6 对象编程的操作 【实训步骤】 （4）编辑用于实现公历日历与农历日历的JavaScript代码。用数组记录日历中的相关信息。 <SCRIPT language="JavaScript"> var lunarInfo=new Array( 0x04bd8,0x04ae0,0x0a570,0x054d5,0x0d260,0x0d950,0x16554,0x056a0,0x09ad0,0x055d2, 0x04ae0,0x0a5b6,0x0a4d0,0x0d250,0x1d255,0x0b540,0x0d6a0,0x0ada2,0x095b0,0x14977, 0x04970,0x0a4b0,0x0b4b5,0x06a50,0x06d40,0x1ab54,0x02b60,0x09570,0x052f2,0x04970, 0x06566,0x0d4a0,0x0ea50,0x06e95,0x05ad0,0x02b60,0x186e3,0x092e0,0x1c8d7,0x0c950, 0x0d4a0,0x1d8a6,0x0b550,0x056a0,0x1a5b4,0x025d0,0x092d0,0x0d2b2,0x0a950,0x0b557, 0x06ca0,0x0b550,0x15355,0x04da0,0x0a5d0,0x14573,0x052d0,0x0a9a8,0x0e950,0x06aa0, 0x0aea6,0x0ab50,0x04b60,0x0aae4,0x0a570,0x05260,0x0f263,0x0d950,0x05b57,0x056a0, 0x096d0,0x04dd5,0x04ad0,0x0a4d0,0x0d4d4,0x0d250,0x0d558,0x0b540,0x0b5a0,0x195a6, 0x095b0,0x049b0,0x0a974,0x0a4b0,0x0b27a,0x06a50,0x06d40,0x0af46,0x0ab60,0x09570, 0x04af5,0x04970,0x064b0,0x074a3,0x0ea50,0x06b58,0x055c0,0x0ab60,0x096d5,0x092e0, 0x0c960,0x0d954,0x0d4a0,0x0da50,0x07552,0x056a0,0x0abb7,0x025d0,0x092d0,0x0cab5, 0x0a950,0x0b4a0,0x0baa4,0x0ad50,0x055d9,0x04ba0,0x0a5b0,0x15176,0x052b0,0x0a930, 0x07954,0x06aa0,0x0ad50,0x05b52,0x04b60,0x0a6e6,0x0a4e0,0x0d260,0x0ea65,0x0d530, 0x05aa0,0x076a3,0x096d0,0x04bd7,0x04ad0,0x0a4d0,0x1d0b6,0x0d250,0x0d520,0x0dd45, 0x0b5a0,0x056d0,0x055b2,0x049b0,0x0a577,0x0a4b0,0x0aa50,0x1b255,0x06d20,0x0ada0) var solarMonth=new Array(31,28,31,30,31,30,31,31,30,31,30,31); var Animals=new Array("鼠","牛","虎","兔","龙","蛇","马","羊","猴","鸡","狗","猪"); var solarTerm = new Array("小寒","大寒","立春","雨水","惊蛰","春分","清明","谷雨","立夏" ,"小满","芒种","夏至","小暑","大暑","立秋","处暑","白露","秋分","寒露","霜降","立冬","小雪" ,"大雪","冬至"); //农历的节气 var sTermInfo = new Array(0,21208,42467,63836,85337,107014,128867,150921,173149, 195551,218072,240693,263343,285989,308563,331033,353350,375494,397447,419210, 440795,462224,483532,504758); var nStr1 = new Array('日','一','二','三','四','五','六','七','八','九','十'); var nStr2 = new Array('初','十','廿','卅');

  33. 实训6 对象编程的操作 【实训步骤】 用数组保存公历的节日。 var sFtv = new Array( "0101 元旦", "0214 情人节", "0308 妇女节", "0312 植树节", "0315 消费者权益日", "0401 愚人节", "0501 劳动节", "0504 青年节", "0512 护士节", "0601 儿童节", "0701 建党节", "0801 建军节", "0910 教师节", "0928 孔子诞辰", "1001 国庆节", "1006 老人节", "1024 联合国日", "1224 平安夜", "1225 圣诞节")

  34. 实训6 对象编程的操作 【实训步骤】 用数组保存农历的节日。 var lFtv = new Array( "0101 春节", "0115 元宵节", "0505 端午节", "0707 七夕情人节", "0715 中元节", "0815 中秋节", "0909 重阳节", "1208 腊八节", "1223 小年") 自定义函数lYearDays(y)，用于返回农历y年的总天数。 function lYearDays(y) { var i, sum = 348; for(i=0x8000; i>0x8; i>>=1)sum+=(lunarInfo[y-1900]&i)?1:0; return(sum+leapDays(y)); } 自定义函数leapDays(y)，用于返回农历y年闰月的天数。 function leapDays(y) { if(leapMonth(y)) return((lunarInfo[y-1900] & 0x10000)? 30: 29); else return(0); } 自定义函数leapMonth(y)，用于判断y年的农历中哪个月是闰月,不是闰月返回0。 function leapMonth(y){ return(lunarInfo[y-1900]&0xf); } 自定义函数monthDays(y,m)，用于返回农历y年m月的总天数。 function monthDays(y,m){ return((lunarInfo[y-1900]&(0x10000>>m))?30:29); }

  35. 实训6 对象编程的操作 【实训步骤】 自定义函数Dianaday()，用于算出当前月第一天的农历日期和当前农历日期下一个月农历的第一天日期。 function Dianaday(objDate) { var i, leap=0, temp=0; var baseDate = new Date(1900,0,31); var offset = (objDate - baseDate)/86400000; this.dayCyl = offset+40; this.monCyl = 14; for(i=1900; i<2050 && offset>0; i++) { temp = lYearDays(i) offset -= temp; this.monCyl += 12; } if(offset<0) { offset += temp; i--; this.monCyl -= 12; } this.year = i; this.yearCyl=i-1864; leap = leapMonth(i); //闰哪个月 this.isLeap = false; for(i=1; i<13 && offset>0; i++) { if(leap>0 && i==(leap+1) && this.isLeap==false){ //闰月 --i; this.isLeap = true; temp = leapDays(this.year);} else{ temp = monthDays(this.year, i);} if(this.isLeap==true && i==(leap+1)) this.isLeap = false; //解除闰月 offset -= temp; if(this.isLeap == false) this.monCyl++; } if(offset==0 && leap>0 && i==leap+1) if(this.isLeap){ this.isLeap = false;} else{this.isLeap=true;--i;--this.monCyl;} if(offset<0){offset+=temp;--i;--this.monCyl;} this.month=i; this.day=offset+1; }

  36. 实训6 对象编程的操作 【实训步骤】 自定义函数solarDays(y,m)，用于返回公历y年m+1月的天数。 function solarDays(y,m){ if(m==1) return(((y%4==0)&&(y%100!=0)||(y%400==0))?29:28); else return(solarMonth[m]); } 自定义函数calElement()用于记录公历和农历某天的日期。 function calElement(sYear,sMonth,sDay,week,lYear,lMonth,lDay,isLeap) { this.isToday = false; //公历 this.sYear = sYear; this.sMonth = sMonth; this.sDay = sDay; this.week = week; //农历 this.lYear = lYear; this.lMonth = lMonth; this.lDay = lDay; this.isLeap = isLeap; //节日记录 this.lunarFestival = ''; //农历节日 this.solarFestival = ''; //公历节日 this.solarTerms = ''; //节气 }

  37. 实训6 对象编程的操作 【实训步骤】 自定义函数sTerm(y,n)用于返回某年的第n个节气为几日（从小寒算起）。 function sTerm(y,n) { var offDate = new Date((31556925974.7*(y-1900)+sTermInfo[n]*60000)+Date.UTC (1900,0,6,2,5)); return(offDate.getUTCDate()) } 自定义函数calendar(y,m)用于保存y年m+1月的相关信息。 var fat=mat=9; var eve=0; function calendar(y,m) { fat=mat=0; var sDObj,lDObj,lY,lM,lD=1,lL,lX=0,tmp1,tmp2; var lDPOS = new Array(3); var n = 0; var firstLM = 0; sDObj = new Date(y,m,1); //当月第一天的信息 this.length = solarDays(y,m); //公历当月天数 this.firstWeek = sDObj.getDay(); //公历当月1日星期几 if ((m+1)==5){fat=sDObj.getDay()} if ((m+1)==6){mat=sDObj.getDay()}

  38. 实训6 对象编程的操作 【实训步骤】 for(var i=0;i<this.length;i++) { if(lD>lX) { sDObj = new Date(y,m,i+1); //当月第一天的信息 lDObj = new Dianaday(sDObj); //农历 lY = lDObj.year; //农历年 lM = lDObj.month; //农历月 lD = lDObj.day; //农历日 lL = lDObj.isLeap; //农历是否闰月 lX = lL? leapDays(lY): monthDays(lY,lM); //农历当月最后一天 if (lM==12){eve=lX} if(n==0) firstLM = lM; lDPOS[n++] = i-lD+1; } this[i] = new calElement(y,m+1,i+1,nStr1[(i+this.firstWeek)%7],lY,lM,lD++,lL); if((i+this.firstWeek)%7==0){ this[i].color = 'red'; //周日颜色 } } //节气 tmp1=sTerm(y,m*2)-1; tmp2=sTerm(y,m*2+1)-1; this[tmp1].solarTerms = solarTerm[m*2]; this[tmp2].solarTerms = solarTerm[m*2+1]; if((this.firstWeek+12)%7==5) //黑色星期五 this[12].solarFestival += '黑色星期五'; if(y==tY && m==tM) this[tD-1].isToday = true; //今日 }

  39. 实训6 对象编程的操作 【实训步骤】 自定义函数cDay( )，用中文显示农历的日期。 function cDay(d){ var s; switch (d) { case 10: s = '初十'; break; case 20: s = '二十'; break; break; case 30: s = '三十'; break; break; default : s = nStr2[Math.floor(d/10)]; s += nStr1[d%10]; } return(s); }

  40. 实训6 对象编程的操作 【实训步骤】 自定义函数drawCld( )，在表格中显示公历和农历的日期以及相关节日。 var cld; function drawCld(SY,SM) { var TF=true; var p1=p2=""; var i,sD,s,size; cld = new calendar(SY,SM); GZ.innerHTML = '&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 【'+Animals[(SY-4)%12]+'】'; //生肖 for(i=0;i<42;i++) { sObj=eval('SD'+ i); lObj=eval('LD'+ i); sObj.className = ''; sD = i - cld.firstWeek; if(sD>-1 && sD<cld.length) { //日期内 sObj.innerHTML = sD+1; if(cld[sD].isToday){ sObj.style.color = '#9900FF';} //今日颜色 else{sObj.style.color = '';} if(cld[sD].lDay==1){ //显示农历月 lObj.innerHTML='<b>'+(cld[sD].isLeap?'闰':'')+cld[sD].lMonth+'月'+ (monthDays(cld[sD].lYear,cld[sD].lMonth)==29?'小':'大')+'</b>'; } else{lObj.innerHTML = cDay(cld[sD].lDay);} //显示农历日 var Slfw=Ssfw=null; s=cld[sD].solarFestival;

  41. 实训6 对象编程的操作 【实训步骤】 for (var ipp=0;ipp<lFtv.length;ipp++){ //农历节日 if (parseInt(lFtv[ipp].substr(0,2))==(cld[sD].lMonth)){ if (parseInt(lFtv[ipp].substr(2,4))==(cld[sD].lDay)){ lObj.innerHTML=lFtv[ipp].substr(5); Slfw=lFtv[ipp].substr(5); } } if (12==(cld[sD].lMonth)){ //判断是否为除夕 if (eve==(cld[sD].lDay)){lObj.innerHTML="除夕";Slfw="除夕";} } } for (var ipp=0;ipp<sFtv.length;ipp++){ //公历节日 if (parseInt(sFtv[ipp].substr(0,2))==(SM+1)){ if (parseInt(sFtv[ipp].substr(2,4))==(sD+1)){ lObj.innerHTML=sFtv[ipp].substr(5); Ssfw=sFtv[ipp].substr(5); } } }

  42. 实训6 对象编程的操作 【实训步骤】 if ((SM+1)==5){ //母亲节 if (fat==0){ if ((sD+1)==7){Ssfw="母亲节";lObj.innerHTML="母亲节"} } else if (fat<9){ if ((sD+1)==((7-fat)+8)){Ssfw="母亲节";lObj.innerHTML="母亲节"} } } if ((SM+1)==6){ //父亲节 if (mat==0){ if ((sD+1)==14){Ssfw="父亲节";lObj.innerHTML="父亲节"} } else if (mat<9){ if ((sD+1)==((7-mat)+15)){Ssfw="父亲节";lObj.innerHTML="父亲节"} } } if (s.length<=0){ //设置节气的颜色 s=cld[sD].solarTerms; if(s.length>0) s = s.fontcolor('limegreen'); } if(s.length>0) {lObj.innerHTML=s;Slfw=s;} //节气 if ((Slfw!=null)&&(Ssfw!=null)){ lObj.innerHTML=Slfw+"/"+Ssfw; } } else { //非日期 sObj.innerHTML = ''; lObj.innerHTML = ''; } } }

  43. 实训6 对象编程的操作 【实训步骤】 自定义函数changeCld()，在下拉列表中选择年或月时，调用自定义函数drawCld()，显示公历和农历的相关信息。 function changeCld() { var y,m; y=CLD.SY.selectedIndex+1900; m=CLD.SM.selectedIndex; drawCld(y,m); } 用自定义变量保存当前系统中的年、月、日。 var Today = new Date(); var tY = Today.getFullYear(); var tM = Today.getMonth(); var tD = Today.getDate(); 自定义函数initial()，打开页时，在下拉列表中显示当前年月，并调用自定义函数drawCld()，显示公历和农历的相关信息。 function initial() { CLD.SY.selectedIndex=tY-1900; CLD.SM.selectedIndex=tM; drawCld(tY,tM); } </SCRIPT> （5）在<body>标记的窗体载入（onLoad）事件中调用自定义函数initial()。 <BODY onload=initial()> （6）选择“文件”/“在浏览器中预览”/“IExplore 6.0”，预览网页，选择相应的年份和月份即可获取指定年月的日历相关信息。

  44. 实训7 事件处理的操作 【实训目的】 （1）熟练掌握调用事件的方法。 （2）熟悉掌握鼠标事件中移入移出事件的应用。

  45. 实训7 事件处理的操作 【实训内容】 编写一个JavaScript程序，实现导航条的动画效果。当用户将鼠标移动到任意一个导航按钮上时，该按钮都会突出显示，鼠标移走后，又恢复为原来位置，效果如图11.9、图11.10所示。

  46. 实训7 事件处理的操作 【实训步骤】 （1）打开Dreamweaver，在“创建新项目”列中选择“HTML”。 （2）自动创建HTML模板，将<title>…</title>标记间的内容改为“应用鼠标事件实现导航条的动画效果”，将文件保存为index.html。 （3）准备14张图片，7张鼠标移出时显示的图片，图片的名称为“menu_0”+1至7的数字+“.gif”，7张鼠标移入时显示的图片，图片的名称为“menu_0”+1至7的数字+“_over.gif”。 （4）将过程（3）所准备的7张鼠标移出时显示的图片按顺序插入到页面中的适当位置，并设置其鼠标事件onMouseMove 和onMouseout执行的操作，这里分别调用两个不同的自定义JavaScrip函数。在<body>…</body>标记间添加的HTML完整代码如下。 <table width="871" height="339" border="0" align="center" cellpadding="0" cellspacing="0" background="Images/top/bg.GIF"> <tr> <td valign="top"><table width="100%" height="26" border="0" cellpadding="0" cellspacing="0"> <tr> <td><div align="right" style="color:#FFFFFF "> 设为首页| 收藏本站|&nbsp;&nbsp;&nbsp;&nbsp;</div></td> </tr> </table>

  47. 实训7 事件处理的操作 【实训步骤】 <table width="100%" height="119" border="0" cellpadding="0" cellspacing="0"> <tr> <td width="183"><table width="100%" height="119" border="0" cellpadding="0" cellspacing="0"> <tr height="28"> <td height="29"></td> </tr> <tr> <td height="90" background="Images/logo_bg.gif"> <div align="center"> <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="162" height="89"> <param name="movie" value="Flash/logo.swf"> <param name="quality" value="high"> <param name="wmode" value="transparent"> <embed src="Flash/logo.swf" width="162" height="89" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" wmode="transparent"></embed> </object> </div></td> </tr> </table></td> <td width="95" align="center"> <img src="Images/top/menu_01.gif" id="image1" width="95" height="119" border="0" onMouseMove="move(this,'1')" onMouseout="out(this,'1')"> </td> <td width="95" align="center"> <img src="Images/top/menu_02.gif" id="image2" width="95" height="119" border="0" onMouseMove="move(this,'2')" onMouseout="out(this,'2')"> </td>

  48. 实训7 事件处理的操作 【实训步骤】 <td width="94" align="center"> <img src="Images/top/menu_03.gif" name="image3" width="95" height="119" border="0" onMouseMove="move(this,'3')" onMouseout="out(this,'3')"> </td> <td width="94" align="center"> <img src="Images/top/menu_04.gif" name="image4" width="94" height="119" border="0" onMouseMove="move(this,'4')" onMouseout="out(this,'4')"> </td> <td width="94" align="center"> <img src="Images/top/menu_05.gif" name="image5" width="95" height="119" border="0" onMouseMove="move(this,'5')" onMouseout="out(this,'5')"> </td> <td width="94" align="center"> <img src="Images/top/menu_06.gif" name="image6" width="94" height="119" border="0" onMouseMove="move(this,'6')" onMouseout="out(this,'6')"> </td> <td width="95" align="center"> <img src="Images/top/menu_07.gif" width="95" name="image7" height="119" border="0" onMouseMove="move(this,'7')" onMouseout="out(this,'7')"> </td> <td>&nbsp;</td> </tr> </table> </td> </tr> </table>

  49. 实训7 事件处理的操作 【实训步骤】 （5）在<head>…</head>标记间编写自定义的JavaScript函数move()和out()。move()用于设置鼠标移入导航按钮上时显示的图片，out()用于设置鼠标移出导航按钮上时显示的图片，代码如下。 <script language="javascript"> //鼠标移动效果 var A_Img=new Image(); function move(image,num){ image.src='Images/top/menu_0'+num+'_over.gif'; } function out(image,num){ image.src='Images/top/menu_0'+num+'.gif'; } </script> （6）选择“文件”/“在浏览器中预览”/“IExplore 6.0”，预览网页。

  50. 实训8 浏览器对象的应用 【实训目的】 熟练应用JavaScript脚本中的窗口对象和文档对象。

More Related