音樂網(wǎng)站-計算機畢業(yè)設(shè)計源碼+LW文檔

的要求通過畢業(yè)設(shè)計來進一步鞏固和加強對所學(xué)知識和基本技能的訓(xùn)練，促進學(xué)生學(xué)習(xí)能力、調(diào)查研究能力、綜合分析能力、實踐能力和創(chuàng)新能力的培養(yǎng)。本系統(tǒng)需為用戶提供實現(xiàn)以下功能：

音樂網(wǎng)站網(wǎng)站包括前臺和后臺。

前臺：

音樂網(wǎng)站為用戶提供在線音樂推薦的服務(wù)，前臺用戶注冊后，查看和收聽需要的音樂。

會員未登錄前，瀏覽系統(tǒng)上的所有音樂信息，查看最新的音樂。通過音樂分類，查看分類對應(yīng)的音樂。

音樂信息一般包括音樂圖片，音樂描述和音樂信息。

會員使用本系統(tǒng)前，進行注冊，填寫個人信息。

會員通過搜索查找到音樂后，也可以收藏音樂，收聽后在線評論。

會員還可以查看音樂網(wǎng)站相關(guān)公告。

后臺：

系統(tǒng)公告管理

注冊會員管理

音樂類別管理

音樂管理

音樂評論管理

主要技術(shù)指標(biāo)與技術(shù)參數(shù)：

前臺使用Html、CSS、JavaScript開發(fā)，后臺使用Java的SSM框架，數(shù)據(jù)庫使用MySQL。開發(fā)工具使用Eclipse。

選題需要重點研究的關(guān)鍵問題及解決問題的思路選題需要研究的關(guān)鍵問題包括以下幾個方面

1. 系統(tǒng)的權(quán)限如何劃分。

2. 系統(tǒng)的音樂如何上傳。

3. 數(shù)據(jù)庫如何連接。

具體解決思路如下：

1. 音樂網(wǎng)站分為前臺會員和后臺管理員。會員登錄后，發(fā)布評論信息，而管理員登錄后管理系統(tǒng)所有的信息。

2. 管理員登錄后上傳文件，在文件上傳頁面，創(chuàng)建一個Form表單，用于提交文件上傳信息。編寫一個后臺上傳程序，用于處理上傳的文件，獲取上傳的文件流。將獲取到的文件流保存到服務(wù)器中的指定路徑或者數(shù)據(jù)庫中。

3. 首先需要導(dǎo)入數(shù)據(jù)庫的驅(qū)動，可以將數(shù)據(jù)庫的驅(qū)動jar包放到項目的lib目錄中，使用Spring的JDBC模板或連接池實例來管理數(shù)據(jù)庫連接，可以通過配置文件來配置數(shù)據(jù)源，在Java中，通過SqlSession對象來執(zhí)行SQL語句。

lt;marquee>...</marquee>普通卷動

<marquee behavior=slide>...</marquee>滑動

<marquee behavior=scroll>...</marquee>預(yù)設(shè)卷動

<marquee behavior=alternate>...</marquee>來回卷動

<marquee direction=down>...</marquee>向下卷動

<marquee direction=up>...</marquee>向上卷動

<marquee direction=right></marquee>向右卷動

<marquee direction=left></marquee>向左卷動

<marquee loop=2>...</marquee>卷動次數(shù)

<marquee width=180>...</marquee>設(shè)定寬度

<marquee height=30>...</marquee>設(shè)定高度

<marquee bgcolor=FF0000>...</marquee>設(shè)定背景顏色

<marquee scrollamount=30>...</marquee>設(shè)定卷動距離

<marquee scrolldelay=300>...</marquee>設(shè)定卷動時間

<!>字體效果

<h1>...</h1>標(biāo)題字(最大)

<h6>...</h6>標(biāo)題字(最小)

<b>...</b>粗體字

<strong>...</strong>粗體字(強調(diào))

<i>...</i>斜體字

<em>...</em>斜體字(強調(diào))

<dfn>...</dfn>斜體字(表示定義)

<u>...</u>底線

<ins>...</ins>底線(表示插入文字)

