Hbuilder音乐封面项目

Hbuilder音乐封面项目

css文件

main.css

*{
	margin: 0px;padding: 0px;
}

body{
	background-color: #aaffff;
}

table{
	width: 80%;
	margin:50px auto;
}

thead tr th{
	height: 40px;
	background-color: #9bffaf;
	font-size: 30px;
	font-weight: bolder;
}
tbody tr td img{
	width: 200px;
	height: 100px;
}
tbody tr td{
	text-align: center;
}
tbody tr td button{
	width:70%;
	height: 30px;
	background-color: #f0ad4e;
	color: #FFFFFF;
	border-radius: 5px;
}

editMusic.css

.editPanel{
	width: 400px;
	height: 400px;
	background-color: #f0d694;
	position: absolute;
	margin: 50px auto;
	left: 30%;
	top: 100px;
	display:none;
}
.editPanel h1{
	width: 100%;
	height: 40px;
	background-color: gold;
	border-bottom: 1px solid beige;
	opacity: 0.5;
}
.closeEditPanel{
	width: 40px;
	height: 40px;
	background-color: cornflowerblue;
	float: left;
	
}
.item{
	width: 90%;
	height: 40px;
	margin: 10px auto;
}
.item span{
	width: 25%;
	height: 40px;
	text-align: center;
	display: inline-block;
}
.item input{
	height: 20px;
}
.item button{
	width: 100px;
	height: 40px;
	display: inline-block;
	margin-left: 110px;
}

