用Javascript写一个音乐网站,其中包含歌手介绍,留言板和对歌曲的介绍 其中把对歌手和歌曲的介绍的部分空出来
时间: 2024-06-01 09:10:04 浏览: 38
<!DOCTYPE html>
<html>
<head>
<title>音乐网站</title>
<meta charset="utf-8">
<script type="text/javascript">
// 定义歌手信息
var singers = [
{
name: "歌手1",
introduction: "这是歌手1的介绍,这个歌手非常有才华。",
avatar: "singer1.jpg"
},
{
name: "歌手2",
introduction: "这是歌手2的介绍,这个歌手非常有人气。",
avatar: "singer2.jpg"
},
{
name: "歌手3",
introduction: "这是歌手3的介绍,这个歌手非常有实力。",
avatar: "singer3.jpg"
}
];
// 定义歌曲信息
var songs = [
{
name: "歌曲1",
singer: "歌手1",
introduction: "这是歌曲1的介绍,这首歌非常动听。",
cover: "song1.jpg",
url: "song1.mp3"
},
{
name: "歌曲2",
singer: "歌手2",
introduction: "这是歌曲2的介绍,这首歌非常感人。",
cover: "song2.jpg",
url: "song2.mp3"
},
{
name: "歌曲3",
singer: "歌手3",
introduction: "这是歌曲3的介绍,这首歌非常优美。",
cover: "song3.jpg",
url: "song3.mp3"
}
];
// 显示歌手介绍
function showSinger(index) {
var singer = singers[index];
document.getElementById("singer-name").innerHTML = singer.name;
document.getElementById("singer-intro").innerHTML = singer.introduction;
document.getElementById("singer-avatar").src = singer.avatar;
}
// 显示歌曲介绍
function showSong(index) {
var song = songs[index];
document.getElementById("song-name").innerHTML = song.name;
document.getElementById("song-singer").innerHTML = song.singer;
document.getElementById("song-intro").innerHTML = song.introduction;
document.getElementById("song-cover").src = song.cover;
document.getElementById("song-audio").src = song.url;
document.getElementById("song-audio").play();
}
// 提交留言信息
function submitMessage() {
var name = document.getElementById("message-name").value;
var content = document.getElementById("message-content").value;
alert("留言提交成功!\n姓名:" + name + "\n留言内容:" + content);
document.getElementById("message-name").value = "";
document.getElementById("message-content").value = "";
}
</script>
</head>
<body>
<h1>音乐网站</h1>
<h2>歌手介绍</h2>
<ul>
<li><a href="javascript:showSinger(0);">歌手1</a></li>
<li><a href="javascript:showSinger(1);">歌手2</a></li>
<li><a href="javascript:showSinger(2);">歌手3</a></li>
</ul>
<div>
<img id="singer-avatar" src="" width="200px" height="200px">
<h3 id="singer-name"></h3>
<p id="singer-intro"></p>
</div>
<h2>歌曲介绍</h2>
<ul>
<li><a href="javascript:showSong(0);">歌曲1</a></li>
<li><a href="javascript:showSong(1);">歌曲2</a></li>
<li><a href="javascript:showSong(2);">歌曲3</a></li>
</ul>
<div>
<img id="song-cover" src="" width="200px" height="200px">
<h3 id="song-name"></h3>
<p>歌手:<span id="song-singer"></span></p>
<p id="song-intro"></p>
<audio id="song-audio" controls>
<source src="" type="audio/mpeg">
</audio>
</div>
<h2>留言板</h2>
<form>
<label>姓名:</label>
<input type="text" id="message-name"><br>
<label>留言内容:</label>
<textarea id="message-content"></textarea><br>
<input type="button" value="提交" onclick="submitMessage();">
</form>
</body>
</html>