<strike>...</strike>橫線

<s>...</s>刪除線

<del>...</del>刪除線(表示刪除)

<kbd>...</kbd>鍵盤文字

<tt>...</tt> 打字體

<xmp>...</xmp>固定寬度字體(在文件中空白、換行、定位功能有效)

<plaintext>...</plaintext>固定寬度字體(不執(zhí)行標(biāo)記符號)

<listing>...</listing> 固定寬度小字體

<font color=00ff00>...</font>字體顏色

<font size=1>...</font>最小字體

<font style=font-size:100 px>...</font>無限增大

<!>區(qū)斷標(biāo)記

<hr>水平線

<hr size=9>水平線(設(shè)定大小)

<hr width=80%>水平線(設(shè)定寬度)

<hr color=ff0000>水平線(設(shè)定顏色)

<br>(換行)

<nobr>...</nobr>水域(不換行)

<p>...</p>水域(段落)

<center>...</center>置中

<!>連結(jié)格式

<base href=位址>(預(yù)設(shè)好連結(jié)路徑)

<a href=位址></a>外部連結(jié)

<a href=位址 target=_blank></a>外部連結(jié)(另開新視窗)

<a href=位址 target=_top></a>外部連結(jié)(全視窗連結(jié))

<a href=位址 target=頁框名></a>外部連結(jié)(在指定頁框連結(jié))

<!>貼圖/音樂

<img src=圖片位址>貼圖

<img src=圖片位址 width=180>設(shè)定圖片寬度

<img src=圖片位址 height=30>設(shè)定圖片高度

<img src=圖片位址 alt=提示文字>設(shè)定圖片提示文字

<img src=圖片位址 border=1>設(shè)定圖片邊框

<bgsound src=MID音樂檔位址>背景音樂設(shè)定

<!>表格語法

<table aling=left>...</table>表格位置,置左

<table aling=center>...</table>表格位置,置中

<table background=圖片路徑>...</table>背景圖片的URL=就是路徑網(wǎng)址

<table border=邊框大小>...</table>設(shè)定表格邊框大小(使用數(shù)字)

<table bgcolor=顏色碼>...</table>設(shè)定表格的背景顏色

<table borderclor=顏色碼>...</table>設(shè)定表格邊框的顏色

<table borderclordark=顏色碼>...</table>設(shè)定表格暗邊框的顏色

<table borderclorlight=顏色碼>...</table>設(shè)定表格亮邊框的顏色

<table cellpadding=參數(shù)>...</table>指定內(nèi)容與格線之間的間距(使用數(shù)字)

<table cellspacing=參數(shù)>...</table>指定格線與格線之間的距離(使用數(shù)字)

<table cols=參數(shù)>...</table>指定表格的欄數(shù)

<table frame=參數(shù)>...</table>設(shè)定表格外框線的顯示方式

<table width=寬度>...</table>指定表格的寬度大小(使用數(shù)字)

<table height=高度>...</table>指定表格的高度大小(使用數(shù)字)

<td colspan=參數(shù)>...</td>指定儲存格合并欄的欄數(shù)(使用數(shù)字)

<td rowspan=參數(shù)>...</td>指定儲存格合并列的列數(shù)(使用數(shù)字)

<!>分割視窗

<frameset cols="20%,*">左右分割,將左邊框架分割大小為20%右邊框架的大小瀏覽器會自動調(diào)整

<frameset rows="20%,*">上下分割,將上面框架分割大小為20%下面框架的大小瀏覽器會自動調(diào)整

<frameset cols="20%,*">分割左右兩個框架

<frameset cols="20%,*,20%">分割左中右三個框架

<分割上下兩個框架

<frameset rows="20%,*,20%">分割上中下三個框架

<! - - ... - -> 注解

<a href target> 指定超連結(jié)的分割視窗

<a href=#錨的名稱> 指定錨名稱的超連結(jié)

<a href> 指定超連結(jié)

<a name=錨的名稱> 被連結(jié)點的名稱

<address>....</address> 用來顯示電子郵箱地址

<b> 粗體字

<base target> 指定超連結(jié)的分割視窗

