JavaScript专业课程设计方案报告.docx

课程设计汇报

课程设计名称： 脚本开发技术 (JavaScript)
院系名称： 中印计算机软件学院
学生姓名： 周慧
班 级： 15计算机科学和技术2班
学 号： 01450229
成 绩：
指导老师： 刘效伟
开课时间：- 年第一学期

目录

一、 课程设计概要 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日历，首先必需处理问题是表格行和列问题。列是固定，七列，因为一周有七天。行需要动态计算，因为，每30天第一天是星期几是一个变数，所以第一天在表格中第多个单元也就跟着改变，同时，每个月总天数不一致也影响着各个月对表格行数需要量。考虑到闰年问题会影响二月份天数，我们先编写一个判定闰年自编函数：

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_days[x]。其中，x为0至11自然数。使用Date函数getDay取得，返回值从0到6，0表示星期一，1表示星期二，2表示星期三，其它依这类推。代码以下（假设要处理时间为3月）：

n1str=new Date(,3,1);
firstday=n1str.getDay();

有了月总天数和该月第一天是星期几这两个已知条件，就能够处理表格所需行数问题：（目前月天数+第一天是星期几数值）除以七。表格函数需要整数，所以，我们使用Math.ceil来处理：

tr_str=Math.ceil((m_days[mnow] + 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>
</li>
<li>
<a href="#">PHP视频</a>
</li>
<li>
<a href="#">PHP实战</a>
</li>
<li>
<a href="#">PHP代码</a>
</li>
<li>
<a href="#">PHP手册</a>
</li>
<li>
<a href="#">词条</a>
</li>
<li>
<a href="#">手记</a>
</li>
</ul>
</div>
<div class="bottom">
<div class="w">JavaScript学习天地：独家原创，永久无偿在线视频教程，JavaScript技术学习阵地 Copyright - .cn/ All Rights Reserved | 皖B2-0071-9</div>

</div>
</div>
<!--//页面底部区域，利用了通导航栏类似原理-->
（二）网页展示：
头部导航栏：

图 3. 1 头部导航

主体大菜单栏：

图 3. 2 主体菜单

主体学习内容区：

图 3. 3 学习区
尾部区：

图 3. 4 尾部

（三）网页行为实现方案：
网页样式设计关键是依靠了css样式表实现，跑马灯行为和动态时钟行为实现时依靠了JavaScript 函数，数组，循环判定语句来实现。
跑马灯字样实现是经过函数功效来设置字符串以后获取字符串过程，设置输出队列为字符串第一个字和字符串最终一个字，info = info + info.substring(0, 1);
info = 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.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.getMonth() + 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 = '星期二'
}
if(oWeek == 3) {
oWeek = '星期三'
}
if(oWeek == 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;

} /*以汉字格式输出 日期字符串*/
<script language="javascript">
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;//这个月第一天星期
document.write ("<b>" + my.getFullYear() + "-" + (my.getMonth()+1) + "</b>");
document.write ("<table border='1' width='150' height='158'>");
document.write ("<tr>");
document.write ("<td height='23' width='39'><font color='red'>Sun</font></td>");
document.write ("<td height='23' width='39'>Mon</td>");
document.write ("<td height='23' width='39'>Tue</td>");
document.write ("<td height='23' width='39'>Wed</td>");
document.write ("<td height='23' width='39'>Thu</td>");
document.write ("<td height='23' width='39'>Fri</td>");
document.write ("<td height='23' width='39'>Sat</td>");
document.write ("</tr>");
temp=my.getDate();
my.setDate(1);
//document.write (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;k<6;k++) {
document.write ("<tr>");
for(j=0;j<=6;j++) {
document.write ("<td height='23' width='39'>");
if(j>=(tempday)) {
tempday=0;//设置为最小，相当于取消判定条件
if(theday<=max) {
document.write ("<a title=" + my.getFullYear() + "-" + (my.getMonth()+1) + "-" +theday + " target='_blank' href=detail.asp?date=" + theday + ">");
if(theday==my.getDate())
document.write ("<font color='green'>[" + theday + "]</font></a>");
else if(j==0)
document.write ("<font color='red'>" + theday + "</font></a>");
else
document.write (theday + "</a>");
theday++;
}
}
document.write ("</td>");
}
document.write ("</tr>");
}
document.write ("</table>");
}

showc();
</script>
</div>

四、 总结
此次课程设计大约用了两周，在这两周里，经过亲自动手实践对于JavaScript，网页制作有了愈加深刻了解和认识。从一开始无从下手到开始网页整体构思，以后开始一步一步搭建，修改，在这整个过程中碰到过很多问题和困难。开始碰到困难时候根本无从下手，处于一无所知状态，不过以后经过老师同学帮助和搜索网络资料翻阅书籍等能够处理碰到困难。等度过开头期，到中间阶段时候，已经能够自己分析部分碰到简单问题了，也能够看出问题根源所在。最终 完成课程设计时候，感觉很有成就感，同时也对于平时课堂上讲解知识有了更深刻认识，这种在课堂上学东西能够亲手利用它来做出东西来感觉让我体会到了真正学以致用。在此次课程设计中碰到问题首先有网页页面宽度尺寸问题，大小设置不适宜就会造成整个页面错乱，还有就是网页放大时能够正常显示，不过窗口缩小时就会出现滑动滚动条出现空白现象，经过查阅资料得悉需要用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】 贗青龙，郭永灿 《网页设计和制作》，清华大学出版社，北京，5年。
【2】 曾探 《JavaScript设计模式和开发实践》，人民邮电出版社，北京，。