javascript课程设计报告(201501450229-周慧)

课程设计报告课程设计名称： 脚本开发技术 (JavaScript) 院系名称： 中印计算机软件学院学生姓名： 周慧 班 级： 15计算机科学与技术2班 学 号： 9 成 绩： 指导教师： 刘效伟 开课时间：2017-2018 学年第一学期在能力与知识结构方面，要求学生应具有扎实的专业和日语语言基础，熟练掌握日语听、说、读、写、译的基本技能；了解日本社会及日本文化等方面的基本知识，熟悉日本国情，具有一定的日本人文知识及运用这些知识与日本人进行交流的能力。目录一、课程设计概要2（一）设计目的：2（二）开发环境：2（三）开发技术：2二、网站总体设计2三、实现部分4（一）网页结构：4（二）网页展示：8（三）网页行为的实现方案：9四、总结13参考书目：14一、 课程设计概要（一）设计目的：课程设计的目的在于培养学生综合运用所学的关于网页设计与制作、JavaScript编程等方面的知识，独立解决网页设计与制作中的问题。使学生通过此次课程设计，熟悉并掌握网页设计与制作方面的技能，掌握动态网页设计与制作的流程和方法，能够综合运用JavaScript、HTML、CSS实现网页前台效果。（二）开发环境：Hbuilder编辑器，谷歌浏览器（三）开发技术：HTML，css，JavaScript脚本语言二、 网站总体设计此次课程设计做的是一个“JavaScript学习天地”网站的主页面，主要实现了分类导航，搜索，跑马灯字样，动态时钟，滚动广告，日历等网页功能。打开网页，首先映入眼帘的是网页的头部，即为此网页的导航栏部分。头部导航栏包含了整个网站的页面名称，每个页面名称都附上了相应页面的链接地址，当鼠标略过每个页面名称时，会有一个背景色加深的特效，同时鼠标变为一个小手的标志，当点击某个页面名称时就会跳转到相应的页面上。除此之外，在导航栏的右面还添加了一个搜索框，在搜索框里输入想要搜索的内容，之后点击搜索框后面的搜索按钮就可以在此网站搜索到相应内容。在导航栏的左下部分，做了一个滚动出现“欢迎进入JavaScript学习天地”字样的跑马灯特效，同时也使网页的title具有同样的效果。跑马灯的右面对应部分是一个动态时钟，显示当前日期和时间。在导航栏与页面尾部之间的就是此网页的主体部分。主体部分也是大致分为了三个板块，分别为top，center，yemian三部分。首先top板块是对于当前页面的一个整体的大分类，从学习方向，科目分类，学习类型三个方向分别导航，让用户可以一次性实现精准学习内容的选择。此网页页面显示 的是关于JavaScript的全部科目全部类型的学习内容，所以是三个方向是定位在了JavaScript，全部，全部上面，所以显示的时候是黑色背景白色文字的效果，而当鼠标划过其它选项时相应文字会变为红色，点击时就会筛选出相应的内容。center中的内容为当前页面的全部的学习菜单内容，对于此菜单也做了一个小的分类，即按照学习内容的热度和更新日期做了分类，分为了“最热”和“最新”两种类型，用户可以根据自己的需求进行选择，当前页面定位在了“最热”上面，鼠标划过时会有和之前一样的效果出现。接下来就是学习菜单的内容，每门课程的封面都与课程内容相对应，同时，在每个课程封面下方都有课程名称和当前观看人数，课程时长，难易程度等简单的介绍，用户可根据自己的需求进行选择，每个课程封面都链接了对应课程的内容，点击即可跳转到相应课程。在center的最底部是一个页面选择菜单，因为当前页面为第一页即首页，所以首页和上一页定位，鼠标点击无法实现跳转，数字1背景色为红色，字体颜色为白色，表示当前所处页面，鼠标划过其它页面数字 时有跟前面一样的效果，点击某页即可跳转到相应页面。以上为网页主体的大致功能介绍。日历一般离不开表格，通常都使用表格装载指定月的日期等信息。所以，要编写JS日历，首先必须解决的问题是表格的行与列问题。列是固定的，七列，因为一周有七天。行需要动态计算，因为，每一个月的第一天是星期几是一个变数，因而第一天在表格中的第几个单元也就跟着变化，同时，每个月的总天数不一致也影响着各个月对表格行数的需要量。考虑到闰年问题会影响二月份的天数，我们先编写一个判断闰年的自编函数：function is_leap(year) return (year%100=0?res=(year%400=0?1:0):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取得，返回的值从0到6，0表示星期一，1表示星期二，2表示星期三，其余依此类推。代码如下（假设要处理的时间为2008年3月）： n1str=new Date(2008,3,1); firstday=n1str.getDay();有了月总天数和该月第一天是星期几这两个已知条件，就可以解决表格所需行数问题：（当前月天数+第一天是星期几的数值）除以七。表格函数需要整数，因此，我们使用Math.ceil来处理：tr_str=Math.ceil(m_daysmnow + firstday)/7);表格中的tr标签实际上代表表格的行，因此变量tr_str是我们往下写表格的重要依据。使用两个for语句嵌套起来实现：外层for语句写行，内层for语句写单元格。for(i=0;i<tr_str;i+) /外层for语句 - tr标签 document.write("<tr>"); for(k=0;k<7;k+) /内层for语句 - td标签 idx=i*7+k; /表格单元的自然序号 date_str=idx-firstday+1; /计算日期 /这里是处理有效日期代码 /内层for语句结束 document.write("</tr>"); /外层for语句结束单元格的自然序号是否代表有效日期非常关键，为此必须加入一个过滤机制：仅打印有效的日期。有效的日期大于0小于小于等于处理月的总天数。三、 实现部分在 网页底部有一个footer区，主要作用为显示合作网站的名称及跳转，最底部是声明网页版权的作用。（一）网页结构： 此网页主要是依靠块与块的包裹和连接来实现的。首先导航栏是在header里面的，header里面定义了一个为content的块，content里面又定义了是三个小块分别包裹logo图标，导航列表，搜索栏。具体实现代码为<header id="header"><div class="content"><h1 class="logo"></h1><nav class="link"><ul><li><a href="index.html">首页</a></li><li class="active"><a href="#">视频教程</a></li><li><a href="#">社区问答</a></li><li><a href="#">技术文章</a></li><li><a href="#">手册下载</a></li><li><a href="#">工具下载</a></li><li><a href="#">类库下载</a></li></ul><div id="search"><div class="center"><input type="text" class="inp" placeholder="请输入想搜索的内容" /><button>搜索</button></div></div></nav></div></header>网页中间也时主体部分又分了三个 大部分top，center，footer。Top部分为大菜单部分，代码为<nav id="top"><span class="hd">方向：</span><div class="field"><ul><li><a href="#">全部</a></li><li class="active"><b href="#">JavsScript</b></li><li><a href="#">Html/css</a></li></ul></div></nav>先做好了一个块之后，在此基础上修改之后成为后两个，这样 就形成了主体部分的大导航栏部分。Center部分为包裹学习内容的块，主要是热度分类，学习内容展示介绍，页面菜单。具体代码如下：<div id="center"><div class="fenlei"><ul><li class="hot">最热</li><li><a href="#">最新</a></li></ul></div> <!-/学习资料类型所在 的块区域-><figure><img src="img/1.jpg" alt="" /><figcaption><strong class="title">独孤九贱(6)_jQuery视频教程</strong><div class="info"><span>16057人在看</span><em class="ks">78课时</em><div class="type">中级</div></div></figcaption>/figure> /这是一个学习内容的展示区域块下面是页面菜单的代码：div class="yiemian"><ul><li>首页</li><li>上一页</li><li class="d1"><a href="#">1</a></li><li><a href="#">2</a></li><li><a href="#">3</a></li><li><a href="#">4</a></li><li><a href="#">下一页</a></li><li><a href="#">尾页</a></li></ul></div></div><!- /翻页处所在的区域块，在一个块里放了list列表->最后的Footer区是相关网站的展示与跳转，还有相关版权的声明，代码如下：<div id="footer"><div class="center"><div class="wl"><ul><li><a href="#">网站首页</a><