<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>100%可用饮料生成器</title>
<style>
body {
font-family: Arial, sans-serif;
max-width: 800px;
margin: 0 auto;
padding: 20px;
background: #f8f9fa;
color: #212529;
}
.debug-console {
background: #212529;
color: #f8f9fa;
padding: 15px;
border-radius: 8px;
margin: 20px 0;
font-family: monospace;
font-size: 14px;
max-height: 200px;
overflow-y: auto;
line-height: 1.5;
}
.debug-console .success {
color: #28a745;
}
.debug-console .error {
color: #dc3545;
font-weight: bold;
}
.debug-console .info {
color: #17a2b8;
}
.controls {
margin: 20px 0;
}
button {
padding: 12px 24px;
background: #007bff;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 16px;
}
button:disabled {
background: #6c757d;
cursor: not-allowed;
}
#packageContainer {
width: 100%;
height: 400px;
background: #e9ecef;
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
margin: 20px 0;
position: relative;
overflow: hidden;
}
.package-content {
text-align: center;
color: white;
text-shadow: 0 1px 2px rgba(0,0,0,0.5);
}
.brand-name {
font-size: 48px;
font-weight: bold;
margin-bottom: 20px;
}
.flavor-badge {
font-size: 24px;
background: rgba(0,0,0,0.3);
padding: 8px 20px;
border-radius: 20px;
display: inline-block;
}
.type-indicator {
position: absolute;
bottom: 20px;
width: 100%;
text-align: center;
font-size: 18px;
opacity: 0.8;
}
</style>
</head>
<body>
<h1>100% 可用饮料生成器</h1>
<p>这个简化版本确保点击生成按钮后一定会有反应。如果仍然有问题，控制台会显示具体错误。</p>
<div class="controls">
<button id="generateBtn">生成饮料 (点击这里)</button>
</div>
<div class="debug-console" id="debugConsole">
<div class="info">[初始化] 系统已启动，等待用户操作...</div>
</div>
<div id="packageContainer">
<div class="package-content">
<div class="brand-name">点击上方按钮生成</div>
<div class="flavor-badge">您的饮料包装</div>
<div class="type-indicator">饮料类型将显示在这里</div>
</div>
</div>
<script>
// 基础调试工具
function log(message, type = 'info') {
const console = document.getElementById('debugConsole');
const entry = document.createElement('div');
entry.className = type;
entry.textContent = `[${new Date().toLocaleTimeString()}] ${message}`;
console.appendChild(entry);
console.scrollTop = console.scrollHeight; // 滚动到底部
}
// 确保DOM加载完成
document.addEventListener('DOMContentLoaded', function() {
log('DOM内容已加载，准备初始化', 'success');
try {
const generateBtn = document.getElementById('generateBtn');
const packageContainer = document.getElementById('packageContainer');
if (!generateBtn) {
throw new Error('找不到生成按钮 (ID: generateBtn)');
}
if (!packageContainer) {
throw new Error('找不到包装容器 (ID: packageContainer)');
}
log('找到所有必要元素，初始化成功', 'success');
// 数据源 (简化版)
const brandPrefixes = ["Ultra", "Hyper", "Mega", "Super", "Neon"];
const brandSuffixes = ["Fizz", "Pop", "Soda", "Cola", "Drink"];
const flavorBase = ["Lemon", "Apple", "Berry", "Mango", "Watermelon"];
const flavorMod = ["Spicy", "Sweet", "Fresh", "Icy", "Zesty"];
const drinkTypes = ["Energy Drink", "Sparkling Water", "Fruit Juice"];
// 生成随机项
function getRandomItem(arr) {
return arr[Math.floor(Math.random() * arr.length)];
}
// 生成饮料
function generateDrink() {
try {
log('开始生成饮料...', 'info');
// 更新按钮状态
generateBtn.disabled = true;
generateBtn.textContent = '生成中...';
// 模拟处理时间
setTimeout(function() {
// 1. 生成文本
const brand = getRandomItem(brandPrefixes) + " " + getRandomItem(brandSuffixes);
const flavor = getRandomItem(flavorMod) + " " + getRandomItem(flavorBase);
const type = getRandomItem(drinkTypes);
log(`生成成功: ${brand} - ${flavor} (${type})`, 'success');
// 2. 生成随机颜色
const h = Math.floor(Math.random() * 360);
const s = 70;
const l = 50;
const color = `hsl(${h}, ${s}%, ${l}%)`;
// 3. 更新UI
packageContainer.style.background = color;
document.querySelector('.brand-name').textContent = brand;
document.querySelector('.flavor-badge').textContent = flavor;
document.querySelector('.type-indicator').textContent = type;
// 4. 重置按钮
generateBtn.disabled = false;
generateBtn.textContent = '生成饮料 (点击这里)';
}, 300);
} catch (error) {
log(`生成失败: ${error.message}`, 'error');
generateBtn.disabled = false;
generateBtn.textContent = '生成失败! 查看控制台';
}
}
// 绑定事件
generateBtn.addEventListener('click', function() {
log('用户点击了生成按钮', 'info');
generateDrink();
});
log('事件监听器已绑定，准备就绪', 'success');
} catch (error) {
log(`初始化失败: ${error.message}`, 'error');
const generateBtn = document.getElementById('generateBtn');
if (generateBtn) {
generateBtn.disabled = true;
generateBtn.textContent = '初始化失败! 查看控制台';
}
}
});
// 全局错误捕获
window.onerror = function(message, source, lineno, colno, error) {
const console = document.getElementById('debugConsole');
if (console) {
const entry = document.createElement('div');
entry.className = 'error';
entry.textContent = `[全局错误] ${message} (行:${lineno}, 列:${colno})`;
console.appendChild(entry);
console.scrollTop = console.scrollHeight;
}
return true; // 阻止默认错误处理
};
</script>
</body>
</html>
index.html
md
README.md
index.html