<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><!-- 設置標簽頁圖標 --><link rel="shortcut icon" href="./favicon.ico" type="image/x-icon"><title>Document</title><style>html {background: #000;color: aliceblue;width: 100%;height: 100%;}body {display: flex;flex-direction: column;width: 100%;height: 100%;overflow: hidden;}ul, li {margin: 0;padding: 0;}.head {flex: none;display: flex;justify-content: center;align-items: center;padding: 30px 0;}img {width: 100px;height: 100px;border-radius: 50%;margin-right: 20px;}.right {display: flex;flex-direction: column;justify-content: center;}.des {margin: 6px;padding-left: 7px;}audio {width: 600px;height: 60px;}.content {flex: 1;overflow: hidden;margin: 0;}#list {list-style: none;transition: .5s ease;}.lyric {text-align: center;height: 40px;line-height: 40px;transition: 0.2s;}.active {/* font-size: 20px; // 過渡會引起回流，推薦使用tranform */transform: scale(1.2);color: aquamarine;}</style>
</head>
<body><div class="head"><img src="http://p3fx.kgimg.com/uploadpic/softhead/120/20241213/20241213201306973919.jpg" /><div class="right"><p class="des">江語晨-最后一頁</p><!-- 加controls這個屬性才能看到audio標簽 --><audio controls autoplay src = "https://sharefs.tx.kugou.com/202505141511/3fdf7e70100a2d282f80b08266c04d5d/v3/653e2f76f69079273c79f65fecf58aea/yp/full/ap1000_us0_pi409_s2981929298.mp3"></div></div><div class="content"><ul id="list"></ul></div><script> const lyr = "[00:00.00]滴滴音樂網 www.dda5.com\n[00:00.20]\n[00:00.56]雨停滯天空之間\n[00:04.07]像淚在眼眶盤旋\n[00:07.90]這也許是最后一次見面\n[00:15.43]沿途經過的從前\n[00:19.14]還來不及再重演\n[00:23.86]擁抱早已悄悄冷卻\n[00:30.84]海潮聲 淹沒了離別時的黃昏\n[00:38.36]只留下不舍的體溫\n[00:45.70]星空下 擁抱著快凋零的溫存\n[00:52.96]愛只能在回憶里完整\n[01:03.92]想把你抱進身體里面\n[01:09.45]不敢讓你看見\n[01:13.09]嘴角那顆沒落下的淚\n[01:19.73]如果這是最后的一頁\n[01:24.34]在你離開之前\n[01:28.08]能否讓我把故事重寫\n[02:38.01]雨停滯天空之間\n[02:41.62]像淚在眼眶盤旋\n[02:45.45]這也許是最后一次見面\n[02:53.00]沿途經過的從前\n[02:56.70]還來不及再重演\n[03:01.47]擁抱早已悄悄冷卻\n[03:08.49]海潮聲 淹沒了離別時的黃昏\n[03:15.89]只留下不舍的體溫\n[03:23.26]星空下 擁抱著快凋零的溫存\n[03:30.52]愛只能在回憶里完整\n[03:37.83]想把你抱進身體里面\n[03:43.08]不敢讓你看見\n[03:46.85]嘴角那顆沒落下的淚\n[03:52.90]如果這是最后的一頁\n[03:58.10]在你離開之前\n[04:01.81]能否讓我把故事重寫\n[04:08.04]想把你抱進身體里面\n[04:13.23]不敢讓你看見\n[04:16.83]嘴角那顆沒落下的淚\n[04:22.88]如果這是最后的一頁\n[04:28.12]在你離開之前\n[04:31.83]能否讓我把故事重寫\n";const avatar = "http://p3fx.kgimg.com/uploadpic/softhead/120/20241213/20241213201306973919.jpg";const src = "https://sharefs.tx.kugou.com/202505141511/3fdf7e70100a2d282f80b08266c04d5d/v3/653e2f76f69079273c79f65fecf58aea/yp/full/ap1000_us0_pi409_s2981929298.mp3";const audio = document.querySelector('audio');audio.src = src;const lyrics = lyr.split('\n').filter(v => v).map((item) => {// const matchs = item.match(/\[(\S+)\](\S*)/);const [_, time, sentence] = item.split(/[\[\]]/); // 根據[或]符號分割const [minute, second] = time.split(':'); // 00:30.84const fTime = +minute * 60 + +second;return { time: fTime, sentence };});console.log('lyrics', lyrics);const content = document.querySelector('.content');const list = document.querySelector('#list');// 創建一個文檔片段，把所有dom的操作先應用在這個片段上，之后將片段加入文檔，就可以做到將多次dom操作合并成一次，提高效率。const frag = document.createDocumentFragment();lyrics.forEach(({ sentence }) => {const li = document.createElement('div');//innerText和textContent的區別；attributes和property的區別li.innerText = sentence;// add remove toggleli.classList.add('lyric');// 操作dom樹次數過多，需要優化frag.appendChild(li);});list.appendChild(frag);// console.dir(list);audio.play();// 監聽歌曲進度，設置歌詞偏移量const contentHeight = content.clientHeight;const listHeight = list.clientHeight;const lyricHeight = list.children[0].clientHeight;const minOffset = 0;const maxOffset = listHeight - contentHeight;const scrollSentence = () => {const currentTime = audio.currentTime;const index = lyrics.findIndex(({ time }) => time > currentTime);const currentIndex = index < 0 ? lyrics.length - 1 : index - 1;let offset = currentIndex * lyricHeight + lyricHeight / 2 - contentHeight / 2;if (offset < 0) {offset = 0;}if (offset > maxOffset) {offset = maxOffset;}list.style.transform = `translateY(-${offset}px)`;const activeLi = list.querySelector('.active');if (activeLi) {activeLi.classList.remove('active');}const li = list.children[currentIndex];if (li) {li.classList.add('active');}}audio.ontimeupdate = (e) => {scrollSentence();};</script>
</body>
</html>
效果：
如何刪除數據庫和表？)
