JavaScript基础课程设计

1、脚本开发技术课程设计报告课程设计名称：中印计算机软件学院网站系部名称： 中印计算机软件院 学生姓名： 班 级： 学 号： 成 绩： 指导教师： 李 玉 杰 开课时间：2017-2018 学年第一学期目录一概述41.1课程设计的目的42.1课程设计的开发环境43.1课程设计的开发技术4二 网站总体方案设计62.1整体设计思路62.2框架的整体思路62.3主要特点7三 实现部分83.1 网页结构83.2 网页的展览：83.3网页行为的实现：9 摘要本次网页设计实践的主题是“学院展览网站”，在网站设计过程中，通过通过DIV+CSS布局，同时引入Bootstrap的栅格布局对页面进行调整。在页面中添加

2、“分时问候”、“图片轮播”、“二级菜单”、“广告浮动”、“无缝滚动”等JavaScript特效。通过对该网站的编写与制作对JavaScript这门语言有了新的学习和理解。一 概述1.1课程设计目的大家都知道学校的主页是学校在Internet上展示形象的门户，是学校开展电子推广的基地，是学校在网上的"家"，设计制作一个优秀的网站是建设学校成功迈向互联网的重要步骤。在当今互联网时代，一个学校没有自己的网站就像一个人没有住址，一个商店没有门脸。随着经济全球化和电子商务经济的到来，学校如果还固守于传统模式则必定不能再适应经济全球化的趋势，学校网站优化是一个不可回避的现实。一、竞争的

3、需要。国际互联网的用户在迅猛地增长。这增长速度是全世界范围的普遍现象。在美国，欧洲，港澳及其它许多国家,网站和电子信箱系统已经成为世界各国各所不可缺少的重要组成部分。二、网站建设可以使学校在网上宣传更加生动形象。尽管你的学校非常好,但人们总是无法看到它的样子，产品画册虽然非常好，但它是静止的也没有人能想象到学校最真实的状态是什么样子的。如果以上因素对学生的影响真的非常重要的话,那么学校就应该利用互联网来介绍学校了，因为WWW技术可以很简便地为学校网站介绍加入声音、图形、动画甚至影像，这些不断涌现出来的多媒体技术已让网络世界变得丰富多彩。三、可以迅速树立学校品牌形象。今天，国际互联网络已成为未来

4、生活的代名词，要显示学校的实力，提升学校形象，没有什么比在学校信封、学校宣传单及各种公众能看得到的东西印上自己公司独有的网络地址和专用的电子邮件地址更有说服力了。这样学校便加简单的为自己做好了宣传。2.1课程设计的开发环境网站开发使用的环境是sublime text3。该工具对于javascript的编写具有诸多的优点。可以快速注释在编写网站的过程中，代码的注释有利于结构的清晰、思路的流畅，同时对于日后代码的维护和后期的修改都有着重要的作用。自动代码补全在编写一个学校前台官网，其中代码量较多，外加上对知识点的不熟悉。自动代码补全功能对于代码的编写作用显著。能够开始查找在整体过程中，查找的功能并

5、不是很特别，但是这个功能非常高效，能很快速的定位到关键的位置，方便其他代码的编写。缩略图定位这个功能是该工具特有的，在左侧编写js等代码，在右侧可以形成左侧的缩量图效果。这个功能能对代码有一个整体的观念，方便对项目工程的整体把握。快速打开文件各种快捷键的使用常常能有助于我们对功能的编写，同时，sublime text3能够右键打开文件夹能够快速定位到文件所在的文件夹。整个工程管理在代码的左侧我们能够清晰的看到所有的资源文件以及需要的代码文件，只需单击即可管理所有的项目文件，这对我们项目的管理是有利的。3.1课程设计的开发技术 此次使用的开发技术为基础的html、css、javascript、j

6、query、bootstrap等相关基础。HTML,超文本标记语言，标准通过标记语言下的一个应用，负责网站的整体结构。通过标签来展现不同的内容个容器。CSS，层叠样式表，通过它可以为页面的标签进行美化和修饰，增强网站的整体效果和页面的优化。Javascript，直译式脚本语言，给HTML网页增加动态功能。为网站增添动态交互能力和美观的特效。针对网站所使用的动态效果都是依靠js来进行实现的。Jquery，一段javascript代码块，对javascript的常用方法进行封装和简化，方便程序员编写和开发。Bootstrap，成熟的前端常用框架，针对前端常规能力和控件进行优化和补充，便于开发。二

7、网站总体方案设计2.1整体设计思路通过对原有网站和其他高校的研究，最新觉得使用“一栏式”开发，在一栏的基本上再通过div进行不同的细化和补充。就首页而言，主要包括头部、标题栏、轮转大图、一列的学校相关新闻、专题网站和尾部构成。首先对网页的整体设计有个全面的把握，然后在事无巨细的增添上去。网站总体包括网站首页、学校概况、教学工作、学校工作、教研科研、党团建设、就业工作、校企合作等八大部分。在此主要展示前五个部分。网页首页：主要展现的学校的整体风貌，对学校最新新闻和相关重要信息有了初步的介绍。学校概况：对学校进行相关的概况，其中包括学院简介、机构设置和现任领导进行相关说明。教学工作：主要通过表格和

