Partial upload - 202212091913

README.md

@@ -9,9 +9,17 @@ TODO：
 - 为历史记录列表增加删除按钮
 - 一键加入将查询结果歌曲加入播放列表（主要是历史记录和云列表）
 - 删除正在播放歌曲之前的歌曲会导致播放次序变得混乱，需要修正
+- 标题可以展示当前播放的歌曲名称，对长歌名支持滚动显示
+- 规范性调整：把重用部分用class表示，避免id重复。
+- 列表重新布局：双列布局，第一列显示歌曲名称，第二列显示歌手（字体略小，偏灰色）
+- 不确定能否完成 ———— 放弃HTML自带audio标签样式，重写播放控制器UI（工程量巨大）
 
 ---
 Changelog:
+β-202212091822:
+- 历史记录也可以删除啦！经过补充，我们为历史记录列表增加了删除按钮。
+- 因为新按钮的加入，按钮组变得更长了，出现了一些布局问题。现在更改了按钮的布局。
+
 β-202212081209:
 - 修复：删除列表正在播放之前的歌曲之后导致nowPlay错误无法正常使用的问题
 

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){

index.html

@@ -31,7 +31,30 @@
         </div>
         <div id="search-result">
             <span id="searchtext">以下是查询 <span id="keyword">None</span> 的结果</span><br />
-            <ul id="reslist"></ul>
+            <ul id="reslist">
+				<!-- 测试样例 -->
+				<li>
+					TestMusic-Artist
+					<span class="btn-series">
+						<button type="button" id="delbtn" onclick="">删除</button>
+						<button type="button" id="playbtn" onclick="">加入播放列表</button>
+					</span>
+				</li>
+				<li>
+					TestMusic-Artist-long-long-long-long-long-long-long-long-long
+					<span class="btn-series">
+						<button type="button" id="delbtn" onclick="">删除</button>
+						<button type="button" id="playbtn" onclick="">加入播放列表</button>
+					</span>
+				</li>
+				<li>
+					TestMusic-Artist
+					<span class="btn-series">
+						<button type="button" id="delbtn" onclick="">删除</button>
+						<button type="button" id="playbtn" onclick="">加入播放列表</button>
+					</span>
+				</li>
+			</ul>
         </div>
     </div>
 </body>

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 += `<li>${list.items[i].songname} - ${list.items[i].artist}<button type="button" id="delbtn" onclick="RemoveItemFromListByID(${i})">删除</button></li>`;
+        reslist.innerHTML += `<li>${list.items[i].songname} - ${list.items[i].artist}<span class="btn-series"><button type="button" id="delbtn" onclick="RemoveItemFromListByID(${i})">删除</button></span></li>`;
         //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 += `<li>${historyList[i].songname} - ${historyList[i].artist}` + 
-        `<button type="button" id="playbtn" onclick="addlist(${historyList[i].songid}, '${historyList[i].songname}', '${historyList[i].artist}')">加入播放列表</button></li>`;
-    }
+        reslist.innerHTML += `<li>${historyList[i].songname} - ${historyList[i].artist}` +
+		`<span class="btn-series">` + 
+		`<button type="button" id="delbtn" onclick="deleteHistory(${i})">删除</button>` + 
+        `<button type="button" id="playbtn" onclick="addlist(${historyList[i].songid}, '${historyList[i].songname}', '${historyList[i].artist}')">加入播放列表</button></li>` + 
+		`</span>`;
+	}
     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 += `<li>${historyList[i].songname} - ${historyList[i].artist}` +
+	    `<span class="btn-series">` + 
+	    `<button type="button" id="delbtn" onclick="deleteHistory(${i})">删除</button>` + 
+	    `<button type="button" id="playbtn" onclick="addlist(${historyList[i].songid}, '${historyList[i].songname}', '${historyList[i].artist}')">加入播放列表</button></li>` + 
+	    `</span>`;
+	}
+	document.getElementById( 'keyword' ).innerHTML = "历史记录";
+	
+	// put the HistoryList back into the LocalStorage
+	localStorage.setItem( "historyList", JSON.stringify( historyList ) );
 }