以下是您所需的“魔法8号球占卜师”的完整代码。它是一个交互式Web应用，结合PHP后端与HTML/CSS前端，提供随机占卜答案并记录历史。
<?php
session_start();
// 定义魔法8号球的所有可能答案 (有趣且多样)
$answers = [
"✨ 绝对是的！", "🌟 毫无疑问，会成真。", "🔮 是的，命运如此安排。", "💫 可以期待好结果。",
"🍀 迹象表明，是的。", "🎲 再问一次，可能更明确。", "🤔 暂时无法预测，专注当下。", "🌙 别指望它。",
"💧 前景不太乐观。", "⚠️ 我的回答是否定的。", "❓ 别问这种问题，自己决定！", "⭐ 非常有希望！",
"🌈 只要你相信自己，就会实现。", "🍕 答案是肯定的，而且我饿了。", "🎈 再掷一次球吧，思绪混乱。",
"🐙 章鱼说：有可能是。", "🃏 笑一笑，答案乐观！", "🎯 集中精力，再问一次。"
];
// 有趣事实库 (每次刷新页面随机展示)
$funFacts = [
"🐙 章鱼有三颗心脏，血液是蓝色的。",
"🍌 从植物学角度讲，香蕉是一种浆果。",
"🦷 人类和长颈颈都有同样数量的颈椎骨，都是7块。",
"🐧 企鹅会通过跳舞找到配偶。",
"📜 古代玛雅人用可可豆当作货币。",
"🎨 梵高一生只卖出了一幅画《红色葡萄园》。",
"🌍 每天大约有100吨宇宙尘埃落到地球上。",
"🐘 大象是唯一不能跳跃的哺乳动物。",
"🍿 爆米花在微波炉发明之前就已存在数百年。",
"🎵 听音乐可以让你跑步耐力提高15%。"
];
// ------------------ 处理清除历史 ------------------
if (isset($_GET['clear']) && $_GET['clear'] === 'history') {
unset($_SESSION['history']);
header("Location: " . strtok($_SERVER["REQUEST_URI"], '?'));
exit;
}
// ------------------ 处理占卜提交 ------------------
$prediction = null;
$askedQuestion = null;
$errorMsg = null;
if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['question'])) {
$askedQuestion = trim($_POST['question']);
if ($askedQuestion !== '') {
// 随机获取答案
$randomKey = array_rand($answers);
$chosenAnswer = $answers[$randomKey];
// 保存到历史记录
$historyItem = [
'question' => $askedQuestion,
'answer' => $chosenAnswer,
'time' => date("H:i:s"),
'date' => date("Y-m-d")
];
if (!isset($_SESSION['history'])) {
$_SESSION['history'] = [];
}
// 限制历史最多10条
array_unshift($_SESSION['history'], $historyItem);
if (count($_SESSION['history']) > 10) {
array_pop($_SESSION['history']);
}
$prediction = $chosenAnswer;
} else {
$errorMsg = "🤨 请输入一个问题给我占卜呀～";
}
}
// 随机选取一个有趣事实 (刷新页面或提交都会变)
$randomFact = $funFacts[array_rand($funFacts)];
?>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
<title>✨ 魔法8号球占卜师 | 超有趣预言神器</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
user-select: none;
}
body {
background: linear-gradient(145deg, #1a1a2e 0%, #16213e 100%);
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
font-family: 'Segoe UI', 'Poppins', system-ui, -apple-system, 'Inter', sans-serif;
padding: 1.5rem;
}
/* 主卡片容器 */
.glass-card {
max-width: 900px;
width: 100%;
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(12px);
border-radius: 3rem;
border: 1px solid rgba(255, 255, 255, 0.2);
box-shadow: 0 25px 45px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(255, 255, 255, 0.05);
overflow: hidden;
transition: transform 0.2s ease;
}
.glass-card:hover {
transform: scale(1.01);
}
/* 头部区域 */
.header {
background: rgba(0, 0, 0, 0.3);
padding: 1.5rem 2rem;
text-align: center;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.header h1 {
font-size: 2rem;
letter-spacing: 2px;
background: linear-gradient(135deg, #FFD166, #FF9F4A);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
text-shadow: 0 2px 5px rgba(0,0,0,0.2);
display: inline-flex;
align-items: center;
gap: 12px;
}
.sub {
color: #b9c7d9;
margin-top: 0.5rem;
font-size: 0.9rem;
font-weight: 500;
}
/* 双列布局 */
.columns {
display: flex;
flex-wrap: wrap;
gap: 1.5rem;
padding: 2rem;
}
.magic-area {
flex: 2;
min-width: 240px;
}
.fun-fact-area {
flex: 1.2;
background: rgba(0, 0, 0, 0.25);
border-radius: 2rem;
padding: 1.5rem;
backdrop-filter: blur(4px);
border: 1px solid rgba(255,215,150,0.3);
}
/* 神奇的魔法球 */
.eight-ball {
background: radial-gradient(circle at 35% 30%, #222, #0a0a0a);
width: 180px;
height: 180px;
border-radius: 50%;
margin: 0 auto 1.5rem;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 20px 30px rgba(0,0,0,0.5), inset 0 -5px 0 rgba(0,0,0,0.6), inset 0 5px 10px rgba(255,255,255,0.2);
transition: all 0.2s;
cursor: default;
}
.ball-inner {
background: #1e1e2f;
width: 80px;
height: 80px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 3.8rem;
font-weight: bold;
color: #f5deb3;
box-shadow: inset 0 0 8px gold, 0 4px 12px rgba(0,0,0,0.3);
font-family: monospace;
transition: 0.2s;
}
.prediction-box {
background: rgba(0, 0, 0, 0.55);
border-radius: 2rem;
padding: 1.2rem;
text-align: center;
margin: 1.5rem 0;
border-left: 5px solid #ffb347;
}
.question-label {
color: #ffda9e;
font-size: 0.9rem;
letter-spacing: 1px;
}
.answer-text {
font-size: 1.6rem;
font-weight: bold;
color: #ffe6b3;
word-break: break-word;
margin-top: 0.5rem;
text-shadow: 0 0 3px #ff9f4a;
}
.error-message {
background: #ff6b6bc9;
border-radius: 2rem;
padding: 0.7rem;
color: white;
font-weight: bold;
}
/* 表单样式 */
.question-form {
display: flex;
flex-direction: column;
gap: 1rem;
margin-top: 1rem;
}
.question-form input {
background: rgba(255,255,240,0.15);
border: 1px solid #ffcf8a;
padding: 14px 18px;
border-radius: 60px;
font-size: 1rem;
color: white;
outline: none;
transition: 0.2s;
font-weight: 500;
}
.question-form input:focus {
background: rgba(255,255,200,0.2);
border-color: #ffaa33;
box-shadow: 0 0 8px #ffb347;
}
.question-form input::placeholder {
color: #ccc9c2;
}
.btn-magic {
background: linear-gradient(95deg, #ff984f, #ff6a3a);
border: none;
padding: 12px;
border-radius: 60px;
font-weight: bold;
font-size: 1.2rem;
color: white;
cursor: pointer;
transition: 0.2s;
box-shadow: 0 5px 10px rgba(0,0,0,0.2);
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
}
.btn-magic:hover {
transform: translateY(-2px);
box-shadow: 0 8px 18px rgba(0,0,0,0.3);
background: linear-gradient(95deg, #ffac64, #ff824e);
}
.btn-clear {
background: rgba(255,255,200,0.1);
border: 1px solid #f3c26b;
padding: 6px 14px;
border-radius: 40px;
font-size: 0.8rem;
color: #ffdd99;
cursor: pointer;
transition: 0.2s;
text-decoration: none;
display: inline-block;
}
.btn-clear:hover {
background: #ffb34760;
color: white;
}
/* 历史记录 */
.history-list {
list-style: none;
margin-top: 1rem;
max-height: 280px;
overflow-y: auto;
padding-right: 5px;
}
.history-list li {
background: rgba(0,0,0,0.35);
margin: 0.7rem 0;
padding: 0.8rem;
border-radius: 1.2rem;
font-size: 0.85rem;
border-left: 3px solid #ffb74d;
word-break: break-word;
}
.history-question {
font-weight: bold;
color: #ffdd99;
}
.history-answer {
color: #cddcff;
margin-top: 4px;
font-style: italic;
}
.history-time {
font-size: 0.7rem;
color: #a0aac0;
text-align: right;
margin-top: 6px;
}
.fact-text {
font-size: 1rem;
line-height: 1.4;
background: rgba(0,0,0,0.3);
padding: 1rem;
border-radius: 1.3rem;
margin-top: 1rem;
color: #efdbc1;
}
.fact-icon {
font-size: 2rem;
display: block;
text-align: center;
margin-bottom: 0.5rem;
}
hr {
border-color: rgba(255,215,130,0.3);
margin: 1rem 0;
}
footer {
text-align: center;
font-size: 0.75rem;
color: #aaafc0;
padding: 1rem;
border-top: 1px solid rgba(255,255,255,0.05);
}
@media (max-width: 680px) {
.columns {
flex-direction: column;
}
.answer-text {
font-size: 1.3rem;
}
.eight-ball {
width: 140px;
height: 140px;
}
.ball-inner {
width: 60px;
height: 60px;
font-size: 2.8rem;
}
}
</style>
</head>
<body>
<div class="glass-card">
<div class="header">
<h1>
🎱 魔法8号球
<span style="font-size:1.8rem;">✨</span>
</h1>
<div class="sub">➤ 问一个问题，然后摇晃心灵之球，答案将指引你 ✨</div>
</div>
<div class="columns">
<!-- 左侧魔法占卜区 -->
<div class="magic-area">
<div class="eight-ball">
<div class="ball-inner">8</div>
</div>
<?php if ($prediction !== null): ?>
<div class="prediction-box">
<div class="question-label">📜 你的问题：</div>
<div style="font-weight:500; color:#ffcf9a;">“<?php echo htmlspecialchars($askedQuestion); ?>”</div>
<div class="question-label" style="margin-top: 12px;">🔮 魔法球回答：</div>
<div class="answer-text">✨ <?php echo htmlspecialchars($prediction); ?> ✨</div>
</div>
<?php elseif ($errorMsg): ?>
<div class="prediction-box error-message">
⚠️ <?php echo htmlspecialchars($errorMsg); ?>
</div>
<?php else: ?>
<div class="prediction-box" style="background: rgba(0,0,0,0.4);">
<div class="answer-text" style="font-size:1.2rem;">🤫 我在等待你的问题...<br>问问命运吧！</div>
</div>
<?php endif; ?>
<!-- 提问题表单 -->
<form method="POST" class="question-form">
<input type="text" name="question" placeholder="例如：我今天会遇到好事吗？ 或者 我该尝试新事物吗？"
value="<?php echo $askedQuestion ? htmlspecialchars($askedQuestion) : ''; ?>" autocomplete="off">
<button type="submit" class="btn-magic">
🪄 摇动魔法球 · 揭示命运 🎱
</button>
</form>
<!-- 清除历史的优雅方式 -->
<div style="text-align: right; margin-top: 12px;">
<a href="?clear=history" class="btn-clear" onclick="return confirm('🧹 确定清除所有占卜历史吗？');">🗑️ 清除历史记录</a>
</div>
</div>
<!-- 右侧趣味事实+历史 -->
<div class="fun-fact-area">
<div style="display: flex; align-items: center; gap: 10px;">
<span style="font-size: 1.7rem;">🧠</span>
<h3 style="color:#FFDA9E;">今天冷知识</h3>
</div>
<div class="fact-text">
<span class="fact-icon">🎲</span>
<?php echo htmlspecialchars($randomFact); ?>
</div>
<hr>
<div style="display: flex; justify-content: space-between; align-items: baseline;">
<h3 style="color:#FFDA9E;">📜 占卜历史录</h3>
<span style="font-size:10px; color:#aaa;">最多10条</span>
</div>
<?php if (isset($_SESSION['history']) && count($_SESSION['history']) > 0): ?>
<ul class="history-list">
<?php foreach ($_SESSION['history'] as $record): ?>
<li>
<div class="history-question">❓ <?php echo htmlspecialchars(mb_substr($record['question'], 0, 60)); ?></div>
<div class="history-answer">🎱 <?php echo htmlspecialchars($record['answer']); ?></div>
<div class="history-time">📅 <?php echo $record['date']; ?> <?php echo $record['time']; ?></div>
</li>
<?php endforeach; ?>
</ul>
<?php else: ?>
<div style="text-align:center; padding: 1.2rem; color: #bbb;">✨ 暂无占卜记录，问问魔法球吧 ✨</div>
<?php endif; ?>
</div>
</div>
<footer>
🌟 魔法8号球仅作娱乐，让生活多一点神秘与乐趣！ | PHP + HTML 趣味交互 🌟
</footer>
</div>
</body>
</html>
评论 (0)