第11章综合实训

上传人：9*** IP属地：湖北上传时间：2023-02-06 格式：PPT 页数：69 大小：2.99MB 积分：30 举报 版权申诉

已阅读5页，还剩64页未读，继续免费阅读

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

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

实训2HTML文档基本操作

实训3JavaScript语言基础操作

实训4JavaScript基本语句的应用

实训5函数的应用

实训6对象编程的操作

实训7事件处理的操作

实训8浏览器对象的应用

实训10Ajax技术的应用

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

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

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

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

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

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

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

课件制作人：实训2HTML文档基本操作（4）在top.html页中应用图像标记<img>调用在线音乐网的Banner广告，代码如下。<tablewidth="800"border="0"align="center"cellpadding="0"cellspacing="0"><tr><tdalign="center"><imgsrc="images/bg.JPG"width="768"height="220"/></td></tr></table>（5）在bottom页中应用表格标记<table>、换行标记<br>输出版权信息，代码如下。<tablewidth="800"border="0"align="center"cellpadding="0"cellspacing="0"><tr><tdheight="70"align="center"bgcolor="#FFCC33">我行我秀在线音乐网 <br/><br/>

本站请使用IE6.0或以上版本1024*768为最佳分辨率</td></tr></table>【实训步骤】

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

课件制作人：实训2HTML文档基本操作为歌曲名称添加文字超级链接，单击歌曲名称，打开歌词链接文件music.html，并将music.html页中的内容显示在名称为“mainFrame”的框架内。在歌词信息页music.html中，应用图像标记显示音乐图标，应用表格标记、段落标记、换行标记等显示歌词信息，完整代码如下。<tablewidth="600"border="0"align="left"cellpadding="0"cellspacing="0"><tr><tdheight="89"align="center"valign="top"bgcolor="#FFFFFF"><br/><br/><h2><imgsrc="images/music.JPG"width="298"height="70"/><br/><br/></h2></td></tr><tr><tdheight="249"align="center"valign="top"bgcolor="#FFFFFF"><pclass="STYLE1">写信告诉我今天海是什么颜色<br/>

夜夜陪著你的海心情又如何<br/>……

为何你明明动了情却又不靠近</p><pclass="STYLE1">听海哭的声音<br/>

叹息著谁又被伤了心却还不清醒<br/>……

说你在离开我的时候是怎样的心情</td></tr></table>【实训步骤】

课件制作人：实训2HTML文档基本操作（7）在信息主显示页main.html页中，应用表格标记、段落标记、换行标记、标题标记等显示歌词信息。<tablewidth="600"border="0"align="left"cellpadding="0"cellspacing="0"><tr><tdheight="89"align="center"valign="top"bgcolor="#EFFBA5"><br/><br/><h2> ==== 音乐欣赏 ====</h2></td></tr><tr><tdheight="249"align="center"valign="top"bgcolor="#EFFBA5"><pclass="STYLE1">写信告诉我今天海是什么颜色<br/>

夜夜陪著你的海心情又如何<br/>……

为何你明明动了情却又不靠近</p><pclass="STYLE1">听海哭的声音<br/>

叹息著谁又被伤了心却还不清醒<br/>……

说你在离开我的时候是怎样的心情<br/></td></tr></table>（8）选择“文件”/“在浏览器中预览”/“IExplore6.0”，预览在线音乐网站，在主页单击歌曲名称超级链接，在mainFrame框架内显示歌词内容。【实训步骤】

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

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

课件制作人：实训3JavaScript语言基础操作（1）打开Dreamweaver，在“创建新项目”列中选择“HTML”。（2）自动创建HTML模板，将<title>…</title>标记间的内容改为“判断指定的年份是否为闰年”，将文件保存为index.html。（3）在<body>…</body>标记间编写如下代码，应用三目运算符编写判断指定年份是否为闰年的JavaScript代码。<scriptlanguage="javascript">functionleapyear(){ varnow=newDate(); varyears=now.getFullYear(document.form1.txt_year.value); varstr; varyears=document.form1.txt_year.value; varresult=(years%4==0&&years%100!=0)||(years%400==0)?years+"是闰年":years+"不是闰年";

document.form1.txt_yearresult.value=result;}</script>【实训步骤】

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

【实训步骤】

课件制作人：实训4JavaScript基本语句的应用熟练掌握JavaScript中if条件语句和for循环语句的应用。【实训目的】

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

