Starlight-0208/WebPlayer
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

移除新UI、分页相关的代码（之后可能会Revert）

Browse Source
This commit is contained in:
Starlight-0208 2023-09-08 02:46:39 +08:00
parent 61c694595f
commit 2fee830dd0
3 changed files with 1 additions and 110 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

51
css/style.css
View File

@ -296,54 +296,3 @@ h1{
overflow: hidden; overflow: hidden;
white-space: nowrap; white-space: nowrap;
} }
/* nav */
ul.pagination {
display: inline-block;
padding: 0;
margin-bottom: 50px;
}
ul.pagination li {display: inline;}
ul.pagination li a {
color: black;
float: left;
padding: 8px 16px;
text-decoration: none;
}
ul.pagination li a.active {
background-color: #4CAF50;
color: white;
}
/* Player */
#Player-UI{
position: fixed;
bottom: 0;
width: 100%;
height: 50px;
background-color: #fff;
border-top: 1px solid #ccc;
z-index: 100;
}
#Player-UI > div{
width: 100%;
height: 100%;
float: left;
}
.progress-bar {
width: 100%;
height: 8px;
background-color: #ddd;
border-radius: 4px;
}
.progress-bar-fill {
height: 100%;
background-color: #4CAF50;
border-radius: 4px;
}

14
index.html
View File

@ -37,21 +37,7 @@
<div id="search-result"> <div id="search-result">
<span id="searchtext">以下是查询 <span id="keyword">None</span> 的结果</span><br /> <span id="searchtext">以下是查询 <span id="keyword">None</span> 的结果</span><br />
<ul id="reslist"></ul> <ul id="reslist"></ul>
<div style="width: 100%;">
<ul class="pagination">
<li><a href="#">«</a></li>
<li><a class="active" href="#">1</a></li>
<li><a href="#">»</a></li>
</ul>
</div>
</div> </div>
</div> </div>
<!-- <div id="player-container">
<div id="Player-UI" style="background-color: lime;">
<div class="progress-bar" style="height: 10px; margin-top: 15px; width: 600px; margin-left: 60px;">
<div id="progress-bar-fill" class="progress-bar-fill"></div>
</div>
</div>
</div> -->
</body> </body>
</html> </html>

46
js/main.js
View File

@ -603,48 +603,4 @@ function changeCyeleMode() {
CyclePlayMode = (CyclePlayMode + 1) % 3; CyclePlayMode = (CyclePlayMode + 1) % 3;
console.log(`当前的播放模式：${document.getElementById('cycle-stat').innerHTML}, ${CyclePlayMode}`) console.log(`当前的播放模式：${document.getElementById('cycle-stat').innerHTML}, ${CyclePlayMode}`)
changeCycleButton(); changeCycleButton();
} }
/* Player */
/*
const audioPlayer = document.getElementById('Player');
// const coverImageElement = document.querySelector('.cover-image');
// const songTitleElement = document.querySelector('.song-title');
// const artistElement = document.querySelector('.artist');
// const playPauseButton = document.getElementById('play-pause-btn');
const progressBarFill = document.getElementById('progress-bar-fill');
// 更新进度条和播放器当前时间
function updateProgressBar() {
const progress = (audioPlayer.currentTime / audioPlayer.duration) * 100;
progressBarFill.style.width = `${progress}%`;
}
// 进度条点击事件
progressBarFill.addEventListener('click', (event) => {
const progressBar = progressBarFill.parentNode;
const progressBarRect = progressBar.getBoundingClientRect();
const progressBarWidth = progressBarRect.width;
const clickX = event.clientX - progressBarRect.left;
const progress = clickX / progressBarWidth;
audioPlayer.currentTime = audioPlayer.duration * progress;
});
// 进度条拖动事件
let isDragging = false;
progressBarFill.addEventListener('mousedown', () => {
isDragging = true;
});
document.addEventListener('mousemove', (event) => {
if (isDragging) {
const progressBar = progressBarFill.parentNode;
const progressBarRect = progressBar.getBoundingClientRect();
const progressBarWidth = progressBarRect.width;
const clickX = event.clientX - progressBarRect.left;
const progress = clickX / progressBarWidth;
audioPlayer.currentTime = audioPlayer.duration * progress;
}
});
document.addEventListener('mouseup', () => {
isDragging = false;
});
// 播放器时间更新事件
audioPlayer.addEventListener('timeupdate', updateProgressBar);
*/