iT邦幫忙

鐵人檔案

2025 iThome 鐵人賽
回列表
佛心分享-IT 人自學之術

打造專屬於歌手的音樂資訊網頁:從零開始的前端實作與技術分享 系列

這個系列將以我喜歡的歌手為主題,透過 HTML、CSS、JavaScript 與 jQuery 等技術,製作一個專屬的歌手介紹網頁。內容將涵蓋:歌手基本資訊、專輯與歌曲列表、隨機播放歌曲、互動式元素,以及簡單的前端美化與動畫效果。
同時,在實作的過程中,我會每天記錄學到的知識點、遇到的問題與解決方式,並整理成技術分享文章,讓讀者不僅能看到成果,也能學習網頁開發的基礎與實務技巧。

參賽天數 19 天 | 共 23 篇文章 | 1 人訂閱 訂閱系列文 RSS系列文
DAY 19

全部專輯歌詞頁面

目標 1.在 lyrics.js 中,填寫專輯每首歌的歌詞資料2.確保從專輯列表點擊 Lyrics 按鈕可以顯示對應歌詞3.從單曲展示區點及歌曲後顯示正確的歌詞...

2025-10-06 ‧ 由 sheep 分享
DAY 19

完成專輯區所有歌曲的 YouTube 圖示連結

目標 1.在歌詞頁面顯示 歌名、歌詞2.若有 YouTube 連結,顯示播放按鈕 javascript // YouTube 連結資料 const y...

2025-10-07 ‧ 由 sheep 分享
DAY 19

新增「隨機播放一首」按鈕

目標 在每張專輯頁面新增「隨機播放一首」按鈕,使用戶可以隨機點擊播放專輯內的任意一首歌曲。目前專輯頁面已經能夠顯示專輯資訊、專輯封面、以及歌曲列表。今天的目標是...

2025-10-08 ‧ 由 sheep 分享