javaWeb前端网页课程设计的实现——【JAVA篇】

---

环境配置

编译器：myeclise-2018.12.0
jdk：JDK1.6版本

一、web课程设计总体概述

基于java Web的课程设计，是本人在大二时期学习java的时候所完成的期末课程设计，该课程设计的的内容主要是一个web网页，web页面的首页如下所示。该主页从上往下看可分为“头、脖子、身体、尾”四部分：

1.头部

头部主要用来显示一些显眼的标题，如：校徽和标题等。

2.脖子

脖子部分就是“头”下面的蓝色条，可以在蓝色条中添加一些常用的功能按钮，比如：

1. 百度网页按钮；
2. 小视频按钮；
3. 男生宿舍按钮
4. 贪吃蛇游戏按钮
5. 问卷调查按钮
6. 用户注册按钮
7. DOM操作节点按钮
8. 省市联动按钮
9. 列表的左右移动按钮
10. 全选和反选测试按钮

以上功能在本次课程设计中都已实现，可点击这些按钮进行查看。

3.身体

身体部分又分为“左、中、右”三部分：

1. 左边包括：时钟和本班的学生列表，学生列表的形式为“学号.姓名”；时钟是以动态获取电脑系统时钟的方式实现，不必担心时钟为不准。
2. 身体的中间部位是一个课件压缩包的下载功能，可点击下面的各个章节内容的文字进行下载。
3. 身体的右边是音乐播放器和日历功能，音乐播放器内我们只添加了两首歌：薛之谦的《动物世界》和迪迦奥特曼主题曲《奇迹再现》，音乐播放器可实现单曲循环、顺序播放、播放/暂停，上一曲/下一曲等功能，当歌曲进行切换时播放器内的图片也会随之切换。电子日历功能是显示今天的日期，也是跟随电脑系统进行设置的。

4.尾部

尾部可以写一些版权归属的声明以及联系方式和联系地址，也可以添加一些超链接作为友情链接。

三、具体功能

接下来将会对具体的功能进行详细介绍：

1.时钟

时钟的功能实现主要是通过每隔一秒获取一次系统时间来实现，代码如下：

function getCurrentTime(){
   
	var date = new Date();
	var h = date.getHours();
	var m = date.getMinutes();
	var s = date.getSeconds();
	
	if(h<10) h = "0"+h;  //以确保0~9时也显示成两位数
	if(m<10) m = "0"+m;  //以确保0~9分钟也显示成两位数
	if(s<10) s = "0"+s;  //以确保0~9秒也显示成两位数
	
	hour.innerHTML = h;
	minute.innerHTML = m;
	second.innerHTML = s;
}
//每秒更新一次时间
setInterval("getCurrentTime()", 1000);

2.超链接到其他页面

脖子部分的蓝色条内的超链接是通过tr和td标签，为文字加上“href”属性来实现，代码如下（示例）：

<tr>
			<td><a class="a" href="https://www.baidu.com" target="_blank">百度</a></td>
			<td><a class="a" href="../vedio_player/vedio_player.html" target="_blank">小视频</a></td>
			<td><a class="a" href="../table/table.html" target="_blank">男生宿舍表格</a></td>
			<td><a class="a" href="../snake/snake.ht