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

• 环境配置
• 一、web课程设计总体概述
• • 1.头部
  • 2.脖子
  • 3.身体
  • 4.尾部
• 三、具体功能
• • 1.时钟
  • 2.超链接到其他页面
  • 3.压缩包下载
  • 4.音乐播放器
  • 5.视频播放器
  • 6.其他功能
• 三、总结

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

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

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

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

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

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

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

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

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

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

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

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);

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

			百度
			小视频
			男生宿舍表格
			贪吃蛇游戏
			问卷调查
			用户注册
			DOM操作节点
			省市联动
			列表左右移动
			全选反选效果
		

压缩包下载方式是通过给标签添加“href”属性，使其可以链接到压缩包文件，当我们点击标签中的文字时，会弹出压缩包的下载框，这就是压缩包的下载原理。以下为压缩包下载部分的代码：

	
第一讲.HTML
	
第二讲.CSS
	
第三讲.JavaScript
	
第四讲.BOM&DOM
	
第五讲.XML

压缩包下载实现效果图：

音乐播放器的实现相对复杂，其包含script、js和html三个文件，html代码如下所示，其内容包含音乐图片，单曲循环和顺序播放按钮，上一曲/下一曲，播放/暂停按钮。按钮的点击效果可通过js来实现。

	音乐播放器
	

	
	

	


	
	

	单曲循环
	顺序播放
	
	
	

	正在播放：动物世界—薛之谦
	
	

	
	
	
	

	
		

 
	
	
		

 
	
	
		

 
	
	
	

音乐播放器的效果图：

视频播放器页面为大家准备了三个测试视频，视频播放器的前端页面可由html实现，具体代码如下：

	

		

			播放列表
			
			

		
		

			


			复仇者联盟4预告1
			

		
		

			


			复仇者联盟4预告2
			

		
		

			


			复仇者联盟4预告3
			

		
	
	

在这里只准备了三个视频，用户可以点击任何一个视频进行播放，实现效果如下：

1. 贪吃蛇游戏：该游戏可通过上下左右来控制贪吃蛇进行移动，当蛇撞到墙的时候，会进行弹窗提示游戏结束，实现效果如下：
   
2. 问卷调查：为实现问卷调查，特意找到一个问卷调查模板，将其在html中实现，实现效果如下
   
3. 除了上述功能之外，本设计还包含：用户注册页面、DOM节点操作、省市联动、列表的左右移动、全选和反选功能。实现效果如下：
   
   
   
   
   

本次课程设计包含的内容比较广泛，包含节点操作、视频播放、音乐播放、电子日历和电子时钟等。有些设计只是为了实现某些功能而做的案例，可作为具体应用时的参考。全部的课程设计源代码可在https://download.csdn.net/download/qq_46412606/85757051中进行下载。