昨天完成了首頁的「單曲展示區」，今天的任務是：
點擊單曲後可以進入「歌詞頁面」，顯示該單曲的歌名、歌詞，並附上對應的 YouTube 按鈕，方便直接收聽歌曲。
這次主要新增了三個檔案：
HTML 部分主要放置標題、返回首頁按鈕、YouTube 按鈕，以及顯示歌詞的 <pre> 區塊：
<!DOCTYPE html>
<html lang="zh-Hant">
<head>
<meta charset="UTF-8">
<title>歌詞頁面</title>
<link rel="stylesheet" href="lyrics.css">
</head>
<body>
<!-- 返回首頁按鈕 -->
<a href="index.html?tab=music" class="back-btn">← 返回</a>
<!-- 歌曲標題 -->
<h1 id="songTitle">單曲歌詞</h1>
<!-- YouTube 連結按鈕 -->
<a id="youtubeBtn" class="youtube-btn" target="_blank">
<img src="images/youtube-logo.png" alt="YouTube" width="40">
</a>
<!-- 歌詞內容 -->
<pre id="lyricsContent"></pre>
<script src="lyrics.js"></script>
</body>
</html>
id="songTitle" 來動態顯示歌名id="lyricsContent" 會放對應的歌詞id="youtubeBtn" 會依歌曲設定不同的 YouTube 連結將整體頁面設計為深色系，這樣和整體網頁的設計才有協調感
body {
font-family: Arial, sans-serif;
background-color: #121212; /* 深色背景 */
color: #f5f5f5; /* 全局文字亮色 */
margin: 0;
padding: 20px;
text-align: center;
}
h1 {
margin-bottom: 10px;
color: #ffffff;
}
pre {
text-align: left;
white-space: pre-wrap;
background: #424040; /* 深灰背景 */
padding: 20px;
border-radius: 12px;
box-shadow: 0 4px 6px rgba(0,0,0,0.4);
max-width: 800px;
margin: 0 auto;
line-height: 1.6;
color: #e0e0e0; /* 歌詞文字亮灰 */
}
.back-btn {
position: absolute;
top: 20px;
left: 20px;
text-decoration: none;
font-size: 16px;
color: #ffffff;
background: #333333;
padding: 8px 14px;
border-radius: 8px;
box-shadow: 0 2px 5px rgba(0,0,0,0.4);
transition: background 0.3s ease, color 0.3s ease;
}
.back-btn:hover {
background: #555555;
color: rgb(79, 194, 223);
}
/* YouTube 圖片按鈕置中顯示 */
.youtube-btn {
display: block;
text-align: center;
margin: 10px auto;
}
.youtube-btn img {
width: 40px;
transition: transform 0.3s ease;
filter: drop-shadow(0 2px 4px rgba(0,0,0,0.6));
}
.youtube-btn img:hover {
transform: scale(1.15);
}
JavaScript 用來根據 URL 參數（?song=song1）讀取對應的歌詞與 YouTube 連結。
// 取得 URL 參數
const urlParams = new URLSearchParams(window.location.search);
const songId = urlParams.get('song');
// 歌詞資料
const lyricsData = {
song1: `
Thinkin' ’bout you, I keep thinkin' 'bout you
I keep sayin’ I don't want you, but I think that I do (Oh-woah)
Thinkin' 'bout you, thinkin', thinkin' 'bout you (Oh-woah)
I keep thinkin', thinkin’ ’bout you (Yeah)
Want you, but I think that I do (Oh-woah)
Thinkin' ’bout you, thinkin', thinkin' 'bout you (Oh-woah)
I keep thinkin’, thinkin' 'bout you
Want you, but I think that I do
Baby, is it wrong if I still call you baby?
Can't seem to sleep without you lately
Even though we ended on a maybe
Your heart rate is beatin'
Your body heat, your breathin'
And I can't shake the feelin'
You feel it like I feel it
We don't gotta talk, I know what you mean
And I don't wanna stop 'cause baby, every time you leave, I'm
(Oh-woah) Thinkin' 'bout you, I keep thinkin' 'bout you
(Oh-woah) I keep sayin' I don't want you (Yeah), but I think that I do (I do)
(Oh-woah) Thinkin' 'bout you, I keep thinkin' 'bout you
(Oh-woah) I keep sayin' I don't want you (Think 'bout you), but I think that I do (I do)
Same things, who says that we can't do the same things?
And even if you never take me (Even if you never take me)
You know I'll always be your baby, mm (So what you got?)
Your heart rate (Heart rate) is beatin' (Beatin')
Your body heat, your breathin'
And I can't shake (Can't shake) the feelin' (Feelin')
You feel it like I feel it
We don't gotta talk, I know what you mean
And I don't wanna stop 'cause baby, every time you leave, I'm
Thinkin' 'bout you, I keep thinkin' 'bout you
I keep sayin' I don't want you, but I think that I do (Oh-woah)
(Oh-woah, think 'bout you)
(Oh-woah)
(Oh-woah, think 'bout you)
(Oh-woah) Thinkin' 'bout you, I keep thinkin' 'bout you
(Oh-woah) I keep sayin' I don't want you (Yeah), but I think that I do
(Oh-woah) Thinkin' 'bout you, I keep thinkin' 'bout you
(Oh-woah) I keep sayin' I don't want you, but I think that I do (I do)
Thinkin' 'bout you, thinkin', thinkin' 'bout you
I keep thinkin', thinkin' 'bout you
Want you, but I think that I do
Baby, is it wrong if I still call you baby? (Thinkin' 'bout you, thinkin', thinkin' 'bout you)
I keep thinkin', thinkin' 'bout you
Want you, but I think that I do`,
song2:`
It's just you and I, and no other guys
We got no interruptions and we both feelin' the vibe
Say I'm not your type
But I know what's on your mind
We can talk about nothin' or we can see what it's like
Don't lie, baby don't lie
His love never felt right
Switch sides and I'm beside you
If you say it's alright (Don't lie, baby don't lie)
Way too many heads, need a steady view
Smokin' cigarettes at the rendezvous
Never meant to cross you
But my jaw hit the floor with the one, two
Think I want you
You say this ain't love but it's still the same love
Make love, anything to sate ya
Don't be shy, you decide
Say can I, make you mine?
Don't lie, baby don't lie
His love never felt right
Switch sides and I'm beside ya
If you say it's alright (lemme show you how it feel like)
Don't lie, baby don't lie
His love never felt right
Switch sides and I'm beside ya
If you say it's alright (Don't lie, baby don't lie)
(Ahh) Your skin, so fine (Ah-ahh, ahh)
Come close baby put it on mine
(Ahh) Your skin, so fine (Ah-ahh, ahh)
Come close baby put it on mine
It's just you and I and no other guys
We got no interruptions and we both feelin' the vibe
Say I'm not your type
But I know what's on your mind
We can talk about nothin' or we can see what it's like
No-ohh-ohh
Don't lie, baby don't lie
His love never felt right
Switch sides and I'm beside ya (Ahh)
If you say it's alright (Ah-ahh, ahh)
(Lemme show you what it feel like)
(Don't lie, baby don't lie)`,
......
song7: `
Moving on, never feel the same
Nothing seems to cover up the pain
Baby, I've been trying
But you can't hear what I say
Baby, baby
Moving on, never feel the same
Nothing seems to cover up the pain
Baby, I've been trying
But you can't hear what I say
Baby, baby
Moving on, never feel the same
Nothing seems to cover up the pain
Baby, I've been trying
But you can't hear what I say
Baby, baby
Moving on, never feel the same
Nothing seems to cover up the pain
Baby, I've been trying
But you can't hear what I say
Baby, (Aya), baby
Moving on, never feel the same
Nothing seems to cover up the pain
Baby, I've been trying
But you can't hear what I say
Baby, baby
Moving on, never feel the same
Nothing seems to cover up the pain
Baby, I've been trying
But you can't hear what I say
Baby, baby`
};
// 歌名（可以自己對應比較好看）
const songTitles = {
song1: "WANTCHU",
song2: "beside you",
song3: "onoffonoff",
song4: "just friends",
song5: "magnolia",
song6: "as long as it takes you",
song7: "over u"
};
// YouTube 連結資料
const youtubeLinks = {
song1: "https://www.youtube.com/watch?v=ghUTY5zK-gQ",
song2: "https://www.youtube.com/watch?v=aMyO6GNkfpo",
song3: "https://www.youtube.com/watch?v=3ihhZMVlBno",
song4: "https://www.youtube.com/watch?v=HUyTxYSaFAk",
song5: "https://www.youtube.com/watch?v=unnHxxwN9IQ",
song6: "https://www.youtube.com/watch?v=C1PaLITdwOU",
song7: "https://www.youtube.com/watch?v=4i0cOpcM1xU"
};
// 設定 YouTube 按鈕連結
const youtubeBtn = document.getElementById('youtubeBtn');
if (youtubeLinks[songId]) {
youtubeBtn.href = youtubeLinks[songId];
} else {
youtubeBtn.style.display = "none"; // 如果沒有設定連結就隱藏按鈕
}
// 顯示歌名和歌詞
document.getElementById('songTitle').textContent = songTitles[songId] || "單曲歌詞";
document.getElementById('lyricsContent').textContent = lyricsData[songId] || "歌詞不存在";
這裡的邏輯：
iThome鐵人賽
看影片追技術