<basefont size> 更改預(yù)設(shè)字形大小

<bgsound src> 加入背景音樂

<big> 顯示大字體

<blink> 閃爍的文字

<body text link vlink> 設(shè)定文字顏色

<body> 顯示本文

<br> 換行

<caption align> 設(shè)定表格標(biāo)題位置

<caption>...</caption> 為表格加上標(biāo)題

<center> 向中對齊

<cite>...<cite> 用於引經(jīng)據(jù)典的文字

<code>...</code> 用於列出一段程式碼

<comment>...</comment> 加上注解

<dd> 設(shè)定定義列表的項目解說

<dfn>...</dfn> 顯示"定義"文字

<dir>...</dir> 列表文字標(biāo)簽

<dl>...</dl> 設(shè)定定義列表的標(biāo)簽

<dt> 設(shè)定定義列表的項目

<em> 強調(diào)之用

<font face> 任意指定所用的字形

<font size> 設(shè)定字體大小

<form action> 設(shè)定戶動式表單的處理方式

<form method> 設(shè)定戶動式表單之資料傳送方式

<frame marginheight> 設(shè)定視窗的上下邊界

<frame marginwidth> 設(shè)定視窗的左右邊界

<frame name> 為分割視窗命名

<frame noresize> 鎖住分割視窗的大小

<frame scrolling> 設(shè)定分割視窗的卷軸

<frame src> 將html檔加入視窗

<frameset cols> 將視窗分割成左右的子視窗

<frameset rows> 將視窗分割成上下的子視窗

<frameset>...</frameset> 劃分分割視窗

<h1>~<h6> 設(shè)定文字大小

<head> 標(biāo)示文件資訊

<hr> 加上分格線

<html> 文件的開始與結(jié)束

<i> 斜體字

<img align> 調(diào)整圖形影像的位置

<img alt> 為你的圖形影像加注

<img dynsrc loop> 加入影片

<img height width> 插入圖片并預(yù)設(shè)圖形大小

<img hspace> 插入圖片并預(yù)設(shè)圖形的左右邊界

<img lowsrc> 預(yù)載圖片功能

<img src border> 設(shè)定圖片邊界

<img src> 插入圖片

<img vspace> 插入圖片并預(yù)設(shè)圖形的上下邊界

<input type name value> 在表單中加入輸入欄位

<isindex> 定義查詢用表單

<kbd>...</kbd> 表示使用者輸入文字

<li type>...</li> 列表的項目 ( 可指定符號 )

<marquee> 跑馬燈效果

<menu>...</menu> 條列文字標(biāo)簽

<multiple> 可同時選擇多項的列表欄

<noframe> 定義不出現(xiàn)分割視窗的文字

<ol>...</ol> 有序號的列表

<option> 定義表單中列表欄的項目

<p align> 設(shè)定對齊方向

<p> 分段

<person>...</person> 顯示人名

<pre> 使用原有排列

<samp>...</samp> 用於引用字

<select>...</select> 在表單中定義列表欄

<small> 顯示小字體

<strike> 文字加橫線

<strong> 用於加強語氣

<sub> 下標(biāo)字

<sup> 上標(biāo)字

<table border=n> 調(diào)整表格的寬線高度

<table cellpadding> 調(diào)整資料欄位之邊界

<table cellspacing> 調(diào)整表格線的寬度

<table height> 調(diào)整表格的高度

<table width> 調(diào)整表格的寬度

<table>...</table> 產(chǎn)生表格的標(biāo)簽

<td align> 調(diào)整表格欄位之左右對齊

<td bgcolor> 設(shè)定表格欄位之背景顏色

<td colspan rowspan> 表格欄位的合并

<td nowrap> 設(shè)定表格欄位不換行

<td valign> 調(diào)整表格欄位之上下對齊

<td width> 調(diào)整表格欄位寬度

<td>...</td> 定義表格的資料欄位

<textarea name rows cols> 表單中加入多少列的文字輸入欄

<textarea wrap> 決定文字輸入欄是自動否換行

<th>...</th> 定義表格的標(biāo)頭欄位