8、分页组件对学校相关的教学工作进行浏览和说明。学校工作：使用列表的形式列举学校的重要工作，包括学校举办的相关活动。教研科研：这个栏目使用表单对教研科研调查表进行登录，然后进行相关信息的调查。2.2框架的整体思路1.首先进行相关内容的设计，构建草图。2.进行编码，构建相关网站内容原型，精准计算相关大小。3.搜集相关网站内容，充实网站。4.将内容使用所学的javascript知识合理的规划在网站中。5.测试代码，完成相关文档的编写。2.3主要特点网站总体设计方案明确，通过总体设计进行开发和编写。网站功能分工合理，通过二级菜单进行详细说明。网站色彩搭配适中，适合学校官网的使用。三 实现部分3.1 网页

9、结构网页结构设计清晰，网页内容明确。所有页面使用相同的网站的头部和尾部，使所有页面融洽的结合在一起。所有网页统一使用相同的页面结构，便于日后的管理与更改。3.2 网页的展览网站首页3.3网页行为的实现：网页使用的大量的javascript特效，其中包括实现时间及分时问候、二级菜单、滚动字幕、浮动广告、轮转图片、图片切换、无缝滚动、音乐播放、网页换肤、圆点动画网页加载特效等行为。时间及分时问候：二级菜单：滚动字幕：浮动广告：轮转图片：图片切换：无缝滚动：音乐播放：网页换肤：圆点动画网页加载特效：其中，列举部分代码：1.浮动广告:HTML部分<div id="floadAD&quo

10、t; class="floadAd"> <a class="close" href="javascript:void();" style="color: red">×关闭</a> <a class="item" target="_blank"> <img src="images/rczp.jpg" alt="首届党建文化节" /></a></div>

11、CSS部分<style> .floadAd position: absolute;z-index: 999900; display: none; .floadAd .item display: block; .floadAd .item img vertical-align: bottom; </style>Javascript部分<script type="text/javascript">FloatAd("#floadAD");/调用/广告漂浮窗口function FloatAd(selector) var obj

12、 = $(selector); if (obj.find(".item").length = 0) return;/如果没有内容，不执行 var windowHeight = $(window).height();/浏览器高度 var windowWidth = $(window).width();/浏览器宽度 var dirX = -1.5;/每次水平漂浮方向及距离(单位：px)，正数向右，负数向左，如果越大的话就会看起来越不流畅，但在某些需求下你可能会需要这种效果 var dirY = -1;/每次垂直漂浮方向及距离(单位：px)，正数向下，负数向上，如果越大的话就会看

13、起来越不流畅，但在某些需求下你可能会需要这种效果 var delay = 30;/定期执行的时间间隔，单位毫秒 obj.css( left: windowWidth / 2 - obj.width() / 2 + "px", top: windowHeight / 2 - obj.height() / 2 + "px" );/把元素设置成在页面中间 obj.show();/元素默认是隐藏的，避免上一句代码改变位置视觉突兀，改变位置后再显示出来 var handler = setInterval(move, delay);/定期执行，返回一个值，这个值可以

14、用来取消定期执行 obj.hover(function() /鼠标经过时暂停，离开时继续 clearInterval(handler);/取消定期执行 , function() handler = setInterval(move, delay); ); obj.find(".close").click(function() /绑定关闭按钮事件 close(); ); $(window).resize(function() /当改变窗口大小时，重新获取浏览器大小，以保证不会过界（飘出浏览器可视范围）或漂的范围小于新的大小 windowHeight = $(window).h

15、eight();/浏览器高度 windowWidth = $(window).width();/浏览器宽度 ); function move() /定期执行的函数，使元素移动 var currentPos = obj.position();/获取当前位置，这是JQuery的函数，具体见： var nextPosX = currentPos.left + dirX;/下一个水平位置 var nextPosY = currentPos.top + dirY;/下一个垂直位置 / if (nextPosX >= windowWidth - obj.width() /这一段是本站特有的需求，当漂

16、浮到右边时关闭漂浮窗口，如不需要可删除 / close(); / if (nextPosX <= 0 | nextPosX >= windowWidth - obj.width() /如果达到左边，或者达到右边，则改变为相反方向 dirX = dirX * -1;/改变方向 nextPosX = currentPos.left + dirX;/为了不过界，重新获取下一个位置 if (nextPosY <= 0 | nextPosY >= windowHeight - obj.height() - 5) /如果达到上边，或者达到下边，则改变为相反方向。 dirY = dirY * -1;/改变方向 nextPosY = currentPos.top + dirY;/为了不过界，重新获取下一个位置 obj.css( left: nextPosX + "px", top: nextPosY + "px" );/移动到下一个位置 function close() /停止漂浮，并销毁漂浮窗