最新javascript课程设计报告(01450229 周慧).doc

《最新javascript课程设计报告(01450229 周慧).doc》由会员分享，可在线阅读，更多相关《最新javascript课程设计报告(01450229 周慧).doc（15页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、课程设计报告课程设计名称：脚本开发技术(JavaScript)院 系 名 称：中 印 计 算 机 软 件 学 院学 生 姓 名：周慧班级：15 计算机科学与技术 2 班学号：201501450229成绩：指 导 教 师：刘效伟开 课 时 间：2 0 1 7-2 0 1 8 学年第一学期目录目录一、一、课程设计概要课程设计概要.2（一）设计目的：.2（二）开发环境：.2（三）开发技术：.2二、二、网站总体设计网站总体设计.2三、三、实现部分实现部分.4（一）网页结构：.4（二）网页展示：.8（三）网页行为的实现方案：.9四、四、总结总结.13参考书目：参考书目：.142一、一、课程设计概要课程设

2、计概要（一）设计目的：课程设计的目的在于培养学生综合运用所学的关于网页设计与制作、JavaScript编程等方面的知识，独立解决网页设计与制作中的问题。使学生通过此次课程设计，熟悉并掌握网页设计与制作方面的技能，掌握动态网页设计与制作的流程和方法，能够综合运用 JavaScript、HTML、CSS 实现网页前台效果。（二）开发环境：Hbuilder 编辑器，谷歌浏览器（三）开发技术：HTML，css，JavaScript 脚本语言二、二、网站总体设计网站总体设计此次课程设计做的是一个“JavaScript 学习天地”网站的主页面，主要实现了分类导航，搜索，跑马灯字样，动态时钟，滚动广告，日历

3、等网页功能。打开网页，首先映入眼帘的是网页的头部，即为此网页的导航栏部分。头部导航栏包含了整个网站的页面名称，每个页面名称都附上了相应页面的链接地址，当鼠标略过每个页面名称时，会有一个背景色加深的特效，同时鼠标变为一个小手的标志，当点击某个页面名称时就会跳转到相应的页面上。除此之外，在导航栏的右面还添加了一个搜索框，在搜索框里输入想要搜索的内容，之后点击搜索框后面的搜索按钮就可以在此网站搜索到相应内容。在导航栏的左下部分，做了一个滚动出现“欢迎进入 JavaScript 学习天地”字样的跑马灯特效，同时也使网页的 title 具有同样的效果。跑马灯的右面对应部分是一个动态时钟，显示当前日期和时

4、间。在导航栏与页面尾部之间的就是此网页的主体部分。主体部分也是大致分为了三个板块，分别为 top，center，yemian 三部分。首先 top 板块是对于当前页面的一个整体的大分类，从学习方向，科目分类，学习类型三个方向分别导航，让用户可以一次性实现精准学习内容的选择。此网页页面显示 的是关于JavaScript 的全部科目全部类型的学习内容，所以是三个方向是定位在了 JavaScript，全部，全部上面，所以显示的时候是黑色背景白色文字的效果，而当鼠标划过其它选项时相应文字会变为红色，点击时就会筛选出相应的内容。center 中的内容为当前页面的全部的学习菜单内容，对于此菜单也做了一个小

5、的分类，即按照学习内容的热度和更新3日期做了分类，分为了“最热”和“最新”两种类型，用户可以根据自己的需求进行选择，当前页面定位在了“最热”上面，鼠标划过时会有和之前一样的效果出现。接下来就是学习菜单的内容，每门课程的封面都与课程内容相对应，同时，在每个课程封面下方都有课程名称和当前观看人数，课程时长，难易程度等简单的介绍，用户可根据自己的需求进行选择，每个课程封面都链接了对应课程的内容，点击即可跳转到相应课程。在 center 的最底部是一个页面选择菜单，因为当前页面为第一页即首页，所以首页和上一页定位，鼠标点击无法实现跳转，数字 1 背景色为红色，字体颜色为白色，表示当前所处页面，鼠标划过

