帮我用JS写一个能实现添加歌曲 、删除歌曲 、歌曲置顶 、查看播放列表 、退出系统的弹框页面
时间: 2023-12-28 16:05:41 浏览: 44
当然可以!以下是一个简单的示例代码,用于实现添加歌曲、删除歌曲、歌曲置顶、查看播放列表和退出系统的弹框页面:
```html
<!DOCTYPE html>
<html>
<head>
<title>播放列表</title>
<style>
body {
font-family: Arial, sans-serif;
}
h1 {
text-align: center;
}
#songList {
margin-bottom: 20px;
}
.song {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px;
border: 1px solid #ccc;
border-radius: 5px;
}
.song:hover {
background-color: #f5f5f5;
}
.song .name {
flex: 1;
}
.song .actions {
display: flex;
gap: 10px;
}
</style>
</head>
<body>
<h1>播放列表</h1>
<div id="songList">
<!-- 歌曲列表将在这里显示 -->
</div>
<script>
// 播放列表数组
var playlist = [];
// 添加歌曲
function addSong() {
var songName = prompt("请输入歌曲名称:");
if (songName) {
playlist.push(songName);
renderPlaylist();
}
}
// 删除歌曲
function deleteSong(index) {
playlist.splice(index, 1);
renderPlaylist();
}
// 歌曲置顶
function moveSongToTop(index) {
var song = playlist.splice(index, 1);
playlist.unshift(song[0]);
renderPlaylist();
}
// 渲染播放列表
function renderPlaylist() {
var songList = document.getElementById("songList");
songList.innerHTML = "";
playlist.forEach(function(song, index) {
var songElement = document.createElement("div");
songElement.className = "song";
var nameElement = document.createElement("div");
nameElement.className = "name";
nameElement.textContent = song;
var actionsElement = document.createElement("div");
actionsElement.className = "actions";
var deleteButton = document.createElement("button");
deleteButton.textContent = "删除";
deleteButton.onclick = function() {
deleteSong(index);
};
var moveToTopButton = document.createElement("button");
moveToTopButton.textContent = "置顶";
moveToTopButton.onclick = function() {
moveSongToTop(index);
};
actionsElement.appendChild(deleteButton);
actionsElement.appendChild(moveToTopButton);
songElement.appendChild(nameElement);
songElement.appendChild(actionsElement);
songList.appendChild(songElement);
});
}
// 初始化播放列表
renderPlaylist();
// 退出系统
function exitSystem() {
if (confirm("确定要退出系统吗?")) {
window.close();
}
}
</script>
<div style="text-align: center;">
<button onclick="addSong()">添加歌曲</button>
<button onclick="exitSystem()">退出系统</button>
</div>
</body>
</html>
```
将上述代码保存为一个HTML文件并在浏览器中打开,你就可以看到一个简单的弹框页面,可以添加歌曲、删除歌曲、将歌曲置顶、查看播放列表和退出系统。希望对你有帮助!
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)