1、 课程设计报告 课程设计名称： 脚本开发技术 (JavaScript) 院 系 名 称 ： 学 生 姓 名 ： 班 级 ： 学 号 ： 成 绩 ： 指 导 教 师 ： 开 课 时 间 ： 2 017 -20 18 学年第一学期 目录目录 一、一、 课程设计概要课程设计概要 . 2 （一）设计目的： 2 （二）开发环境： 2 （三）开发技术： 2 二、二、 网站总体设计网站总体设计 2 三、三、 实现部分实现部分 4 （一）网页结构： 4 （二）网页展示： 8 （三）网页行为的实现方案：. 9 四、四、 总结总结 13 参考书目：参考书目： 14 2 一、一、 课程设计概要课程设计概要 （一）设
2、计目的： 课程设计的目的在于培养学生综合运用所学的关于网页设计与制作、JavaScript 编程等方面的知识，独立解决网页设计与制作中的问题。使学生通过此次课程设计，熟 悉并掌握网页设计与制作方面的技能，掌握动态网页设计与制作的流程和方法，能够综 合运用 JavaScript、HTML、CSS 实现网页前台效果。 （二）开发环境： Hbuilder 编辑器，谷歌浏览器 （三）开发技术： HTML，css，JavaScript 脚本语言 二、二、 网站总体设计网站总体设计 此次课程设计做的是一个“JavaScript 学习天地”网站的主页面，主要实现了分类 导航，搜索，跑马灯字样，动态时钟，滚动
3、广告，日历等网页功能。 打开网页，首先映入眼帘的是网页的头部，即为此网页的导航栏部分。头部导航栏 包含了整个网站的页面名称，每个页面名称都附上了相应页面的链接地址，当鼠标略过 每个页面名称时，会有一个背景色加深的特效，同时鼠标变为一个小手的标志，当点击 某个页面名称时就会跳转到相应的页面上。除此之外，在导航栏的右面还添加了一个搜 索框，在搜索框里输入想要搜索的内容，之后点击搜索框后面的搜索按钮就可以在此网 站搜索到相应内容。 在导航栏的左下部分，做了一个滚动出现“欢迎进入 JavaScript 学习天地”字样 的跑马灯特效，同时也使网页的 title 具有同样的效果。跑马灯的右面对应部分是一个
4、 动态时钟，显示当前日期和时间。在导航栏与页面尾部之间的就是此网页的主体部分。 主体部分也是大致分为了三个板块，分别为 top，center，yemian 三部分。首先 top 板 块是对于当前页面的一个整体的大分类，从学习方向，科目分类，学习类型三个方向分 别导航，让用户可以一次性实现精准学习内容的选择。此网页页面显示 的是关于 JavaScript的全部科目全部类型的学习内容， 所以是三个方向是定位在了JavaScript， 全部，全部上面，所以显示的时候是黑色背景白色文字的效果，而当鼠标划过其它选项 时相应文字会变为红色， 点击时就会筛选出相应的内容。 center 中的内容为当前页面的
5、 全部的学习菜单内容，对于此菜单也做了一个小的分类，即按照学习内容的热度和更新 3 日期做了分类，分为了“最热”和“最新”两种类型，用户可以根据自己的需求进行选 择，当前页面定位在了“最热”上面，鼠标划过时会有和之前一样的效果出现。接下来 就是学习菜单的内容，每门课程的封面都与课程内容相对应，同时，在每个课程封面下 方都有课程名称和当前观看人数，课程时长，难易程度等简单的介绍，用户可根据自己 的需求进行选择，每个课程封面都链接了对应课程的内容，点击即可跳转到相应课程。 在 center 的最底部是一个页面选择菜单，因为当前页面为第一页即首页，所以首页和 上一页定位，鼠标点击无法实现跳转，数字
6、1 背景色为红色，字体颜色为白色，表示当 前所处页面，鼠标划过其它页面数字 时有跟前面一样的效果，点击某页即可跳转到相 应页面。以上为网页主体的大致功能介绍。 日历一般离不开表格，通常都使用表格装载指定月的日期等信息。所以，要编写 JS 日历， 首先必须解决的问题是表格的行与列问题。 列是固定的， 七列， 因为一周有七天。 行需要动态计算，因为，每一个月的第一天是星期几是一个变数，因而第一天在表格中 的第几个单元也就跟着变化，同时，每个月的总天数不一致也影响着各个月对表格行数 的需要量。 考虑到闰年问题会影响二月份的天数， 我们先编写一个判断闰年的自编函数： function is_leap(year) return (year%100=0?res=(year%400=0?1:0):res=(year%4=0?1:0); 接着定义一个包含十二个月在内的月份总天数的数组： m_
