<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>信管三班王欣然</title>
<style>
body {
background-image: url("背景.webp");
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start; /* 修改为上方对齐 */
height: 100vh;
margin: 0;
}
#background-music {
display: none;
}
#music-container {
display: flex;
align-items: center;
margin-top: 10px; /* 上移按钮和音轨 */
}
#music-button {
background: none;
border: none;
cursor: pointer;
outline: none;
}
#music-button img {
width: 50px;
}
#music-progress {
display: flex;
align-items: center;
width: 80%;
}
.artistic-text {
font-family: "Your Artistic Font", sans-serif;
font-size: 24px;
color: white;
text-align: center; /* 修改为居中对齐 */
position: absolute;
top: 250px; /* 上移艺术字文本 */
left: 10px;
right: 10px; /* 让文本占满屏幕宽度 */
z-index: 1;
}
.artistic-text p {
margin: 0;
}
</style>
</head>
<body>
<center><h1>信管三班王欣然</h1></center>
<!-- 插入背景音乐 -->
<audio id="background-music" loop>
<source src="背景音.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
<!-- 音乐容器包含音乐按钮和音轨 -->
<div id="music-container">
<!-- 添加音乐按钮 -->
<div id="music-button">
<button>
<img id="play-pause-icon" src="暂停.png" alt="暂停">
</button>
</div>
<!-- 音轨显示播放进度 -->
<div id="music-progress">
<input type="range" id="progress-bar" min="0" max="100" value="0">
</div>
</div>
<!-- 艺术字文本 -->
<div class="artistic-text">
<p>INTJ</p>
<p>巨蟹座</p>
<p>热爱舞蹈</p>
<p>预备人工智能工程师</p>
<p>做饭小能手</p>
</div>
<script>
var music = document.getElementById("background-music");
var musicButton = document.getElementById("music-button");
var playPauseIcon = document.getElementById("play-pause-icon");
var progressBar = document.getElementById("progress-bar");
// 播放/暂停音乐
musicButton.addEventListener("click", function() {
if (music.paused) {
music.play();
playPauseIcon.src = "播放.png";
} else {
music.pause();
playPauseIcon.src = "暂停.png";
}
});
// 更新音轨和播放进度
music.addEventListener("timeupdate", function() {
var progress = (music.currentTime / music.duration) * 100;
progressBar.value = progress;
});
// 调整播放进度
progressBar.addEventListener("input", function() {
var seekTime = (progressBar.value / 100) * music.duration;
music.currentTime = seekTime;
});
</script>
</body>
</html>