6、其它页面数字 时有跟前面一样的效果，点击某页即可跳转到相应页面。以上为网页主体的大致功能介绍。日历一般离不开表格，通常都使用表格装载指定月的日期等信息。所以，要编写 JS日历，首先必须解决的问题是表格的行与列问题。列是固定的，七列，因为一周有七天。行需要动态计算，因为，每一个月的第一天是星期几是一个变数，因而第一天在表格中的第几个单元也就跟着变化，同时，每个月的总天数不一致也影响着各个月对表格行数的需要量。考虑到闰年问题会影响二月份的天数，我们先编写一个判断闰年的自编函数：function is_leap(year)return(year%100=0?res=(year%400=0?1:0):

7、res=(year%4=0?1:0);接着定义一个包含十二个月在内的月份总天数的数组：m_days=new Array(31,28+is_leap(ynow),31,30,31,31,30,31,30,31,30,31);m_days 这个数组里，二月份的天数已经加入闰年的信息：28+is_leap(ynow)。数组元素从 0 开始，正好对应于 JS 提供的 Date 函数提供的 getMonth 返回值，即 0 表示一月，1 表示二月，2 表示三月，依此类推。这样，各月总数可以这样取得：m_daysx。其中，x 为 0 至 11 的自然数。使用 Date函数的 getDay 取得，返回的值从

8、 0 到 6，0 表示星期一，1 表示星期二，2 表示星期三，其余依此类推。代码如下（假设要处理的时间为 2008 年 3 月）：n1str=new Date(2008,3,1);firstday=n1str.getDay();有了月总天数和该月第一天是星期几这两个已知条件，就可以解决表格所需行数问4题：（当前月天数+第一天是星期几的数值）除以七。表格函数需要整数，因此，我们使用 Math.ceil 来处理：tr_str=Math.ceil(m_daysmnow+firstday)/7);表格中的 tr 标签实际上代表表格的行，因此变量 tr_str 是我们往下写表格的重要依据。使用两个 fo

9、r 语句嵌套起来实现：外层 for 语句写行，内层 for 语句写单元格。for(i=0;itr_str;i+)/外层 for 语句-tr 标签document.write();for(k=0;k7;k+)/内层 for 语句-td 标签idx=i*7+k;/表格单元的自然序号date_str=idx-firstday+1;/计算日期/这里是处理有效日期代码/内层 for 语句结束document.write();/外层 for 语句结束单元格的自然序号是否代表有效日期非常关键，为此必须加入一个过滤机制：仅打印有效的日期。有效的日期大于 0 小于小于等于处理月的总天数。三、三、实现部分实现部分

10、在 网页底部有一个 footer 区，主要作用为显示合作网站的名称及跳转，最底部是声明网页版权的作用。（一）网页结构：此网页主要是依靠块与块的包裹和连接来实现的。首先导航栏是在 header 里面的，header 里面定义了一个为 content 的块，content 里面又定义了是三个小块分别包裹 logo 图标，导航列表，搜索栏。具体实现代码为首页5视频教程社区问答技术文章手册下载工具下载类库下载搜索网页中间也时主体部分又分了三个 大部分 top，center，footer。Top 部分为大菜单部分，代码为方向：全部JavsScriptHtml/css先做好了一个块之后，在此基础上修改之后

11、成为后两个，这样 就形成了主体部分的大导航栏部分。Center 部分为包裹学习内容的块，主要是热度分类，学习内容展示介绍，页面菜单。具体代码如下：最热6最新独孤九贱(6)_jQuery 视频教程16057 人在看78 课时中级/figure/这是一个学习内容的展示区域块下面是页面菜单的代码：div class=yiemian首页上一页1234下一页7尾页最后的 Footer 区是相关网站的展示与跳转，还有相关版权的声明，代码如下：网站首页PHP 视频PHP 实战PHP 代码PHP 手册词条手记8JavaScript 学习天地：独家原创，永久免费的在线视频教程，JavaScript 技术学习阵地

12、 Copyright 2014-2017 RightsReserved|皖 B2-20150071-9（二）网页展示：头部导航栏：图 3.1 头部导航主体大菜单栏：图 3.2 主体菜单9主体学习内容区：图 3.3 学习区尾部区：图 3.4 尾部（三）网页行为的实现方案：网页样式设计主要是依靠了 css 样式表实现，跑马灯行为和动态时钟的行为实现时依靠了 JavaScript 函数，数组，循环判断语句来实现。跑马灯字样的实现是通过函数功能来设置字符串之后获取字符串的过程，设置输出队列为字符串的第一个字和字符串的最后一个字，info=info+info.substring(0,1);10info=

13、info.substring(1,info.length);通过 setInterval 设置间隔时间 setInterval(setSatatus,500);设置间隔时间为 500 毫秒。根据指定的 id 属性值得到对象。返回 id 属性值等于 sID 的第一个对象的引用。var id=document.getElementById通过 textContent 和 textContent 来解决了浏览器的兼容问题var id=document.getElementById(box);if(typeof id.textContent=string)id.textContent=meninfo.

