应用软件综合课程设计报告.doc

北京化工大学北方学院 课程设计报告 课程名称 应用软件综合课程设计 设计题目 菜单 学 号 120240035 姓 名 黄乾 指导教师 韩海花 设计时间2015.9.21——2015.10.16 2015年 10 月 16 日 引言（简要说明设计题目的目的、意义、内容、主要任务等 目的 随着当前技术的不断发展，的需求也开始变得多样起来，，以B/S架构的Web火热起来，的当然就是我们能开到的，此次的课程设计，能够使我们掌握Web页面中的基本编程知识，熟悉网页的构成，能为以后继续深入学习打下基础。 意义 Web的流行，人们都去学习网页开发语言，JavaScript又是网页编程中必不可少的一部分，通过此次课程设计，我们能够更加深入的掌握JavaScript的知识，了解的，理解其内涵。 JavaScript的学习，能为以后的学习和生活有很大帮助，而且在题目中遇到的问题，也能够使我们提高解决问题的能力，我们的学习能力和动手能力 内容 课程设计的主要内容是使用JavaScript的技术来实现水平导航下拉菜单，支持3级菜单主要任务 课程设计的主要任务时使用JavaScript实现三种菜单特效，这里我选择了）水平导航下拉菜单，支持3级菜单）） 正文（课程设计的主要内容，包括实验与观测方法和结果、仪器设备、、编程原理、数据处理、设计说明与依据、加工整理和图表、形成的论点和导出的结论等。正文内容必须实事求是、客观真切、准确完备、合乎逻辑、层次分明、语言流畅、结构严谨，符合各学科、专业的有关要求。 课题描述 使用JavaScript的技术来实现 需求描述 使用JavaScript的技术来实现）水平导航下拉菜单，支持3级菜单））通过JavaScript，使得页面展现出动态的功能，美化。 ，水平导航下拉菜单支持菜单，即页面上有一个横的导航条，导航条几个菜单项菜单项下有若干个菜单项，在某个项之下又有若干个菜单项 树形结构菜单即在若干个菜单项，有“+”“-”等标志，点击之后可以将其一级目录展开，各个目录层有虚线显示出目录结构 滑动菜单即在页面上的个菜单项，鼠标的划入划出等动作，实现各个目录的展开，折叠效果。 需求分析 实现水平导航下拉菜单的功能时，使用JavaScript的循环来取用元素否则一旦菜单项多了之后，变得冗长，难以维护，JavaScript取元素，可以使用getElementById或者getElementsByName等方法，这就要求我们在为元素起名时要有统一的命名 同时为了减少JavaScript代码与页面的耦合度，不采用在标签中使用事件的方式，如div onclick=”XXXX()”/div而是采用JavaScript自执行，或事件绑定等方式，这样可以在最大程度上保持HTML代码的整洁而且减少了与JavaScript代码的耦合。 设计 HTML的基本结构， html head script type=text/javascript /script /head body /body /html 其中，script/script标签不一定在head标签中，有时根据需要可以放在body内此次菜单的设计，的思想就是html的元素，为添加各种事件，以达到最终效果。代码代码部分） Menu部分script type=text/javascript function navHover() { if (!document.getElementById) { return }; var nav_ul = document.getElementById(nav-ul); for (var i = 0; i nav_ul.childNodes.length; i++) { // 获得ul下的子节点 var node = nav_ul.childNodes[i]; if (node.nodeName == LI) { // 鼠标划入事件 node.onmouseover = function () { this.className = hover;