<
!DOCTYPE html>
<
html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>给朋友的悄悄话 - FLAC音乐版</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Arial', sans-serif;
}
body {
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background: linear-gradient(45deg, #ff7e5f, #feb47b, #86a8e7, #91eae4);
background-size: 400% 400%;
animation: gradientShift 15s ease infinite;
position: relative;
overflow-x: hidden;
}
/* 动态背景动画 */
@keyframes gradientShift {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}
/* 浮动气泡效果 */
.bubble {
position: absolute;
border-radius: 50%;
background: rgba(255, 255, 255, 0.2);
animation: float 15s infinite linear;
z-index: -1;
}
@keyframes float {
0% { transform: translateY(100vh) scale(0); opacity: 0; }
10% { opacity: 0.7; }
90% { opacity: 0.3; }
100% { transform: translateY(-100px) scale(1.2); opacity: 0; }
}
.container {
background-color: rgba(255, 255, 255, 0.9);
border-radius: 20px;
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
padding: 40px;
width: 90%;
max-width: 600px;
text-align: center;
z-index: 1;
backdrop-filter: blur(10px);
}
h1 {
color: #333;
margin-bottom: 10px;
font-size: 2.5rem;
}
.subtitle {
color: #666;
margin-bottom: 30px;
font-size: 1.2rem;
}
.search-container {
position: relative;
margin-bottom: 30px;
}
#searchInput {
width: 100%;
padding: 15px 20px;
font-size: 1.1rem;
border: 2px solid #ddd;
border-radius: 50px;
outline: none;
transition: all 0.3s;
}
#searchInput:focus {
border-color: #86a8e7;
box-shadow: 0 0 10px rgba(134, 168, 231, 0.5);
}
#searchBtn {
position: absolute;
right: 5px;
top: 5px;
background: linear-gradient(45deg, #86a8e7, #91eae4);
border: none;
color: white;
padding: 10px 25px;
border-radius: 50px;
cursor: pointer;
font-size: 1rem;
transition: all 0.3s;
}
#searchBtn:hover {
transform: scale(1.05);
box-shadow: 0 5px 15px rgba(134, 168, 231, 0.4);
}
.message-container {
background: white;
border-radius: 15px;
padding: 25px;
margin-top: 20px;
min-height: 150px;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
border-left: 5px solid #86a8e7;
opacity: 0;
transform: translateY(20px);
transition: all 0.5s;
}
.message-container.show {
opacity: 1;
transform: translateY(0);
}
.message-text {
font-size: 1.3rem;
color: #333;
line-height: 1.6;
}
.music-controls {
margin-top: 20px;
display: flex;
justify-content: center;
align-items: center;
gap: 10px;
}
.music-btn {
background: rgba(255, 255, 255, 0.7);
border: none;
border-radius: 50%;
width: 50px;
height: 50px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.5rem;
transition: all 0.3s;
}
.music-btn:hover {
background: white;
transform: scale(1.1);
}
.music-info {
margin-top: 10px;
font-size: 0.9rem;
color: #666;
}
footer {
margin-top: 30px;
color: #666;
font-size: 0.9rem;
}
/* 响应式设计 */
@media (max-width: 768px) {
.container {
padding: 25px;
}
h1 {
font-size: 2rem;
}
#searchInput {
padding: 12px 15px;
font-size: 1rem;
}
.message-text {
font-size: 1.1rem;
}
}
</style>
</head>
<body>
<
!-- 动态背景气泡 -->
<div id="bubbles"></div>
<
!-- 主要内容容器 -->
<div class="container">
<h1>给朋友的悄悄话</h1>
<p class="subtitle">输入朋友的名字，查看你想对他/她说的话</p>
<
!-- 搜索区域 -->
<div class="search-container">
<input type="text" id="searchInput" placeholder="请输入朋友的名字...">
<button id="searchBtn">搜索</button>
</div>
<
!-- 留言显示区域 -->
<div class="message-container" id="messageContainer">
<p class="message-text" id="messageText">请输入朋友的名字查看留言</p>
</div>
<
!-- 音乐控制 -->
<div class="music-controls">
<button class="music-btn" id="toggleMusicBtn">⏸</button>
<button class="music-btn" id="muteBtn">🔊</button>
</div>
<div class="music-info">支持FLAC无损音质 | 当前播放: 背景音乐</div>
<footer>
<
!-- 音乐播放器 (支持FLAC格式) -->
<audio id="bgMusic" loop>
<
!-- 重要：请将您的FLAC音乐文件命名为 background-music.flac 并放在与
HTML文件相同的目录 -->
<source src="background-music.flac" type="audio/flac">
<
!-- 为了更好的
浏览器兼容性，建议同时提供MP3版本作为备选 -->
<source src="background-music.mp3" type="audio/mpeg">
您的
浏览器不支持音频播放功能，请升级
浏览器。
</audio>
<p>温馨提醒：FLAC无损音乐已就绪，可点击上方按钮控制</p>
</footer>
</div>
<script>
// 创建动态背景气泡
function createBubbles() {
const bubblesContainer = document.getElementById('bubbles');
const bubbleCount = 15;
for (let i = 0; i < bubbleCount; i++) {
const bubble = document.createElement('div');
bubble.classList.add('bubble');
// 随机大小和位置
const size = Math.random() * 100 + 20;
const left = Math.random() * 100;
const delay = Math.random() * 20;
const duration = Math.random() * 10 + 15;
bubble.style.width = `${size}px`;
bubble.style.height = `${size}px`;
bubble.style.left = `${left}%`;
bubble.style.animationDelay = `${delay}s`;
bubble.style.animationDuration = `${duration}s`;
bubblesContainer.appendChild(bubble);
}
}
// 朋友名字和对应留言的数据
const friendMessages = {
"张三": "张三，认识你是我最大的幸运！希望我们的友谊长存！",
"李四": "李四，谢谢你一直以来的支持与陪伴，你是我最好的朋友！",
"王五": "王五，无论未来如何，我都会在你身边支持你！",
"赵六": "赵六，你的笑容总能给我力量，愿你永远开心！",
"小明": "小明，感谢你在我困难时伸出援手，你是我真正的朋友！",
"小红": "小红，你的善良和热情感染着每一个人，继续保持！",
"小李": "小李，和你在一起的每一天都充满欢乐，谢谢你的陪伴！",
"小张": "小张，愿我们的友谊像美酒，越陈越香！",
"测试": "这是一个测试消息，网站功能正常！FLAC音乐播放正常！"
// 您可以在这里添加更多朋友和留言
};
// 搜索功能
document.getElementById('searchBtn').addEventListener('click', searchMessage);
document.getElementById('searchInput').addEventListener('keypress', function(e) {
if (e.key === 'Enter') {
searchMessage();
}
});
function searchMessage() {
const name = document.getElementById('searchInput').value.trim();
const messageContainer = document.getElementById('messageContainer');
const messageText = document.getElementById('messageText');
if (name === '') {
messageText.textContent = '请输入朋友的名字';
messageContainer.classList.add('show');
return;
}
if (friendMessages[name]) {
messageText.textContent = friendMessages[name];
} else {
messageText.textContent = `抱歉，没有找到关于"${name}"的留言。您可以尝试其他名字如：${Object.keys(friendMessages).join('、')}`;
}
messageContainer.classList.add('show');
}
// 音乐控制功能 (支持FLAC)
const bgMusic = document.getElementById('bgMusic');
const toggleMusicBtn = document.getElementById('toggleMusicBtn');
const muteBtn = document.getElementById('muteBtn');
// 音频加载状态检查
bgMusic.addEventListener('loadeddata', function() {
console.log('FLAC音频文件加载完成，可以播放');
});
bgMusic.addEventListener('error', function(e) {
console.error('音频加载错误:', e);
alert('音乐文件加载失败，请检查文件名和路径是否正确。确保文件名为 background-music.flac 并位于正确目录。');
});
// 合并播放/暂停按钮功能
toggleMusicBtn.addEventListener('click', function() {
if (bgMusic.paused) {
bgMusic.play().then(() => {
toggleMusicBtn.textContent = '⏸'; // 暂停图标
}).catch(e => {
console.error('播放失败:', e);
});
} else {
bgMusic.pause();
toggleMusicBtn.textContent = '▶'; // 播放图标
}
});
// 静音按钮功能
let isMuted = false;
muteBtn.addEventListener('click', () => {
isMuted =
!isMuted;
bgMusic.muted = isMuted;
muteBtn.textContent = isMuted ? '🔇' : '🔊';
});
// 初始化 - 尝试自动播放音乐
window.onload = function() {
createBubbles();
// 尝试自动播放音乐
const playPromise = bgMusic.play();
if (playPromise
!== undefined) {
playPromise.then(() => {
// 自动播放成功
console.log('音乐自动播放成功');
toggleMusicBtn.textContent = '⏸'; // 显示暂停图标
}).catch(error => {
// 自动播放被阻止，需要用户交互
console.log('自动播放被阻止，需要用户交互：', error);
toggleMusicBtn.textContent = '▶'; // 显示播放图标
// 添加一次性点击事件，允许用户通过点击按钮
开始播放
document.addEventListener('click', function initMusic() {
bgMusic.play().then(() => {
toggleMusicBtn.textContent = '⏸';
});
document.removeEventListener('click', initMusic);
}, { once: true });
});
}
// 显示默认消息
setTimeout(() => {
document.getElementById('messageContainer').classList.add('show');
}, 500);
// 控制台提示
console.log('网站已加载，支持FLAC无损音频播放');
console.log('请确保 background-music.flac 文件存在于同一目录下');
};
</script>
</body>
</
html>请帮我修改这段代码实现一个功能：进入网站自动
开始播放音乐
本文深入探讨了<!DOCTYPE>标记在网页布局、浏览器兼容性和代码验证方面的重要性。解释了不同<!DOCTYPE>类型对浏览器展示效果的影响，并强调了在项目中忽视<!DOCTYPE>可能导致的兼容性问题。
扫一扫
323
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
