110 likes | 228 Vues
动态网页制作技术. 第四 部分:动态 设计. 任务 十二: 日历 的 制作. 西藏职业技术学院. 项目简介. 博客日历是博客网的重要组成部分 , 可以查看当 前的日期以及之前或之后的日期等。然而 ,ASP 本身 没有提供日历的控件 , 所以站点日历的制作必须通过 编程实现。 日志的基本功能包括年、月 、日的显示、月份的 切换和年份的切换。这三个基本功能是相互联系的, 即 随着月份的变化,站点日志中的年、月和日相应 的变化。. 任务十:日志的制作. 知识目标. 界面的制作 代码 的编写. 任务 十二:日历的 制作. 能力目标. 培养 学生解决问题的能力
E N D
动态网页制作技术 第四部分:动态设计 任务十二:日历的制作 西藏职业技术学院
项目简介 博客日历是博客网的重要组成部分,可以查看当 前的日期以及之前或之后的日期等。然而,ASP本身 没有提供日历的控件,所以站点日历的制作必须通过 编程实现。 日志的基本功能包括年、月 、日的显示、月份的 切换和年份的切换。这三个基本功能是相互联系的, 即 随着月份的变化,站点日志中的年、月和日相应 的变化。 任务十:日志的制作
知识目标 界面的制作 代码的编写 任务十二:日历的制作
能力目标 培养学生解决问题的能力 培养学生编写和理解代码的能力 培养学生的合作、组织、协调能力 任务十二:日历的制作
效果图 任务十二:日历的制作
知识点 1、在站点文件夹下,打开 “index.asp”页面。并插入一个3行7列的表格,设置为“居中”。将第一行的2至6单元格进行合并,并在其中输入“年月”在第一个单元格中输入“<<”,最后一个单元各种输入“>>”。 任务十二:日历的制作
知识点 2、第二行中输入相应的文字,在“属性”面板中选择“css”,将单元的的大小设置为“12像素”。切换到代码视图,在代码的首行的<table>标签下插入下面语句: <% if Request("ReqDate")="" then CurrentDate=Date else CurrentDate=Trim(Request("ReqDate")) end if pyear=year(CurrentDate) pmonth=month(CurrentDate) %> 任务十二:日历的制作
知识点 3、为“<<”添加“onClick”行为,其触发的事件:onclick="JavaScript:location.href='?ReqDate=<%=DateAdd("m",-1,CurrentDate) %>"; 为“>>”添加“onClick”行为,其触发的事件:onclick="JavaScript:location.href='?ReqDate=<%=DateAdd("m", 1,CurrentDate) %>" 任务十二:日历的制作
知识点 4、显示日期。在“文档”的编辑窗口中,将星期所在的行选中。切换到“代码”视图,在星期所在的行的结束标记</tr>后面插入下面的代码: <% fromDate=FormatDateTime(month(CurrentDate)&"/1/"& year(CurrenDate)) toDate=FormatDateTime(DateAdd("m",1,fromDate)) nunmonthstart=weekday(fromDate)-1 nunmonthend=DateDiff("d",fromDate,toDate) if nunmonthstar+nunmonthend<36 then maxi=36 else maxi=43 end if 任务十二:日历的制作
知识点 4、显示日期。在“文档”的编辑窗口中,将星期所在的行选中。切换到“代码”视图,在星期所在的行的结束标记</tr>后面插入下面的代码: i=1 do while i<maxi iv=i-nunmonthstart if i>nunmonthstart and i<=nunmonthend+nunmonthstart then if iv=Day(now)and month(now)=pmonth and year(now)=pyear then response.write("<td align=center bgcolor=cccccc><a href=‘date_rili.asp.asp?c_Date="& pyear &"-"& pmonth &"-"& iv &"'target=blank>"& iv & "</a></td>") else response.write( "<td align=center><a href='date_rili.asp?c_Date="& pyear &"-"& pmonth &"-"& iv &"'target=_blank>"& iv &"</a></td>") end if 任务十二:日历的制作
知识点 4、显示日期。在“文档”的编辑窗口中,将星期所在的行选中。切换到“代码”视图,在星期所在的行的结束标记</tr>后面插入下面的代码: else response.write("<td></td>") end if if i mod 7=o then response.write("</tr><tr align=center bgcolor=ffffff height=19>") end if i=i+1 loop %> 任务十二:日历的制作