📂文章目錄
- 一、👨🎓網站題目
- 二、✍️網站描述
- 三、📚網站介紹
- 四、💠網站示範
- 五、⚙️ 網站代碼
- 🧱HTML結構代碼
- 六、🥇 如何讓學習不再盲目
- 七、🎁更多幹貨
一、👨🎓網站題目
🎵 音樂網頁設計 、🎸仿網易雲音樂、各大音樂官網網頁、🎶明星音樂演唱會主題、🥁爵士樂音樂、民族音樂、等網站的設計與制作。
二、✍️網站描述
🏷️HTML音樂網頁設計，采用DIV+CSS布局，共有多個頁面，排版整潔，内容豐富，主題鮮明，首頁使用CSS排版比較豐富，色彩鮮明有活力，導航與正文字型分别設定不同字号大小。導航區域設定了背景圖。子頁面有純文字頁面和圖文并茂頁面。
🏅 一套優質的💯網頁設計應該包含 (具體可根據個人要求而定)
- 頁面分為頁頭、菜單導航欄（最好可下拉）、中間内容闆塊、頁腳四大部分。
- 所有頁面互相超連結，可到三級頁面，有5-10個頁面組成。
- 頁面樣式風格統一布局顯示正常，不錯亂，使用Div+Css技術。
- 菜單美觀、醒目，二級菜單可正常彈出與跳轉。
- 要有JS特效，如定時切換和手動切換圖檔輪播。
- 頁面中有多媒體元素，如gif、視訊、音樂，表單技術的使用。
- 頁面清爽、美觀、大方，不雷同。 。
- 不僅要能夠把使用者要求的内容呈現出來，還要滿足布局良好、界面美觀、配色優雅、表現形式多樣等要求。
三、📚網站介紹
📔網站布局方面：計劃采用目前主流的、能相容各大主流浏覽器、顯示效果穩定的浮動網頁布局結構。
📓網站程式方面：計劃采用最新的網頁程式設計語言HTML5+CSS3+JS程式語言完成網站的功能設計。并確定網站代碼相容目前市面上所有的主流浏覽器，已達到打開後就能即時看到網站的效果。
📘網站素材方面：計劃收集各大平台好看的圖檔素材，并精挑細選适合網頁風格的圖檔，然後使用PS做出适合網頁尺寸的圖檔。
📒網站檔案方面：網站系統檔案種類包含：html網頁結構檔案、css網頁樣式檔案、js網頁特效檔案、images網頁圖檔檔案；
📙網頁編輯方面：網頁作品代碼簡單，可使用任意HTML編輯軟體（如：
Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++
等任意html編輯軟體進行運作及修改編輯等操作）。
其中：
（1）📜html檔案包含：其中index.html是首頁、其他html為二級頁面；
（2）📑 css檔案包含：css全部頁面樣式,文字滾動, 圖檔放大等；
（3）📄 js檔案包含：js實作動态輪播特效, 表單送出, 點選事件等等（個别網頁中運用到js代碼）。
四、💠網站示範
五、⚙️ 網站代碼
🧱HTML結構代碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>youngmusic</title>
<style type="text/css">
/* <!-- 公共css --> */
::selection {
color: #fff;
background: #9B0909;
}
* {
margin: 0px;
padding: 0px;
list-style: none;
}
a {
text-decoration: none;
color: #000000;
}
hr {
height: 1.1px;
}
/* 隐藏 */
.notShow {
display: none;
}
/* 頭部一級菜單被選中 */
.topCheck:hover {
background: #000;
}
/* 頭部二級菜單被選中 */
.topItemCheck:hover {
background: #9B0909;
}
/* 頭部css */
#top {
margin: 0 auto;
width: 100%;
height: 70px;
background: #242424;
margin-bottom: 5px;
}
/* 登入 */
.m_login {
right: 180px;
}
/* 登出 */
.m_login2 {
display: none;
color: white;
top: 50px;
z-index: 100;
right: 170px;
width: 60px;
line-height: 50px;
height: 50px;
background-color: red;
}
.m_login2 {
color: white;
background-color: black;
z-index: 101;
}
.m_login:hover {
color: #fff;
}
#spanTip {
color: white;
/* background-color: black; */
z-index: 100;
position: absolute;
right: 10px;
}
/* 登入之後的圖檔 */
.m_img {
right: 60px;
}
.user {
width: 40px;
height: 40px;
margin: auto;
margin-left: -10px;
border-radius: 40px;
/* 設定圖檔平鋪 */
object-fit: initial;
}
/* logo */
.logo {
margin-left: 10%;
margin-right: 5%;
line-height: 70px;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
font-size: 25pt;
color: rgb(255, 255, 255);
text-shadow: rgb(255, 255, 255) 0px 0px 10px, rgb(255, 255, 255) 0px 0px 50px, rgb(194, 12, 12) 0px 0px 10px, rgb(194, 12, 12) 0px 0px 20px, rgb(194, 12, 12) 0px 0px 30px, rgb(194, 12, 12) 0px 0px 30px, rgb(194, 12, 12) 0px 0px 50px;
/* transition:all 0.8s;
*/
cursor: pointer;
}
/* 一級菜單 */
.m_top {
display: flex;
line-height: 70px;
position: relative;
}
.m_top>a {
position: absolute;
color: #ccc;
right: 70px;
width: 150px;
text-align: center;
/* border: 1px solid yellow; */
overflow: hidden;
font-size: 0.9em;
}
/* 創作者中心 */
.m_content {
right: 280px;
}
.m_content:hover {
color: #FFFFFF;
}
/* 輸入框背景 */
.m_input {
width: 210px;
height: 33px;
background: #FFFFFF;
margin: auto;
position: absolute;
right: 240px;
top: 20px;
line-height: 30px;
border-radius: 30px;
/* display: none; */
}
/* .m_input input:-internal-autofill-selected {
background: transparent !important;
} */
/* 搜尋圖檔 */
.m_input img {
width: 18px;
position: absolute;
margin-top: 8px;
margin-left: 10px;
}
/* 輸入框 */
.m_input input {
position: absolute;
margin-top: 4px;
margin-left: 33px;
border: 0;
outline: none;
width: 150px;
height: 25px;
}
.userPhoto {
position: absolute;
right: 65px;
}
.layui-nav-bar {
background-color: transparent;
}
/* 第一個ul菜單 */
.menu1 {
height: 70px;
width: 40%;
text-align: center;
margin-left: -50px;
}
.menu1>li {
float: left;
transition: all 0.5s;
width: 25%;
flex-grow: 1;
}
.menu1 a {
color: #ccc;
display: inline-block;
width: 100%;
height: 100%;
transition: all 0.5s;
}
/* 滑鼠移入事件 menu菜單li */
.menu1>li:hover {
background: #000000;
transition: all 0.5s;
}
.menu1>li:hover a {
color: #fff;
transition: all 0.5s;
}
/* 頭部紅色橫條 */
.m_back {
width: 100%;
height: 5px;
background: #C20C0C;
}
/* 發現音樂的二級菜單 首頁被顯示 其他頁面被隐藏 */
.menu2 {
display: flex;
height: 30px;
background: #C20C0C;
margin-bottom: 30px;
padding-left: 30%;
line-height: 23px;
position: relative;
width: 70%;
z-index: 1;
}
.menu2 li {
padding: 0 30px;
}
.menu2 li>a {
padding: 3px 15px;
border-radius: 10px;
font-size: 0.85em;
color: #FFFFFF;
transition: all 0.5s;
}
.menu2 li>a:hover {
background: #9B0909;
transition: all 0.2s;
}
/* <!-- 底部版權 --> */
#bottom {
font-size: 0.9em;
position: relative;
bottom: 0;
height: 200px;
margin-top: 50px;
color: #fff;
background-color: #393D49;
}
#bottom .fl {
float: left;
margin: 60px 0 0 20%;
}
#bottom .fl p {
line-height: 30px;
}
#bottom .fl p .comm {
margin-left: 20px;
}
#bottom .fl a {
color: #ddd;
}
#bottom .fl a:hover {
color: #fff;
text-decoration: underline #fff;
}
#bottom .fr {
float: right;
margin: 30px 22% 0 0;
}
#bottom .fr ul li {
line-height: 30px;
color: #ddd;
}
#bottom .fr ul li:hover {
cursor: pointer;
color: #fff;
text-decoration: underline #fff;
}
/* 底部播放區 重點！！！！！ */
#head {
position: fixed;
bottom: 0px;
width: 100%;
text-align: right;
}
#head>img {
height: 20px;
margin-right: 50px;
}
/* 播放區域 */
#wrap {
/* opacity:0.9; */
/* position: fixed; */
bottom: -55px;
height: 55px;
width: 100%;
background: rgb(36, 36, 36, 0.9);
box-shadow: 0px -3px 5px rgb(36, 36, 36, 0.9);
/* 文字不被選中 */
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
/* 按鈕的樣式 暫停 播放 進度條 頭像 下一曲啥的 */
/* 按鈕的大緻布局 */
.play_left {
position: absolute;
left: 150px;
}
.play_left img {
opacity: 0.7;
}
.play_right {
position: absolute;
right: 50px;
}
.play_right img {
opacity: 0.7;
}
.t_10 {
position: relative;
top: 18px;
width: 20px;
margin: 0 10px;
}
.t_20 {
position: relative;
width: 35px;
}
.t_30 {
position: relative;
top: 2px;
width: 50px;
}
/* 進度條啥的 小細節 */
#SongList {
height: 280px;
width: 350px;
background: #000;
z-index: 9;
position: fixed;
bottom: 55px;
right: 60px;
overflow-y: auto;
display: none;
text-align: left;
color: #C2C2C2;
font-size: 0.9em;
}
#SongList ul {
/* background:#9B0909;
*/
margin-left: 10px;
}
#SongList ul li {
margin: 2px;
cursor: pointer;
}
#SongList ul li:hover {
color: #fff;
}
#p2 {
display: none;
}
#p1,
#p2 {
opacity: 1;
}
#wrap img:hover {
opacity: 1;
}
.SongInfo {
position: absolute;
left: 350px;
}
.SongInfo a {
color: #FFFFFF;
font-size: 0.8em;
}
.song {
position: relative;
top: -20px;
margin-left: 20px;
left: 20px;
}
.singer {
position: relative;
top: -20px;
margin-left: 20px;
}
.singer a {
color: #CCCCCC;
}
.jinDuTiao {
position: absolute;
top: 30px;
left: 60px;
width: 600px;
height: 20px;
/* background:#fff;
*/
}
.jinDuTiao .JinDu {
width: 100%;
height: 10px;
background: #000000;
border-radius: 55px;
box-shadow: inset 0px -1px 1px #717171;
}
.JinDu .progress {
width: 0%;
height: 100%;
border-radius: 5px;
background-color: #9B0909;
box-shadow: inset 0px -1px 1px #000;
}
.jinDuTiao .YuanDian {
position: absolute;
width: 15px;
height: 15px;
border-radius: 15px;
background: #F5F5F5;
top: -2px;
background-image: radial-gradient(circle, #f00, #fff, #fff);
}
.songTime {
position: absolute;
left: 685px;
top: 25px;
color: #CCCCCC;
font-family: "bodoni mt";
width: 100px;
}
.songTime span:nth-of-type(2) {
color: #717171;
}
.songImg {
position: relative;
top: 6px;
border-radius: 5px;
/* border:1px solid #000000;
*/
box-shadow: 2px #000000;
border-radius: 5px;
width: 40px;
height: 40px;
}
/* 音量的位置 */
#volume {
position: absolute;
bottom: 20px;
/* margin-left: 38px; */
display: none;
width: 20px;
background-color: rgb(46, 44, 46, 0.8);
padding: 10px;
padding-top: 15px;
}
.layui-slider-vertical {
margin: auto;
}
/* 滾動條樣式 */
#SongList::-webkit-scrollbar {
width: 5px;
/* height: 10px; */
border-radius: 10px;
}
#SongList::-webkit-scrollbar-button,
#SongList::-webkit-scrollbar-button:vertical {
display: none;
}
#SongList::-webkit-scrollbar-track,
#SongList::-webkit-scrollbar-track:vertical {
border-radius: 5px;
}
#SongList::-webkit-scrollbar-track-piece {
background-color: rgba(48, 48, 48, 0.9);
box-shadow: inset 0 0 2px #717171;
border-radius: 5px;
}
#SongList::-webkit-scrollbar-thumb,
#SongList::-webkit-scrollbar-thumb:vertical {
border-radius: 10px;
/* -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,1); */
box-shadow: inset 0 0 1px #717171;
background-color: #c20c0c;
}
#SongList::-webkit-scrollbar-thumb:hover,
#SongList::-webkit-scrollbar-thumb:vertical:hover {
background: #c20c0ce5;
}
table {
width: 100%;
margin: 10px auto;
border-collapse: collapse;
text-align: center;
}
th {
background-color: #C20C0C;
color: #fff;
}
td,
th {
border: 1px solid #333;
}
td>a {
color: #0000FF;
}
thead tr {
height: 40px;
background-color: #cccccc;
}
/* ========================== */
@media screen and (max-width: 400px) {
.left {
display: none;
}
.right {
display: none;
}
.con_gengduo {
display: none;
}
}
#content {
background: #f5f5f5;
background: black;
}
.con_banner {
background: #242424;
}
/* asdadas */
.title {
width: 95%;
margin: 0 auto;
font-size: 1.2em;
border-bottom: 3px #c20c0c solid;
padding: 15px;
}
.title .t-span {
position: relative;
/* top: 15px; */
}
.title>img {
object-fit: initial;
position: relative;
top: 8px;
padding: 0 10px;
width: 30px;
left: 20px;
margin-right: 15px;
}
/* 熱門推薦的幾個歌曲類型 */
.title .con_type {
font-size: 0.8em;
margin-left: 30px;
}
.title .con_type a:hover {
color: #9b0909;
text-decoration: underline;
}
/* 更多按鈕 */
.con_gengduo {
font-size: 0.7em;
position: absolute;
right: 300px;
margin-top: 22px;
}
/* 更多按鈕的a标簽懸浮添加下劃線 */
.con_gengduo a:hover {
color: #000;
text-decoration: underline;
}
.middiv {
background-color: #f5f5f5;
}
/* 熱門推薦 個性 排行 歌單 */
.remen,
.gexing,
.paihang,
.gedan {
width: 70%;
margin: 0 auto;
background: #fff;
}
/* 歌曲清單ul */
.ul_list {
display: flex;
flex-flow: wrap;
margin: 0 auto;
margin-left: 70px;
}
.ul_list li {
margin: 15px 15px;
}
.ul_list li a {
font-size: 0.9em;
display: block;
width: 150px;
word-wrap: break-word;
}
.ul_list li:hover a {
text-decoration: underline;
color: #9b0909;
}
.ul_list img {
width: 150px;
height: 150px;
min-width: 150px;
}
/* ======================================================= */
/*設定輪播圖的邊框相對定位*/
.play-box {
position: relative;
width: 60%;
/* height: 400px; */
margin: 0 auto;
/* border: 1px solid yellow; */
}
/*設定邊框下的圖檔*/
.play-box img {
width: 100%;
}
/*設定所有圖檔不顯示*/
.play-box img {
display: block;
/*現在是文本狀态，要修改為塊狀*/
overflow: hidden;
/*隐藏超過邊框高度的圖檔*/
opacity: 0;
/*預設圖檔為全透明*/
height: 0;
/*預設高度為0*/
transition: opacity .5s;
/*預設透明度過渡時間為0.5s*/
}
/*設定目前圖檔顯示*/
#imgList .current {
opacity: 1;
/*預設圖檔顯示*/
height: auto;
/*預設高度為自動*/
}
/*設定清單ul*/
.iconList ul {
margin: 0;
padding: 0;
list-style: none;
}
/*設定清單ul下的li*/
.iconList ul li {
width: 10px;
height: 10px;
margin: 0 4px;
font-size: 0;
border-radius: 50%;
background-color: #fff;
cursor: pointer;
float: left;
}
/*當圖檔變化時，圖示也跟着變化*/
.iconList ul li.current {
background-color: red;
}
/*設定圖示絕對定位*/
.iconList {
position: absolute;
bottom: 10px;
left: 50%;
margin-left: -45px;
}
/*設定向左向右圖示*/
.sliderbar {
position: absolute;
top: 37%;
width: 60px;
height: 100px;
font-family: simsun;
color: #fff;
text-align: center;
line-height: 90px;
background-color: #000;
opacity: .6;
display: none;
cursor: pointer;
}
/*設定向左圖示*/
.slidebar-left {
left: 0
}
/*設定向右圖示*/
.slidebar-right {
right: 0;
}
</style>
<script type="text/javascript">
window.onload = function() {
//設定變量速度為3秒
var speed = 3000;
//循環變量為1，是避免定時器再等第一章圖檔
var m = 1;
//設定定時器的函數和時間
var playTimer = setInterval(runPlay, speed);
//定時函數
function runPlay() {
//判讀如果m大于4，就設定m=0
if (m > 4) {
m = 0;
}
//調用controlPlay函數來控制圖檔變化
controlPlay(m);
m++;
}
//通過參數控制圖檔的變化,圖示變化
function controlPlay(n) {
var img = document.getElementById("imgList").getElementsByTagName("img");
for (var i = 0; i < img.length; i++) {
img[i].classList.remove("current");
}
img[n].classList.add("current");
var li = document.getElementById("iconul").getElementsByTagName("li");
for (var i = 0; i < li.length; i++) {
li[i].classList.remove("current");
}
li[n].classList.add("current");
}
//擷取登入連結和推出登入連結
var playBox = document.getElementById("playBox")
var playBoxl = document.getElementById("sliderbarl")
var playBoxr = document.getElementById("sliderbarr")
//控制登入連結按鈕，和推出按鈕的顯示和隐藏
playBox.onmouseover = function() {
//停止定時
clearInterval(playTimer);
//左右控制按鈕顯示
playBoxl.style.display = 'block'
playBoxr.style.display = 'block'
}
playBoxl.onmouseover = function() {
playBoxl.style.display = 'block'
playBoxr.style.display = 'block'
}
playBoxr.onmouseover = function() {
playBoxl.style.display = 'block'
playBoxr.style.display = 'block'
}
playBoxl.onmouseout = function() {
playBoxl.style.display = 'none'
playBoxr.style.display = 'none'
}
playBoxr.onmouseout = function() {
playBoxl.style.display = 'none'
playBoxr.style.display = 'none'
}
playBox.onmouseout = function() {
//重新開始定時
playTimer = setInterval(runPlay, speed);
//左右控制按鈕隐藏
playBoxl.style.display = 'none'
playBoxr.style.display = 'none'
}
var iconli = document.getElementsByClassName("current2");
for (var i = 0; i < iconli.length; i++) {
iconli[i].onclick = function(n) {
return function() {
controlPlay(n);
m = n + 1;
}
}(i)
}
//下一張圖檔
playBoxr.onclick = function() {
//判斷m的值
if (m > 4) {
m = 0;
}
//顯示下一站圖檔
controlPlay(m);
m++;
}
//上一張圖檔
playBoxl.onclick = function() {
//m預設顯示下一張，是以為了顯示上一張，m必須減2
m -= 2;
if (m < 0) {
m = 4;
}
//顯示上一張圖檔
controlPlay(m);
//保證m要顯示下一張
m++;
}
//1,先準備資料
var datas = [{
song: "她說",
type: "流行",
Album: "1",
singer: "林俊傑"
}, {
song: "龍卷風",
type: "流行",
Album: "1",
singer: "周傑倫"
}, {
song: "花海",
type: "流行",
Album: "1",
singer: "周傑倫"
}, {
song: "小宇",
type: "流行",
Album: "1",
singer: "藍心宇"
}, {
song: "雪下的時候",
type: "流行",
Album: "1",
singer: "喬佳旭"
}, {
song: "My Heart Will Go On",
type: "流行",
Album: "1",
singer: "滿舒克"
}];
//2,往tbody裡面建立行，有幾個人（通過數組的長度）我們就建立幾行
var tbody = document.querySelector("tbody");
for (var i = 0; i < datas.length; i++) //外面的for循環 是 行tr
{
var tr = document.createElement("tr");
tbody.appendChild(tr);
//3,往tr每一行裡面建立單元格（跟資料有關系的3個單元格），td單元格的數量取決于每個對象的屬性個數 for循環周遊對象 datas[i]
for (var k in datas[i]) //裡面的for循環是 列
{
var td = document.createElement("td"); //建立單元格
tr.appendChild(td);
td.innerHTML = datas[i][k]; //把對象裡面的屬性值 datas[i][k]給td
}
//4，建立有删除二字的單元格
var td = document.createElement("td");
tr.appendChild(td);
td.innerHTML = "<a href='javascript:;' class='aa' >删除</a>";
}
//5,删除操作
var as = document.getElementsByClassName("aa");
for (var i = 0; i < as.length; i++) {
as[i].onclick = function() { //點選a 删除 目前a 所在的行（a連結的爸爸的爸爸）
tbody.removeChild(this.parentNode.parentNode);
}
}
var username = getUrlParam("username");
//這個變量是控制歌曲的播放狀态的
//預設0是清單順序循環播放，1是随機播放，2是單曲循環
var brandom = 0;
//判斷使用者是否登入
if (username) {
//将使用者名顯示在首頁右上角
document.getElementById("m_login").text = username
//擷取登入連結和推出登入連結
var m_login = document.getElementById("m_login")
var m_login2 = document.getElementById("m_login2")
//控制登入連結按鈕，和推出按鈕的顯示和隐藏
m_login.onmouseover = function() {
m_login2.style.display = 'block'
}
m_login.onmouseout = function() {
m_login2.style.display = 'none'
}
m_login2.onmouseover = function() {
m_login2.style.display = 'block'
}
m_login2.onmouseout = function() {
m_login2.style.display = 'none'
}
}
//登入資訊進行權限設定。
document.getElementById("mymusic").onclick = function() {
if (!username) {
alert("請登入。。。")
}
}
// 正式代碼
//這就是擷取播放控件元素。
var _audio = document.getElementById("music");
//進度條的計時器管理
var progressBar = null;
var data = { //使用JSON數組
//目前播放歌曲索引
"index": 0,
//歌名
"songname": ["Whistle", "海の形", "形容", "殺死那個石家莊人"], //3.44----4.10-----4.29
//歌曲圖檔
"cover": ["./img/w.jpg", "./img/xr.jpg", "./img/hdx.jpg", "./img/ssngsjzr.jpg"],
//歌手名
"singer": ["florida", "昙軒", "沈以誠", "萬能青年旅店"],
//播放控件的檔案路徑
"songsrc": ["./song/Whistle-florida.mp3", "./song/海の形-昙軒.mp3",
"./song/形容-沈以誠.mp3", "./song/殺死那個石家莊人.mp3"
]
};
_audio.src = data.songsrc[data.index];
//設定圖檔封面
document.getElementById("Imgsong").src = data.cover[data.index]
//設定歌手姓名
document.getElementById("singername").text = data.singer[data.index]
//設定歌名
document.getElementById("songname").text = data.songname[data.index]
//目前播放時間的計時器
var TimeManager = null;
//開始播放
document.getElementById("p1").onclick = function() {
// console.log("開始播放。。。。");
//預設的時候讓所有的音頻加載，
// _audio.load();
_audio.autoplay = true; //自動播放
_audio.play();
duration();
//擷取播放控件
// 開始播放，顯示暫停//播放暫停按鈕切換
document.getElementById("p2").style.display = 'inline'
document.getElementById("p1").style.display = 'none'
}
//暫停按鈕被單擊
document.getElementById("p2").onclick = function() {
// console.log("暫停中。。。。");
// 暫停變播放
//播放暫停按鈕切換
document.getElementById("p1").style.display = 'inline'
document.getElementById("p2").style.display = 'none'
//暫停
_audio.pause();
clearInterval(TimeManager);
}
// 播放順序 p1:清單循環 p2:随機播放 p3:單曲循環
// 初始化
var p1 = document.getElementById("typep1")
var p2 = document.getElementById("typep2")
var p3 = document.getElementById("typep3")
// 清單循環單擊 變随機播放
p1.onclick = function() {
alert("已切換随機播放");
brandom = 1;
p1.classList.add("notShow");
p2.classList.remove("notShow");
}
// 随機播放單擊 變單曲循環
p2.onclick = function() {
alert("已切換單曲循環");
brandom = 2;
p2.classList.add("notShow");
p3.classList.remove("notShow");
_audio.loop = true;
_audio.loop = true;
}
// 單曲循環單擊 變清單循環
p3.onclick = function() {
alert("已切換清單循環");
brandom = 0;
p3.classList.add("notShow");
p1.classList.remove("notShow");
_audio.loop = false;
}
function duration() {
// 清除
clearInterval(TimeManager);
//擷取總時長
var time = _audio.duration;
// console.log("歌曲時間" + time);
//分鐘
var minute = time / 60;
// console.log(time);
var minutes = parseInt(minute);
// console.log(minutes);
if (minutes < 10) {
minutes = "0" + minutes;
}
//秒
var second = time % 60;
var seconds = Math.round(second);
if (seconds < 10) {
seconds = "0" + seconds;
}
//總共時長的秒數
document.getElementById("totalTime").innerHTML = minutes + ":" + seconds
TimeManager = setInterval(function() {
timeDisposal(_audio.currentTime);
}, 1000);
}
//目前時長的時間處理
function timeDisposal(time) {
//分鐘
var minute = time / 60;
var minutes = parseInt(minute);
if (minutes < 10) {
minutes = "0" + minutes;
}
//秒
var second = time % 60;
var seconds = Math.round(second);
if (seconds < 10) {
seconds = "0" + seconds;
}
//目前時長
document.getElementById("currentTime").innerHTML = minutes + ":" + seconds
}
//進度條原點的位置
progressBar = setInterval(function() {
var bfb = eval（_audio.currentTime / _audio.duration);
if (bfb >= 1) {
// 大于1就播放下一首
down();
}
// 進度條随着播放向前進 增加寬度百分比 這個 +1 是為了隐藏右邊圓角
if (bfb > 0.6) {
document.getElementById("progress").style.width = bfb * 100 + "%"
} else {
document.getElementById("progress").style.width = bfb * 100 + 1 + "%"
}
document.getElementById("YuanDian").style.left = 585 * bfb + "px"
}, 1000);
//進度條的原點的拖拽
var dian = document.getElementById("YuanDian")
dian.onmousedown = function() {
var X = event.clientX - dian.offsetLeft;
var Y = event.clientY - dian.offsetTop;
document.onmousemove = function() {
dian.style.left = event.clientX - X + "px";
dian.style.top = event.clientY - Y + "px";
if (dian.offsetLeft < 0) {
dian.style.left = 0 + "px";
}
if (dian.offsetLeft > 600 - dian.offsetWidth) {
dian.style.left = 585 + "px";
}
if (dian.offsetTop < -2) {
dian.style.top = -2 + "px";
}
if (dian.offsetTop >= 10 - dian.offsetHeight) {
dian.style.top = -2 + "px";
}
var bfb = dian.offsetLeft / 600;
if (bfb > 0.6) {
document.getElementById("progress").style.width = bfb * 100 + 0.8 + "%"
} else {
document.getElementById("progress").style.width = bfb * 100 + 1 + "%"
}
};
document.onmouseup = function() {
document.onmousemove = null;
document.onmouseup = null;
// 松開的時候 繼續播放
_audio.currentTime = eval（
(dian.offsetLeft / 600 + 0.01) * _audio.duration
);
songPlay2();
};
document.onmouseup = function() {
//防止事件混亂，先清空
document.onmousemove = null;
document.onmouseup = null;
// 松開的時候 繼續播放
_audio.currentTime = eval（
(dian.offsetLeft / 600 + 0.01) * _audio.duration
);
//接着播放
songPlay2();
};
}
//這個适用于頁面首次加載時播放音樂擷取時間
function songPlay2() {
_audio.autoplay = true; //自動播放
// console.log("播放");
document.getElementById("p2").style.display = 'inline'
document.getElementById("p1").style.display = 'none'
duration();
_audio.play();
}
// 進度條的點選
document.getElementById("jinDuTiao").onclick = function() {
var jdt = document.getElementById("jinDuTiao");
var domToLeft = jdt.getBoundingClientRect().left // dom 的左邊到視口左邊的距離
var len = event.clientX - domToLeft;
dian.style.left = len + "px";
var bfb = len / 600;
if (bfb > 0.6) {
document.getElementById("progress").style.width = bfb * 100 + 0.8 + "%"
} else {
document.getElementById("progress").style.width = bfb * 100 + 1 + "%"
}
// 松開的時候 繼續播放
_audio.currentTime = eval（(bfb + 0.01) * _audio.duration);
songPlay2();
}
// 上一首
document.getElementById("up").onclick = function() {
// 更換播放路徑後播放
if (data.index == 0) {
data.index = data.songsrc.length - 1
} else {
data.index--;
}
_audio.src = data.songsrc[data.index]
_audio.load();
_audio.oncanplay = function() {
// console.log(_audio.duration);
duration();
}
document.getElementById("p2").style.display = 'inline'
document.getElementById("p1").style.display = 'none'
//設定圖檔封面
document.getElementById("Imgsong").src = data.cover[data.index]
//設定歌手姓名
document.getElementById("singername").text = data.singer[data.index]
//設定歌名
document.getElementById("songname").text = data.songname[data.index]
}
// 下一首
document.getElementById("down").onclick = down;
function down() {
if (brandom == 0) {
// console.log("正常播放");
// 更換播放路徑後播放
if (data.index == (data.songsrc.length - 1)) {
data.index = 0
} else {
data.index++;
}
} else if (brandom == 1) {
// console.log("随機播放");
var random = parseInt(Math.random() * (data.songsrc.length), 10);
data.index = random;
} else if (brandom == 2) {
// console.log("單曲循環");
}
// console.log("目前播放歌曲索引" + data.index);
document.getElementById("p2").style.display = 'inline'
document.getElementById("p1").style.display = 'none'
_audio.src = data.songsrc[data.index];
_audio.load();
_audio.oncanplay = function() {
// console.log(_audio.duration);
duration();
}
//設定圖檔封面
document.getElementById("Imgsong").src = data.cover[data.index]
//設定歌手姓名
document.getElementById("singername").text = data.singer[data.index]
//設定 歌名
document.getElementById("songname").text = data.songname[data.index]
}
var as = document.getElementsByClassName("lisong");
for (var i = 0; i < as.length; i++) {
as[i].onclick = function(n) {
return function() {
if (username) {
location.href = "songinfo.html?username=" + username + "&&songindex=" + n;
} else {
alert("請登入。。")
}
// console.log(n)
}
}(i)
}
//這個方法用正則比對擷取url的參數
function getUrlParam(name) {
//構造一個含有目标參數的正規表達式對象
var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
var url = decodeURI(decodeURI(window.location.search));
var r = url.substr(1).match(reg); //比對目标參數
if (r != null) {
return unescape(r[2]);
} else {
return null; //傳回參數值
}
}
//4.設定定時器：每經過1000毫秒執行任務（前面的1.2.3）
window.setInterval("genDate()", 1000);
}
function genDate() {
//1.建立Date對象拼接時分秒
var date = new Date();
//拼接時間
var dateStr = date.getFullYear() + "年" + (date.getMonth() + 1) + "月" + date.getDate() + "日 " +
date.getHours() + "時" + date.getMinutes() + "分" + date.getSeconds() + "秒";
//2.擷取span标簽對象
var spanTip = document.getElementById("spanTip");
//3.設定span标簽對象的innerHTML屬性
spanTip.innerHTML = dateStr;
}
</script>
</head>
<body>
<div>
<div id="top">
<div class="m_top">
<span class="logo">YoungMusic</span>
<ul class="menu1">
<li class="topCheck">
<a href="javascript:;">首頁</a>
</li>
<li class="topCheck">
<a href="發現音樂.html">發現音樂</a>
</li>
<li class="topCheck">
<a href="javascript:;" id="mymusic">我的音樂</a>
<li class="topCheck">
<a href="動态.html">動态</a>
</li>
</ul>
<div class="m_input">
<img src="./img/find.png" />
<input id="find" type="text" placeholder="音樂" autocomplete="off" />
</div>
<a href="login.html" class="m_login" id="m_login" title="點選跳轉">登入</a>
<a href="login.html" class="m_login2" id="m_login2">登出</a>
</div>
<div class="m_back">
</div>
<span id="spanTip"></span>
<ul class="menu2">
<li>
<a href="javascript:;" class="topItemCheck">推薦</a>
</li>
<li>
<a href="javascript:;" class="topItemCheck">排行榜</a>
</li>
<li>
<a href="javascript:;" class="topItemCheck">歌單</a>
</li>
<li>
<a href="javascript:;" class="topItemCheck">歌手</a>
</li>
</ul>
</div>
<div id="content">
<!-- 輪播動畫 -->
<div class="con_banner">
<div id="playBox" class="play-box">
<!--圖檔清單-->
<div id="imgList">
<img class="current" src="img/輪播/t1.jpg" />
<img src="img/輪播/t2.jpg" />
<img src="img/輪播/t3.jpg" />
<img src="img/輪播/t4.jpg" />
<img src="img/輪播/t5.jpg" />
</div>
<!--圖示清單-->
<div class="iconList">
<ul id="iconul">
<li class="current current2">1</li>
<li class="current2">2</li>
<li class="current2">3</li>
<li class="current2">4</li>
<li class="current2">5</li>
</ul>
</div>
<!--左箭頭-->
<div class="sliderbar slidebar-left" id="sliderbarl"><</div>
<!--右箭頭-->
<div class="sliderbar slidebar-right" id="sliderbarr">">></div>
</div>
</div>
</div>
<div class=" middiv">
<div class="remen">
<p class="title">
<img src="./img/MenuDefault.png" />
<span class="t-span">
我喜歡
</span>
<span class="con_gengduo">
<a href="javascript:;">更多>></a>
</span>
</p>
<table>
<thead>
<tr>
<th>歌名</th>
<th>歌手</th>
<th>類型</th>
<th>專輯</th>
<th>操作</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
<div class="remen">
<p class="title">
<img src="./img/唱片.png" />
<span class="t-span">
熱門推薦
<span class="con_type">
<a href="#">華語</a> |
<a href="#">流行</a> |
<a href="#">搖滾</a> |
<a href="#">民謠</a>
</span>
</span>
<span class="con_gengduo">
<a href="javascript:;">更多>></a>
</span>
</p>
<ul class="ul_list">
<li class="lisong">
<div>
<a href="javascript:;">
<img src="img/w.jpg" />
</a>
</div>
<a href="javascript:;">whistle</a>
</li>
<li class="lisong">
<div>
<a href="javascript:;">
<img src="img/hdx.jpg" />
</a>
</div>
<a href="javascript:;">海の形</a>
</li>
<li class="lisong">
<div>
<a href="javascript:;">
<img src="img/xr.jpg" />
</a>
</div>
<a href="javascript:;">形容</a>
</li>
<li class="lisong">
<div>
<a href="javascript:;">
<img src="img/ssngsjzr.jpg" />
</a>
</div>
<a href="javascript:;">殺死那個石家莊人</a>
</li>
</ul>
</div>
<div class="gedan">
<p class="title">
<img src="./img/gedan.png" />
<span class="t-span">歌單</span>
<span class="con_gengduo">
<a href="javascript:;">更多>></a>
</span>
</p>
<ul class="ul_list">
<li>
<div>
<a href="javascript:;">
<img src="img/gedan/1.jpg" />
</a>
</div>
<a href="javascript:;">2022全網超好聽熱門流行歌曲推薦</a>
</li>
<li>
<div>
<a href="javascript:;">
<img src="img/gedan/2.jpg" />
</a>
</div>
<a href="javascript:;">祝有愛者更愛，無愛者自由</a>
</li>
<li>
<div>
<a href="javascript:;">
<img src="img/gedan/3.jpg" />
</a>
</div>
<a href="javascript:;">民謠複興</a>
</li>
<li>
<div>
<a href="javascript:;">
<img src="img/gedan/4.jpg" />
</a>
</div>
<a href="javascript:;">說唱</a>
</li>
<li>
<div>
<a href="javascript:;">
<img src="img/gedan/5.jpg" />
</a>
</div>
<a href="javascript:;">台灣新發現</a>
</li>
</ul>
</div>
</div>
<div id="head">
<img src="./img/PlayMusic/up.png" />
<div id="wrap">
<audio id="music"></audio>
<span class="play_left">
<img src="./img/PlayMusic/last_1.png" class="t_20" id="up" />
<img src="./img/PlayMusic/play_1.png" class="t_30" id="p1" />
<img src="./img/PlayMusic/stop_1.png" class="t_30" id="p2" />
<img src="./img/PlayMusic/next_1.png" class="t_20" id="down" />
</span>
<div class="SongInfo">
<a href="#">
<img src="./img/唱片.png" class="songImg" id="Imgsong" />
</a>
<span class="song">
<a href="javascript:;" class="songname" id="songname">歌名</a>
</span>
<span class="singer">
<a href="javascript:;" class="singername" id="singername">singer</a>
</span>
<div class="jinDuTiao" id="jinDuTiao">
<div class="YuanDian" id="YuanDian"></div>
<div class="JinDu">
<div class="progress" id="progress"></div>
</div>
</div>
<span class="songTime">
<span class="currentTime" id="currentTime">00:00</span> /
<span class="totalTime" id="totalTime">00:00</span>
</span>
</div>
<span class="play_right">
<img src="./img/PlayMusic/音量_1.png" class="t_10 vol" />
<div id="volume">
<div id="vol-back"></div>
</div>
<img src="./img/PlayMusic/單曲播放.png" id="typep1" class="t_10 playOrder p1 " alt="單曲播放" />
<img src="./img/PlayMusic/随機播放_1.png" id="typep2" class="t_10 playOrder p2 notShow"
alt="随機播放" />
<img src="./img/PlayMusic/單曲循環.png" id="typep3" class="t_10 playOrder p3 notShow" alt="單曲循環" />
<div id="SongList">
<ul>
<li v-for="(item,index) in $store.state.songmenu" :key="index" @click="play(index)">
{{item.name}}--{{item.singer}}
</li>
</ul>
</div>
<img src="./img/PlayMusic/list_1.png" class="t_10 list" />
</span>
</div>
</div>
<div id="bottom">
<div class="fl">
<p>
華北理工大學輕工學院©1997-2099
<span class="comm">
計算機科學與技術xxx：
<a href="#">浙網文[2018]3506-263号</a>
</span>
</p>
<p>
違法和不良資訊舉報電話：6666-88888
<span class="comm">
舉報郵箱：
<a href="#">[email protected]</a>
</span>
</p>
<p>
粵B2-20090191-18
<span class="comm">
<a href="#">工業和資訊化部備案管理系統網站</a>
</span>
</p>
</div>
<div class="fr">
<ul>
<li>服務條款</li>
<li>隐私政策</li>
<li>兒童隐私政策</li>
<li>版權投訴指引</li>
<li>意見回報</li>
</ul>
</div>
</div>
</div>
</body>
</html> 六、🥇 如何讓學習不再盲目
- 入門期間不要盲目看太多書，找一本網上或身邊有經驗程式員推薦的教材，先系統的學習。
- 多看幫助文檔，幫助文檔就像一個遊戲的玩法說明通關秘籍，該看就看别太自信。
- 菜鳥容易被對象、屬性、方法等詞彙迷惑？那是你連最基礎知識都還沒掌握。
- 不要忽視沒一個看起來不起眼的問題，經常總結做到舉一反三。
- 沒積累足夠知識和經驗前，你是開發不出一個完整項目的。
- 把最新技術挂在嘴邊，還不如把過時技術牢記心中。
- 活到老學到老，隻有一招半式是闖不了江湖的。
- 看得懂的書，仔細看；看不懂的書，硬着頭皮也要看完。
- 書讀百遍其義自見，别指望讀一遍就能掌握。
- 請把教程裡的例子親手實踐下，即使案例中有完整源碼。
- 把在教程中看到的有意義的例子擴充；并将其切實的運用到自己的工作中。
- 不要漏掉教程中任何一個習題——請全部做完并做好筆記。
- 水準是在不斷的實踐中完善和發展的，你與大牛差的隻是經驗的積累。
- 每學到一個難點的時候，嘗試對朋友或網上分享你的心得,讓别人都能看得懂說明你真的掌握。
- 做好儲存源檔案的習慣，這些都是你的知識積累。
- 遇到問題不要張口就問，要學會自己找答案，比如google、百度和w3cschool上都有很多程式設計相關資料，你隻要輸入關鍵字就能找到你的答案。