文章目录
- 环境配置
- 一、web课程设计总体概述
- 1.头部
- 2.脖子
- 3.身体
- 4.尾部
- 三、具体功能
- 1.时钟
- 2.超链接到其他页面
- 3.压缩包下载
- 4.音乐播放器
- 5.视频播放器
- 6.其他功能
- 三、总结
环境配置
编译器：myeclise-2018.12.0
jdk：JDK1.6版本
一、web课程设计总体概述
基于java Web的课程设计，是本人在大二时期学习java的时候所完成的期末课程设计，该课程设计的的内容主要是一个web网页，web页面的首页如下所示。该主页从上往下看可分为“头、脖子、身体、尾”四部分：
1.头部
头部主要用来显示一些显眼的标题，如：校徽和标题等。
2.脖子
脖子部分就是“头”下面的蓝色条，可以在蓝色条中添加一些常用的功能按钮，比如：
- 百度网页按钮；
- 小视频按钮；
- 男生宿舍按钮
- 贪吃蛇游戏按钮
- 问卷调查按钮
- 用户注册按钮
- DOM操作节点按钮
- 省市联动按钮
- 列表的左右移动按钮
- 全选和反选测试按钮
以上功能在本次课程设计中都已实现，可点击这些按钮进行查看。
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" 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.html" target="_blank">贪吃蛇游戏</a></td>
<td><a class="a" href="../examine/examine.html" target="_blank">问卷调查</a></td>
<td><a class="a" href="../注册页面/zhuce.html" target="_blank">用户注册</a></td>
<td><a class="a" href="../DOM/DOM.html" target="_blank" >DOM操作节点</a></td>
<td><a class="a" href="../省市联动/ssld.html" target="_blank">省市联动</a></td>
<td><a class="a" href="../other/左右移动.html" target="_blank">列表左右移动</a></td>
<td><a class="a" href="../other/全选全不选.html" target="_blank">全选反选效果</a></td>
</tr>
3.压缩包下载
压缩包下载方式是通过给标签添加“href”属性，使其可以链接到压缩包文件，当我们点击标签中的文字时，会弹出压缩包的下载框，这就是压缩包的下载原理。以下为压缩包下载部分的代码：
<ul>
<li><a class="b" href="../rar/HTML.rar">第一讲.HTML</a></li>
<li><a class="b" href="../rar/CSS.rar">第二讲.CSS</a></li>
<li><a class="b" href="../rar/JavaScript.rar">第三讲.JavaScript</a></li>
<li><a class="b" href="../rar/BOM&DOM.rar">第四讲.BOM&DOM</a></li>
<li><a class="b" href="../rar/XML.rar">第五讲.XML</a></li>
</ul>
压缩包下载实现效果图：
4.音乐播放器
音乐播放器的实现相对复杂，其包含script、js和html三个文件，html代码如下所示，其内容包含音乐图片，单曲循环和顺序播放按钮，上一曲/下一曲，播放/暂停按钮。按钮的点击效果可通过js来实现。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>音乐</title>
<link rel="stylesheet" href="music_player.css">
</head>
<body>
<h3>音乐播放器</h3>
<hr />
<!-- 模仿CD样式圆盘 -->
<div id="CDimage">
<img src="../image/薛之谦.jpg" id="imgID" width="180px" height="130px">
</div>
<div>
<button id="but1" onclick="recycle()" class="bofang">单曲循环</button>
<button id="but2" onclick="cuntinue()" class="bofang">顺序播放</button>
</div>
<!-- 显示歌曲名称 -->
<div>
正在播放：<span id="title" style="color: blue">动物世界—薛之谦</span>
<!-- 音乐文件的载入 -->
<br>
<audio id="audio" src="../music/动物世界.mp3" preload="auto" controls autoplay="autoplay">
</audio>
</div>
<!-- 音乐播放器按钮 -->
<div>
<button onclick="lastMusic()" class="buttClass">
<img src="../image/上一曲.jpg" width="40px" height="30px">
</button>
<button id="toggleBtn" onclick="toggleMusic()" class="buttClass">
<img src="../image/播放.jpg" width="30px" height="30px">
</button>
<button onclick="nextMusic()" class="buttClass">
<img src="../image/下一曲.jpg" width="40px" height="30px">
</button>
</div>
<script src="music_player.js"></script>
</body>
</html>
音乐播放器的效果图：
5.视频播放器
视频播放器页面为大家准备了三个测试视频，视频播放器的前端页面可由html实现，具体代码如下：
<div id="listID">
<ul>
<li style="color: black;">
<h3>播放列表</h3>
<!-- 水平线 -->
<hr size="10px" noshade/>
</li>
<li onclick="play1()">
<img class="imgClass" alt="复仇者联盟4预告1" src="../image/预告1.jpg">
<span>复仇者联盟4预告1</span>
<hr class="hrClass"/>
</li>
<li onclick="play2()">
<img class="imgClass" alt="复仇者联盟4预告2" src="../image/预告2.jpg">
<span>复仇者联盟4预告2</span>
<hr class="hrClass"/>
</li>
<li onclick="play3()">
<img class="imgClass" alt="复仇者联盟4预告3" src="../image/预告3.jpg">
<span>复仇者联盟4预告3</span>
<hr size="10px" noshade/>
</li>
</ul>
</div>
在这里只准备了三个视频，用户可以点击任何一个视频进行播放，实现效果如下：
6.其他功能
- 贪吃蛇游戏：该游戏可通过上下左右来控制贪吃蛇进行移动，当蛇撞到墙的时候，会进行弹窗提示游戏结束，实现效果如下：
- 问卷调查：为实现问卷调查，特意找到一个问卷调查模板，将其在html中实现，实现效果如下
- 除了上述功能之外，本设计还包含：用户注册页面、DOM节点操作、省市联动、列表的左右移动、全选和反选功能。实现效果如下：
三、总结
本次课程设计包含的内容比较广泛，包含节点操作、视频播放、音乐播放、电子日历和电子时钟等。有些设计只是为了实现某些功能而做的案例，可作为具体应用时的参考。全部的课程设计源代码可在https://download.csdn/download/qq_46412606/85757051中进行下载。
更多推荐
javaWeb前端网页课程设计的实现——【JAVA篇】
发布评论