<!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>请帮我修改这段代码实现一个功能：进入网站自动开始播放音乐
本文通过一个具体的示例展示了在火狐浏览器中JavaScript代码对于元素ID获取时大小写的严格区分。通过比较 'getElementById(dragoncode)' 和 'getElementById(dragonCode)' 的差异，强调了在编写代码时注意大小写的重要性。
扫一扫
3017
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