课件制作人：实训4JavaScript基本语句的应用（1）打开Dreamweaver，在“创建新项目”列中选择“HTML”。（2）自动创建HTML模板，将<title>…</title>标记间的内容改为“应用if语句和for循环语句实现复选框的全选和反选”，将文件保存为index.html。（3）在<head>…</head>标记间编写JavaScript脚本。应用if语句和for循环语句实现复选框的全选和反选。<scriptlanguage="javascript">functionCheckAll(elementsA,elementsB){ varlen=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>【实训步骤】

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

课件制作人：实训4JavaScript基本语句的应用

<tdheight="27"align=centernowrapbgcolor="#FFFFCC"style="color:black;">小草</td>

<tdheight="27"align=centernowrapbgcolor="#FFFFCC"style="color:black;">xiaocao888</td>

<tdheight="27"align=centernowrapbgcolor="#FFFFCC"style="color:black;">2008-12-10</td></tr><tr><tdheight="27"align=centernowrapbgcolor="#FFFFCC"><inputtype="checkbox"name="ChkBox"value="130008100066"style="border:0;"> </td> <tdheight="27"align=centernowrapbgcolor="#FFFFCC"style="color:black;">城市中的狼</td> <tdheight="27"align=centernowrapbgcolor="#FFFFCC"style="color:black;">city12345</td> <tdheight="27"align=centernowrapbgcolor="#FFFFCC"style="color:black;">2009-2-6</td> </tr></table><tablewidth="600"border="0"cellspacing="0"cellpadding="0"align=center><tr><tdwidth="9%"height="40"align=centernowrap><inputname="Chkall"type="checkbox"style="border:0;"onClick="CheckAll(this.form.ChkBox,this.form.Chkall)"></td><tdwidth="91%"align=leftnowrapstyle="color:black;">[全选/反选]</td></tr></table></form>（5）选择“文件”/“在浏览器中预览”/“IExplore6.0”，预览网页。【实训步骤】

课件制作人：实训5函数的应用熟练应用JavaScript脚本进行自定义函数，并掌握函数的调用方法。【实训目的】

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

课件制作人：实训5函数的应用（1）打开Dreamweaver，在“创建新项目”列中选择“HTML”。（2）自动创建HTML模板，将<title>…</title>标记间的内容改为“调用自定义函数来限制发送祝福的文字数量”，将文件保存为index.html。（3）在<head>…</head>标记间编写JavaScript脚本。实现用户输入文字信息字符数量的计算，其中，英文、数字、空格占1个字符，汉字占两个字符。<scriptlanguage="javascript">functiontextCounter(field,countfield,maxlimit){ //文本信息限制在150个字符内

varStrValue=field.value; varByteCount=0; varStrLength=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>【实训步骤】

课件制作人：实训5函数的应用（4）在<body>…</body>标记间添加用户信息管理页面表单元素的HTML代码。<formid="form1"name="form1"method="post"action="wishingadd_ok.php"><spanstyle="margin-left:22px">您还能输入<inputstyle="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/><textareaname="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）选择“文件”/“在浏览器中预览”/“IExplore6.0”，预览网页。【实训步骤】

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

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

课件制作人：实训6对象编程的操作（1）打开Dreamweaver，在“创建新项目”列中选择“HTML”。（2）自动创建HTML模板，将<title>…</title>标记间的内容改为“带农历的日历”，将文件保存为index.html。（3）在页面中添加一个表格，代码如下：<CENTER><FORMname=CLD><TABLE><TR><TDalign=middle><TABLEborder=1cellpadding="0"cellspacing="0"bordercolordark="#FFFFFF"

bordercolor="#ffffff"bordercolorlight="#EEEEEE"><TRbgcolor="#006600"><TDcolSpan=7><FONTcolor=#ffffffstyle="FONT-SIZE:9pt">公历<SELECTname=SYonchange=changeCld()style="FONT-SIZE:9pt">JavaScript代码在Menu组件中动态添加下拉菜单（年）：<SCRIPTlanguage="JavaScript">for(i=1900;i<2050;i++)document.write('<option>'+i);</SCRIPT></SELECT>年<SELECTname=SMonchange=changeCld()style="FONT-SIZE:9pt">【实训步骤】

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

课件制作人：实训6对象编程的操作JavaScript代码在表格中添加6行7列的单元格。代码如下：

<SCRIPTlanguage="JavaScript">vargNum;for(i=0;i<6;i++){document.write('<tralign=center>');for(j=0;j<7;j++){gNum=i*7+j;document.write('<tdid="GD'+gNum+'"><fontid="SD'+gNum+'"size=2face="ArialBlack"');if(j==0)document.write('color=red');if(j==6)document.write('color=#000080');document.write('TITLE=""></font><br><fontid="LD'+gNum+'"size=2style="font-size:9pt"></font></td>');}document.write('</tr>');}</SCRIPT>HTML代码的相关结束标记。代码如下：</TABLE></TD></TR></TABLE></FORM></CENTER>【实训步骤】

课件制作人：实训6对象编程的操作（4）编辑用于实现公历日历与农历日历的JavaScript代码。用数组记录日历中的相关信息。<SCRIPTlanguage="JavaScript">varlunarInfo=newArray(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)varsolarMonth=newArray(31,28,31,30,31,30,31,31,30,31,30,31);varAnimals=newArray("鼠","牛","虎","兔","龙","蛇","马","羊","猴","鸡","狗","猪");varsolarTerm=newArray("小寒","大寒","立春","雨水","惊蛰","春分","清明","谷雨","立夏","小满","芒种","夏至","小暑","大暑","立秋","处暑","白露","秋分","寒露","霜降","立冬","小雪","大雪","冬至"); //农历的节气varsTermInfo=newArray(0,21208,42467,63836,85337,107014,128867,150921,173149,195551,218072,240693,263343,285989,308563,331033,353350,375494,397447,419210,440795,462224,483532,504758);varnStr1=newArray('日','一','二','三','四','五','六','七','八','九','十');varnStr2=newArray('初','十','廿','卅');【实训步骤】

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

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

课件制作人：实训6对象编程的操作自定义函数Dianaday()，用于算出当前月第一天的农历日期和当前农历日期下一个月农历的第一天日期。functionDianaday(objDate){vari,leap=0,temp=0;varbaseDate=newDate(1900,0,31);varoffset=(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;}【实训步骤】

课件制作人：实训6对象编程的操作自定义函数solarDays(y,m)，用于返回公历y年m+1月的天数。functionsolarDays(y,m){if(m==1)return(((y%4==0)&&(y%100!=0)||(y%400==0))?29:28);elsereturn(solarMonth[m]);}自定义函数calElement()用于记录公历和农历某天的日期。functioncalElement(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=''; //节气}【实训步骤】

课件制作人：实训6对象编程的操作自定义函数sTerm(y,n)用于返回某年的第n个节气为几日（从小寒算起）。functionsTerm(y,n){varoffDate=newDate((31556925974.7*(y-1900)+sTermInfo[n]*60000)+Date.UTC(1900,0,6,2,5));return(offDate.getUTCDate())}自定义函数calendar(y,m)用于保存y年m+1月的相关信息。varfat=mat=9;vareve=0;functioncalendar(y,m){fat=mat=0;varsDObj,lDObj,lY,lM,lD=1,lL,lX=0,tmp1,tmp2;varlDPOS=newArray(3);varn=0;varfirstLM=0;sDObj=newDate(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()}【实训步骤】

课件制作人：实训6对象编程的操作for(vari=0;i<this.length;i++){if(lD>lX){sDObj=newDate(y,m,i+1); //当月第一天的信息

lDObj=newDianaday(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]=newcalElement(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; //今日}【实训步骤】

课件制作人：实训6对象编程的操作自定义函数cDay(

)，用中文显示农历的日期。functioncDay(d){vars;switch(d){case10:s='初十';break;case20:s='二十';break;break;case30:s='三十';break;break;default:s=nStr2[Math.floor(d/10)];s+=nStr1[d%10];}return(s);}【实训步骤】

课件制作人：实训6对象编程的操作自定义函数drawCld(

)，在表格中显示公历和农历的日期以及相关节日。varcld;functiondrawCld(SY,SM){varTF=true;varp1=p2="";vari,sD,s,size;cld=newcalendar(SY,SM);GZ.innerHTML=' 【'+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);}//显示农历日

varSlfw=Ssfw=null;s=cld[sD].solarFestival;【实训步骤】

课件制作人：实训6对象编程的操作for(varipp=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);}}

人人文库> 全部分类> 教育资料 > 课件下载

温馨提示

1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

第11章综合实训

文档简介

温馨提示

最新文档

评论

第11章综合实训

文档简介

温馨提示

最新文档

评论

相关文档