14、substring(0,meninfo.length);else id.innerText=meninfo.substring(0,meninfo.length);meninfo=meninfo+meninfo.substring(0,1);meninfo=meninfo.substring(1,meninfo.length);动态时钟是通过函数 oTime 获取当前时间之后以中文格式显示出来实现function oTime()var Time=new Date();/*获取日期*/var oYear=Time.getFullYear();/*获取年份*/var oMonth=Time.get

15、Month()+1;/*获取月份*/var oDate=Time.getDate();/*获取日份*/var oWeek=Time.getDay();/*获取星期数*/var oHours=Time.getHours();/*获取小时*/var oMinutes=Time.getMinutes();/*获取分钟*/var oSec=Time.getSeconds();/*获取秒*/if(oWeek=5)oWeek=星期五if(oWeek=0)oWeek=星期日if(oWeek=1)oWeek=星期一if(oWeek=2)oWeek=星期二11if(oWeek=3)oWeek=星期三if(oWe

16、ek=4)oWeek=星期四if(oWeek=6)oWeek=星期六var str=oYear+年+oMonth+月+oDate+日+oWeek+oHours+:+oTwo(oMinutes)+:+oTwo(oSec)var oBox=document.getElementById(wrap);oBox.innerHTML=str;/*以中文格式输出 日期字符串*/var my=new Date();function showc()var k=1;var j=1;var today;var tomonth;var theday=1;/日期var max;var temp;var tempday

17、;/这个月第一天的星期document.write(+my.getFullYear()+-+(my.getMonth()+1)+);document.write();document.write();document.write(Sun);document.write(Mon);document.write(Tue);document.write(Wed);document.write(Thu);document.write(Fri);document.write(Sat);document.write();temp=my.getDate();my.setDate(1);/document.w

18、rite(my.getDate();tempday=my.getDay();/返回第一天是星期几my.setDate(temp);today=my.getDay();/返回现在星期几switch(my.getMonth()+1)case 1:case 3:case 5:case 7:case 8:case 10:case 12:max=31;break;case 4:case 6:case 9:case 11:max=30;break;default:max=29;/这里没有考虑闰月！/document.write(max);for(k=0;k6;k+)13document.write();f

19、or(j=0;j=6;j+)document.write();if(j=(tempday)tempday=0;/设置为最小，相当于取消判断条件if(theday=max)document.write();if(theday=my.getDate()document.write(+theday+);else if(j=0)document.write(+theday+);elsedocument.write(theday+);theday+;document.write();document.write();document.write();showc();四、四、总结总结此次课程设计大约用了两

20、周，在这两周里，通过亲自动手实践对于 JavaScript，网页制作有了更加深刻的理解与认识。从一开始的无从下手到开始网页的整体构思，之后开始一步一步搭建，修改，在这整个过程中遇到过很多问题和困难。开始遇到困难的时候根本无从下手，处于一无所知的状态，但是后来通过老师同学的帮助和搜索网络资14料翻阅书籍等能够解决遇到的困难。等度过开头期，到中间阶段的时候，已经可以自己分析一些遇到的简单的问题了，也可以看出问题根源所在。最后 完成课程设计的时候，感觉很有成就感，同时也对于平时课堂上讲解的知识有了更深刻的认识，这种在课堂上学的东西可以亲手运用它来做出东西来的感觉让我体会到了真正的学以致用。在此次课程

21、设计中遇到的问题首先有网页页面宽度的尺寸问题，大小设置不合适就会导致整个页面错乱，还有就是网页放大时可以正常显示，但是窗口缩小时就会出现滑动滚动条出现空白的现象，通过查阅资料得知需要用 min-width 设置为页面最大的宽度，这样窗口缩小时就不会出现上述现象。之后就是块元素的格式大小位置设置的问题，在此网页中样式的设置运用的 css 样式表，所以有的时候会出现引用错误的问题。在做网页上方的跑马灯时，出现过函数引用错误和字符串的字数个数的不恰当错误。在做动态时钟时，一开始不能显示正确的中文格式，后通过 var str=oYear+年+oMonth+月+oDate+日+oWeek+oHours+:+oTwo(oMinutes)+:+oTwo(oSec)var oBox=document.getElementById(wrap);oBox.innerHTML=str;语句得以实现。再就是时钟显示当秒和分出现一位数时不能一 01,02 这样的格式显示，后来通过 if else 语句判断实现。做的过程中遇到的几个大方面的问题就是这些，通过这些问题让我收获了很多平时学习不到的东西。参考书目：参考书目：【1】贗青龙，郭永灿 网页设计与制作，清华大学出版社，北京，20015 年。【2】曾探 JavaScript 设计模式与开发实践，人民邮电出版社，北京，2012 年。