<title> 文件標(biāo)題

<tr>...</tr> 定義表格美一行

<tt> 打字機字體

<u> 文字加底線

<ul type>...</ul> 無序號的列表 ( 可指定符號 )

<var>...</var> 用於顯示變數(shù)

近，我們在教學(xué)生使用JavaScript，今天就帶大家開發(fā)一款簡單的音樂播放器。首先，最終效果如圖所示：

首先，我們來編寫html界面index.html，代碼如下:

<!DOCTYPE html>

<html>

<head>

</head>

<body>

</div>

</div>

</body>

</html>

接下來，編寫style.css，代碼如下：

body{

margin: 0px;

background-color: #ccc;

}

#boxDiv{

width: 375px;

height: 568px;

margin: 10px auto;

position: relative;

}

#contentDiv{

width: 375px;

height: 460px;

overflow: hidden;

}

#lrcDiv{

margin-top: 260px;

}

#lrcDiv span{

display: block;

line-height: 40px;

text-align: center;

color: white;

font-size: 20px;

}

#bgTopSpan{

position: absolute;

display: block;

width: 375px;

height: 30px;

top: 0px;

}

#bgBottomSpan{

top: 430px;

position: absolute;

display: block;

width: 375px;

height: 30px;

}

#controlDiv{

width: 375px;

height: 180px;

position: relative;

background-color: white;

}

#progressDiv{

background-color: red;

height: 1.5px;

width: 0px;

}

#pointerImg{

width: 18px;

height: 18px;

position: absolute;

top: -8.5px;

left: -3px;

}

#playTimeSpan{

display: block;

position: absolute;

font-size: 14px;

width: 35px;

top: 5px;

left: 5px;

}

#totalTimeSpan{

display: block;

position: absolute;

font-size: 14px;

width: 35px;

top: 5px;

left: 335px;

}

#titleSpan{

display: block;

position: absolute;

height: 30px;

width: 295px;

font-size: 20px;

text-align: center;

left: 40px;

top: 5px;

}

#buttonDiv{

margin-top: 40px;

position: relative;

}

#prevImg{

width: 40px;

height: 40px;

position: absolute;

top: 20px;

left: 60px;

}

#playOrPauseImg{

width: 70px;

height: 70px;

position: absolute;

top: 5px;

left: 152px;

}

#nextImg{

width: 40px;

height: 40px;

position: absolute;

top: 20px;

left: 275px;

}

最后，編寫common.js，代碼如下：