addMusic.css`.

addMusic{
	width: 100px;
	height: 40px;
	background-color: coral;
	position: relative;
	left: 150px;
	top: 45px;
	
}

.addPanel{
	width: 400px;
	height: 400px;
	background-color: #f0d694;
	position: absolute;
	margin: 50px auto;
	left: 30%;
	top: 100px;
	display:none;
}
.addPanel h1{
	width: 100%;
	height: 40px;
	background-color: gold;
	border-bottom: 1px solid beige;
	opacity: 0.5;
}
.closeAssPanel{
	width: 40px;
	height: 40px;
	background-color: cornflowerblue;
	float: left;
	
}
.item{
	width: 90%;
	height: 40px;
	margin: 10px auto;
}
.item span{
	width: 25%;
	height: 40px;
	text-align: center;
	display: inline-block;
}
.item input{
	height: 20px;
}
.item button{
	width: 100px;
	height: 40px;
	display: inline-block;
	margin-left: 110px;
}

img文件

js文件

main.js

	var musicArray = [
		{id:"1",name:"答案",author:"王源",imgPath:"img/music1.jpg",size:"04:03"},
		{id:"2",name:"小星球",author:"陈意涵",imgPath:"img/music2.jpg",size:"04:03"},
		{id:"3",name:"雪落下的声音",author:"陆虎",imgPath:"img/music3.jpg",size:"04:03"},
		{id:"4",name:"水星记",author:"阿伦",imgPath:"img/music4.jpg",size:"04:03"},
		{id:"5",name:"起风了",author:"辣椒",imgPath:"img/music5.jpg",size:"04:03"}
	];

	//预加载函数，只要页面加载完成马上执行此事件
	$(function(){
		loadMusic();
	});

	//利用musicArray假数据向页面的tbody写入音乐内容
	function loadMusic(){
		var html = '';//向页面写入的标签和内容
		for(var i = 0; i<musicArray.length;i++){
			html += '<tr>';
				html += '<td>'+musicArray[i].name+'</td>';
				html += '<td>'+musicArray[i].author+'</td>';
				html += '<td><img src="'+musicArray[i].imgPath+'"></td>';
				html += '<td>'+musicArray[i].size+'</td>';
				html += '<td><button onclick="showMusicById('+musicArray[i].id+')">修改</button></td>';
				html += '<td><button onclick="delMusic('+musicArray[i].id+')">删除</button></td>';
			html += '</tr>';
		}
		$("tbody").html(html);
	}
	//根据id删除一首歌
	function delMusic(id){
		var index = 0;//此id的歌曲所在数组中的下标为
		for(var i = 0; i<musicArray.length;i++){
			if(musicArray[i].id == id){
				index = i;
			}
		}
		musicArray.splice(index,1);
		loadMusic();
	}
			
			
	//点击添加,显示歌曲
	$(".addMusic").click(function(){
		$(".addPanel").show();
	})
	//点击X关闭
	$(".closeAssPanel").click(function(){
		$(".addPanel").hide();
	})
	//点击 保存
	$(".saveAdd").click(function(){
		var name=$(".addPanel input[name='name']").val();
		var author=$(".addPanel input[name='name']").val();
		var imgPath=$(".addPanel input[name='name']").val();
		var size=$(".addPanel input[name='name']").val();
		//先创建一个对象，将数据放入
		var obj={};
		obj.name=name;
		obj.author=author;
		obj.imgPath=imgPath;
		obj.size=size;
		//将对象添加到数组
		musicArray.push(obj);
		//保存后隐藏
		$(".addPanel").hide();
		//调用显示数组的方法
		loadMusic();
	})
	//点击修改按钮显示
	function showMusicById(id){
		
	// 	var index=0;
	// 	for(var i=0;i<musicArray.length;i++){
	// 		if(musicArray[i].id == id){
	// 			index=i;
	// 		}
	// 	}
	// 	//先获取后添加
	// 	 var name=musicArray[index].name;
	// 	 var author=musicArray[index].author;
	// 	 var imgPath=musicArray[index].imgPath;
	// 	 var size=musicArray[index].size;
	// 	 //数据填充
	
	// $(".editPanel input[name='name']").val(name);
	// $(".editPanel input[name='author']").val(author);
	// $(".editPanel input[name='imgPath']").val("");
	// $(".editPanel input[name='size']").val(size);
	// $(".saveEdit").attr("id",id);
		$(".editPanel").show();
		console.log(id)
	}//点击X关闭
	$(".closeEditPanel").click(function(){
		$(".editPanel").hide();
	})
	//保存
	$(".saveEdit").click(function(){
		//获取id
		var id=$(".saveEdit").attr("id");
		var name=$(".editPanel input[name='name']").val(name);
	    var author=$(".editPanel input[name='author']").val(author);
		var imgPath=$(".editPanel input[name='imgPath']").val("");
		var size=$(".editPanel input[name='size']").val(size);
		var index=0;
		for(var i=0;i<musicArray.length;i++){
		 		if(musicArray[i].id == id){
		 			index=i;
		 		}
		 	}
			musicArray[index].name=name;
			musicArray[index].author=author;
			musicArray[index].imgPath=imgPath;
			musicArray[index].size=size;
			$(".editPanel").hide();
			loadMusic();
	})

index.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" href="css/main.css">
		<link rel="stylesheet" type="text/css" href="css/addMusic.css"/>
		<link rel="stylesheet" type="text/css" href="css/editMusic.css"/>
	</head>
	<body>
		<button type="button" class="addMusic">添加歌曲</button>
		<table border="1" cellspacing="0">
			<thead>
				<tr>
					<th>音乐名称</th>
					<th>歌手</th>
					<th>音乐封面</th>
					<th>总时长</th>
					<th colspan="2">操作</th>
				</tr>
			</thead>
			<tbody></tbody>
		</table>
		<div class="addPanel">
			<h1>
				<button class="closeAssPanel">X</button>
			</h1>
			<div class="item">
				<span >歌名</span><input type="text" name="name">
			</div>
			<div class="item">
				<span >歌手</span><input type="text" name="author">
			</div>
			<div class="item">
				<span >封面</span><input type="file" name="imPath">
			</div>
			<div class="item">
				<span >时长</span><input type="text" name="size">
			</div>
			<div class="item">
				<button type="button" class="saveAdd">保存</button>
			</div>
		</div>
		
			<div class="editPanel">
				<h1>
					<button class="closeEditPanel">X</button>
				</h1>
				<div class="item">
					<span >歌名</span><input type="text" name="name">
				</div>
				<div class="item">
					<span >歌手</span><input type="text" name="author">
				</div>
				<div class="item">
					<span >封面</span><input type="file" name="imPath">
				</div>
				<div class="item">
					<span >时长</span><input type="text" name="size">
				</div>
				<div class="item">
					<button type="button" class="saveEditEdit">修改</button>				</div>
				
		    </div>
		<script src="js/jquery-3.6.0.js"></script>
		<script src="js/main.js"></script>
	</body>
</html>

效果图