From 507afca8b6690cb493131236b2d47be9b4a7270b Mon Sep 17 00:00:00 2001 From: Starlight-0208 <89368027+Starlight0208@users.noreply.github.com> Date: Fri, 9 Dec 2022 19:12:14 +0800 Subject: [PATCH] Partial upload - 202212091913 --- README.md | 8 ++++++++ css/style.css | 12 ++++++++---- index.html | 25 ++++++++++++++++++++++++- js/main.js | 44 ++++++++++++++++++++++++++++++++++++++++---- 4 files changed, 80 insertions(+), 9 deletions(-) diff --git a/README.md b/README.md index b3e776e..d355b8c 100644 --- a/README.md +++ b/README.md @@ -9,9 +9,17 @@ TODO： - 为历史记录列表增加删除按钮 - 一键加入将查询结果歌曲加入播放列表（主要是历史记录和云列表） - 删除正在播放歌曲之前的歌曲会导致播放次序变得混乱，需要修正 +- 标题可以展示当前播放的歌曲名称，对长歌名支持滚动显示 +- 规范性调整：把重用部分用class表示，避免id重复。 +- 列表重新布局：双列布局，第一列显示歌曲名称，第二列显示歌手（字体略小，偏灰色） +- 不确定能否完成 ———— 放弃HTML自带audio标签样式，重写播放控制器UI（工程量巨大） --- Changelog: +β-202212091822: +- 历史记录也可以删除啦！经过补充，我们为历史记录列表增加了删除按钮。 +- 因为新按钮的加入，按钮组变得更长了，出现了一些布局问题。现在更改了按钮的布局。 + β-202212081209: - 修复：删除列表正在播放之前的歌曲之后导致nowPlay错误无法正常使用的问题 diff --git a/css/style.css b/css/style.css index b77a725..1c9c5f7 100644 --- a/css/style.css +++ b/css/style.css @@ -80,8 +80,7 @@ color: #fff; padding: 5px 10px; cursor: pointer; - position: absolute; - right: 10px; + float: right; } #Player{ @@ -129,8 +128,13 @@ color: #fff; padding: 5px 10px; cursor: pointer; - position: absolute; - right: 10px; + float: right; + margin-left: 3px; +} + +.btn-series{ + position: absolute; + right: 20px; } @media screen and (max-width: 768px){ diff --git a/index.html b/index.html index 134fd71..b1a66b9 100644 --- a/index.html +++ b/index.html @@ -31,7 +31,30 @@
以下是查询 None 的结果
- +
diff --git a/js/main.js b/js/main.js index 3c7ff24..9cec95d 100644 --- a/js/main.js +++ b/js/main.js @@ -225,7 +225,7 @@ function getplaylist(){ var reslist = document.getElementById("reslist"); reslist.innerHTML = ""; for(var i = 0; i < list.size(); i++){ - reslist.innerHTML += `
  • ${list.items[i].songname} - ${list.items[i].artist}
    • `; + reslist.innerHTML += `
  • ${list.items[i].songname} - ${list.items[i].artist}
    • `; //console.log(`${list.items[i].songname} - ${list.items[i].artist}`); } document.getElementById('keyword').innerHTML = "当前播放列表"; @@ -284,9 +284,12 @@ function gethistory(){ var reslist = document.getElementById("reslist"); reslist.innerHTML = ""; for(var i = 0; i < historyList.length; i++){ - reslist.innerHTML += `
  • ${historyList[i].songname} - ${historyList[i].artist}` + - `
    • `; - } + reslist.innerHTML += `
  • ${historyList[i].songname} - ${historyList[i].artist}` + + `` + + `` + + `
    • ` + + ``; + } document.getElementById('keyword').innerHTML = "历史记录"; } @@ -412,4 +415,37 @@ function PullToCloud(){ function deleteCloudList(){ //code... console.log("No working...") +} + +function deleteHistory( count ) { + // get HistoryList from LocalStorage + var historyList = JSON.parse( localStorage.getItem( "historyList" ) ); + // is null? + if( historyList == null ){ + // failed + } + + // if count is smaller than List length, throw error + if ( count > historyList.length ){ + console.log( "本次删除无效！\nThis deletion is invaild." ); + return; + } + + // find the item and delete it. + historyList.splice( count, 1 ); + + // Refresh the page + var reslist = document.getElementById( "reslist" ); + reslist.innerHTML = ""; + for( var i = 0; i < historyList.length; i++ ){ + reslist.innerHTML += `
  • ${historyList[i].songname} - ${historyList[i].artist}` + + `` + + `` + + `
    • ` + + ``; + } + document.getElementById( 'keyword' ).innerHTML = "历史记录"; + + // put the HistoryList back into the LocalStorage + localStorage.setItem( "historyList", JSON.stringify( historyList ) ); } \ No newline at end of file