$(function(){

// 歌曲列表

var playList=["紅日", "狼的誘惑", "漂洋過海來看你"];

// 當(dāng)前播放的歌曲序號

var currentIndex=0;

// 播放器的原生對象

var audio=$("#song")[0];

// 播放時間數(shù)組

var timeArr=[];

// 歌詞數(shù)組

var lrcArr=[];

// 調(diào)用播放前設(shè)置

setup();

// 播放歌曲

playMusic();

// 播放歌曲

function playMusic(){

// 播放歌曲

audio.play();

// 設(shè)置為暫停的圖片

$("#playOrPauseImg").attr("src", "img/audio/pause@2x.png");

}

// 歌曲播放前設(shè)置

function setup(){

// 設(shè)置播放哪一首歌曲

// img/audio/紅日.mp3

audio.src="img/audio/" + playList[currentIndex] + ".mp3";

// 設(shè)置歌曲的名字

$("#titleSpan").text(playList[currentIndex]);

// 設(shè)置歌詞

setLrc();

}

// 設(shè)置歌詞

function setLrc(){

// 清空上一首的歌詞

$("#lrcDiv span").remove();

// 清空數(shù)組

timeArr=[];

lrcArr=[];

// 加載歌詞文件

$.get("img/audio/" + playList[currentIndex] + ".lrc", {}, function(data){

if(data){

// 按行切割字符串

var arr=data.split("\n");

// 分割歌詞

for (var i=0; i < arr.length; i++) {

// 分割時間和歌詞

var tempArr=arr[i].split("]");

if (tempArr.length > 1){

// 添加時間和歌詞到數(shù)組

timeArr.push(tempArr[0]);

lrcArr.push(tempArr[1]);

}

// 顯示歌詞

for (var i=0; i < lrcArr.length; i++) {

$("#lrcDiv").append("<span>"+lrcArr[i]+"</span>");

}

});

}

// 播放暫停事件

$("#playOrPauseImg").click(function(){

// 如果播放器是暫停狀態(tài)

if(audio.paused){

// 繼續(xù)播放

playMusic();

}else{

// 暫停

audio.pause();

// 變成播放的圖片

$("#playOrPauseImg").attr("src", "img/audio/play@2x.png");

}

});

// 上一首

$("#prevImg").click(function(){

// 如果是第一首，那么跳到最后一首

if(currentIndex==0){

currentIndex=playList.length - 1;

}else{

currentIndex--;

}

// 播放前設(shè)置

setup();

// 播放

playMusic();

});

// 下一首

$("#nextImg").click(function(){

// 如果是最后一首，就跳到第一首

if(currentIndex==playList.length - 1){

currentIndex=0;

}else{

currentIndex++;

}

// 播放前設(shè)置

setup();

// 播放

playMusic();

});

// 監(jiān)聽播放器播放時間改變事件

audio.addEventListener("timeupdate", function(){

// 當(dāng)前播放時間

var currentTime=audio.currentTime;

// 總時間

var totalTime=audio.duration;

// 當(dāng)是數(shù)字的時候

if(!isNaN(totalTime)){

// 得到播放時間與總時長的比值

var rate=currentTime / totalTime;

// 設(shè)置時間顯示

// 播放時間

$("#playTimeSpan").text(getFormatterDate(currentTime));

// 總時長

$("#totalTimeSpan").text(getFormatterDate(totalTime));

// 設(shè)置進度條

$("#progressDiv").css("width", rate * 375 + "px");

// 設(shè)置進度圓點

$("#pointerImg").css("left", (375 - 15) * rate - 3 + "px");

// 設(shè)置歌詞的顏色和內(nèi)容的滾動

for (var i=0; i < timeArr.length - 1; i++) {

if(!isNaN(getTime(timeArr[i]))){

// 當(dāng)前播放時間大于等于i行的時間，并且小于下一行的時間

if (currentTime >=getTime(timeArr[i]) && currentTime < getTime(timeArr[i+1])){

// 當(dāng)前行歌詞變紅色

$("#lrcDiv span:eq("+i+")").css("color", "#FF0000");

// 其他行歌詞變白色

$("#lrcDiv span:not(:eq("+i+"))").css("color", "#FFFFFF");

// 當(dāng)前行歌詞滾動

$("#lrcDiv").stop(false, true).animate({"margin-top": 260 - 40 * i + "px"}, 1000);

}

});

function getTime(timeStr){

// 去掉左邊的[

var arr=timeStr.split("[");

if(arr.length > 1){

// 得到右邊的時間

var str=arr[1];

// 分割分、秒

var tempArr=str.split(":");

// 分

var m=parseInt(tempArr[0]);

// 秒

var s=parseFloat(tempArr[1]);

return m * 60 + s;

}

return 0;

}

// 格式化時間（00：00）

function getFormatterDate(time){

// 分

var m=parseInt(time / 60);

// 秒

var s=parseInt(time % 60);

// 補零

m=m > 9 ? m : "0" + m;

s=s > 9 ? s : "0" + s;

return m + ":" + s;

}

});

圖片和歌曲、歌詞請自行下載，最后，可以運行試試了。是不是很有趣呢？想要學(xué)習(xí)更多的Java技術(shù)開發(fā)知識，關(guān)注“重慶千鋒”獲取更多的視頻教程，千鋒重慶IT培訓(xùn)機構(gòu)還提供兩周免費試聽課程，歡迎各位小伙伴申請試聽。

在線咨詢

上一篇：HTML基礎(chǔ)教程：認識HTML
下一篇：如何在 Mac 上打開和提取 RAR 文件？

您的項目需求

*請認真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商

音樂網(wǎng)站-計算機畢業(yè)設(shè)計源碼+LW文檔

您的項目需求