|
<!DOCTYPE html> |
|
<html lang="zh-CN"> |
|
<head> |
|
<meta charset="UTF-8"> |
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
<title>玄机命理 - 八字运势测算</title> |
|
<script src="https://cdn.tailwindcss.com"></script> |
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> |
|
<style> |
|
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;700&display=swap'); |
|
body { |
|
font-family: 'Noto Serif SC', serif; |
|
background-color: #f8f4e9; |
|
color: #333; |
|
} |
|
.yin-yang { |
|
width: 100px; |
|
height: 100px; |
|
border-radius: 50%; |
|
background: linear-gradient(to right, #000 50%, #fff 50%); |
|
position: relative; |
|
} |
|
.yin-yang:before, .yin-yang:after { |
|
content: ''; |
|
position: absolute; |
|
width: 50px; |
|
height: 50px; |
|
border-radius: 50%; |
|
border: 15px solid #fff; |
|
} |
|
.yin-yang:before { |
|
background: #000; |
|
top: 0; |
|
left: 50%; |
|
transform: translateX(-50%); |
|
} |
|
.yin-yang:after { |
|
background: #fff; |
|
bottom: 0; |
|
left: 50%; |
|
transform: translateX(-50%); |
|
} |
|
.fortune-card { |
|
background: linear-gradient(135deg, rgba(255,255,255,0.8) 0%, rgba(255,255,255,0.6) 100%); |
|
backdrop-filter: blur(10px); |
|
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1); |
|
border-radius: 16px; |
|
transition: all 0.3s ease; |
|
} |
|
.fortune-card:hover { |
|
transform: translateY(-5px); |
|
box-shadow: 0 12px 36px rgba(0, 0, 0, 0.15); |
|
} |
|
.banner { |
|
background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), |
|
url('https://images.unsplash.com/photo-1534447677768-be436bb09401?ixlib=rb-1.2.1&auto=format&fit=crop&w=1920&q=80'); |
|
background-size: cover; |
|
background-position: center; |
|
height: 300px; |
|
} |
|
.hexagon { |
|
clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%); |
|
} |
|
.coin-animation { |
|
animation: flip 2s ease-in-out; |
|
} |
|
.yarrow-animation { |
|
animation: shake 2s ease-in-out; |
|
} |
|
@keyframes flip { |
|
0% { transform: rotateY(0); } |
|
25% { transform: rotateY(180deg); } |
|
50% { transform: rotateY(360deg); } |
|
75% { transform: rotateY(180deg); } |
|
100% { transform: rotateY(0); } |
|
} |
|
@keyframes shake { |
|
0%, 100% { transform: translateX(0); } |
|
10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); } |
|
20%, 40%, 60%, 80% { transform: translateX(5px); } |
|
} |
|
.slide-fade-enter-active { |
|
transition: all 0.3s ease-out; |
|
} |
|
.slide-fade-leave-active { |
|
transition: all 0.3s cubic-bezier(1, 0.5, 0.8, 1); |
|
} |
|
.slide-fade-enter-from, |
|
.slide-fade-leave-to { |
|
transform: translateY(20px); |
|
opacity: 0; |
|
} |
|
|
|
.spinner { |
|
width: 50px; |
|
height: 50px; |
|
border: 5px solid rgba(0, 0, 0, 0.1); |
|
border-radius: 50%; |
|
border-top-color: #3498db; |
|
animation: spin 1s ease-in-out infinite; |
|
margin: 20px auto; |
|
} |
|
@keyframes spin { |
|
to { transform: rotate(360deg); } |
|
} |
|
</style> |
|
</head> |
|
<body> |
|
|
|
<nav class="bg-gray-800 text-white shadow-lg"> |
|
<div class="container mx-auto px-6 py-3 flex justify-between items-center"> |
|
<div class="flex items-center space-x-4"> |
|
<i class="fas fa-yin-yang text-2xl"></i> |
|
<span class="text-xl font-semibbold">玄机命理</span> |
|
</div> |
|
<div class="hidden md:flex items-center space-x-8"> |
|
<a href="#" class="hover:text-yellow-300">八字测算</a> |
|
<a href="#" class="hover:text-yellow-300">易经占卜</a> |
|
<a href="#" class="hover:text-yellow-300">风水咨询</a> |
|
</div> |
|
<button class="md:hidden focus:outline-none"> |
|
<i class="fas fa-bars text-xl"></i> |
|
</button> |
|
</div> |
|
</nav> |
|
|
|
|
|
<div class="banner flex items-center justify-center text-white"> |
|
<div class="text-center px-4"> |
|
<h1 class="text-4xl md:text-5xl font-bold mb-4">八字运势测算</h1> |
|
<p class="text-xl md:text-2xl mb-8">揭秘命理玄机，把握人生方向</p> |
|
<button id="startFortuneBtn" class="bg-yellow-600 hover:bg-yellow-700 text-white font-bold py-3 px-8 rounded-full text-lg transition duration-300 transform hover:scale-105"> |
|
立即测算 |
|
</button> |
|
</div> |
|
</div> |
|
|
|
|
|
<div class="container mx-auto px-6 py-12"> |
|
<h2 class="text-3xl font-bold text-center mb-12 text-gray-800">八字命理测算</h2> |
|
|
|
<div class="w-full md:w-2/3 mx-auto"> |
|
|
|
<div class="fortune-card p-8"> |
|
<div class="text-center mb-6"> |
|
<div class="hexagon bg-blue-100 w-24 h-24 mx-auto flex items-center justify-center"> |
|
<i class="fas fa-calendar-day text-blue-600 text-4xl"></i> |
|
</div> |
|
</div> |
|
<h3 class="text-2xl font-bold text-center mb-4">八字命理分析</h3> |
|
<p class="text-gray-700 mb-6 text-center">通过您的出生年月日时(四柱八字)，分析您的命格、五行喜忌、大运走势以及流年运势，为您的人生提供有价值的参考。</p> |
|
<button id="baziBtn" class="w-full bg-blue-500 hover:bg-blue-600 text-white py-3 px-6 rounded-lg text-lg transition duration-300"> |
|
开始八字测算 |
|
</button> |
|
</div> |
|
</div> |
|
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-8 mt-12"> |
|
|
|
<div class="fortune-card p-8"> |
|
<div class="text-center mb-6"> |
|
<div class="hexagon bg-yellow-100 w-24 h-24 mx-auto flex items-center justify-center"> |
|
<i class="fas fa-coins text-yellow-600 text-4xl"></i> |
|
</div> |
|
</div> |
|
<h3 class="text-2xl font-bold text-center mb-4">金钱卦占卜</h3> |
|
<p class="text-gray-700 mb-6 text-center">使用三枚硬币进行易经六爻占卜，通过铜钱的阴阳变化揭示当前问题的吉凶祸福和发展趋势。</p> |
|
<button id="coinDivBtn" class="w-full bg-yellow-500 hover:bg-yellow-600 text-white py-3 px-6 rounded-lg text-lg transition duration-300"> |
|
开始金钱卦 |
|
</button> |
|
</div> |
|
|
|
|
|
<div class="fortune-card p-8"> |
|
<div class="text-center mb-6"> |
|
<div class="hexagon bg-green-100 w-24 h-24 mx-auto flex items-center justify-center"> |
|
<i class="fas fa-leaf text-green-600 text-4xl"></i> |
|
</div> |
|
</div> |
|
<h3 class="text-2xl font-bold text-center mb-4">筹策占卜</h3> |
|
<p class="text-gray-700 mb-6 text-center">采用传统筹策方法进行易经占卜，遵循古老仪式，获得更加精确和神圣的卦象解读。</p> |
|
<button id="yarrowDivBtn" class="w-full bg-green-500 hover:bg-green-600 text-white py-3 px-6 rounded-lg text-lg transition duration-300"> |
|
开始筹策占卜 |
|
</button> |
|
</div> |
|
</div> |
|
|
|
|
|
<div id="birthDateModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4 z-50 hidden"> |
|
<div class="fortune-card w-full max-w-md p-6 relative"> |
|
<button id="closeBirthModal" class="absolute top-4 right-4 text-gray-500 hover:text-gray-700"> |
|
<i class="fas fa-times"></i> |
|
</button> |
|
<div class="text-center mb-6"> |
|
<h3 class="text-2xl font-bold text-gray-800">请输入您的生辰信息</h3> |
|
<p class="text-gray-600 mt-2">精确的生辰可获得更准确的测算结果</p> |
|
</div> |
|
<div class="space-y-4"> |
|
<div> |
|
<label class="block text-gray-700 mb-2" for="birthYear">出生年份</label> |
|
<select id="birthYear" class="w-full p-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"> |
|
<option value="">请选择年份</option> |
|
|
|
</select> |
|
</div> |
|
<div> |
|
<label class="block text-gray-700 mb-2" for="birthMonth">出生月份</label> |
|
<select id="birthMonth" class="w-full p-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"> |
|
<option value="">请选择月份</option> |
|
<option value="1">1月</option> |
|
<option value="2">2月</option> |
|
<option value="3">3月</option> |
|
<option value="4">4月</option> |
|
<option value="5">5月</option> |
|
<option value="6">6月</option> |
|
<option value="7">7月</option> |
|
<option value="8">8月</option> |
|
<option value="9">9月</option> |
|
<option value="10">10月</option> |
|
<option value="11">11月</option> |
|
<option value="12">12月</option> |
|
</select> |
|
</div> |
|
<div> |
|
<label class="block text-gray-700 mb-2" for="birthDay">出生日期</label> |
|
<select id="birthDay" class="w-full p-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"> |
|
<option value="">请先选择年份和月份</option> |
|
</select> |
|
</div> |
|
<div> |
|
<label class="block text-gray-700 mb-2" for="birthHour">出生时辰</label> |
|
<select id="birthHour" class="w-full p-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"> |
|
<option value="">请选择时辰</option> |
|
<option value="0">23:00-00:59(子时)</option> |
|
<option value="1">01:00-02:59(丑时)</option> |
|
<option value="2">03:00-04:59(寅时)</option> |
|
<option value="3">05:00-06:59(卯时)</option> |
|
<option value="4">07:00-08:59(辰时)</option> |
|
<option value="5">09:00-10:59(巳时)</option> |
|
<option value="6">11:00-12:59(午时)</option> |
|
<option value="7">13:00-14:59(未时)</option> |
|
<option value="8">15:00-16:59(申时)</option> |
|
<option value="9">17:00-18:59(酉时)</option> |
|
<option value="10">19:00-20:59(戌时)</option> |
|
<option value="11">21:00-22:59(亥时)</option> |
|
</select> |
|
</div> |
|
</div> |
|
<div class="mt-6 flex justify-center"> |
|
<button id="confirmBirth" class="bg-blue-500 hover:bg-blue-600 text-white py-2 px-8 rounded-lg transition duration-300"> |
|
确认测算 |
|
</button> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
|
|
<div id="divinationModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4 z-50 hidden"> |
|
<div class="fortune-card w-full max-w-md p-8 relative"> |
|
<button id="closeDivModal" class="absolute top-4 right-4 text-gray-500 hover:text-gray-700"> |
|
<i class="fas fa-times"></i> |
|
</button> |
|
<div class="text-center mb-6"> |
|
<div id="divinationIcon" class="hexagon bg-yellow-100 w-24 h-24 mx-auto flex items-center justify-center mb-4"> |
|
<i class="fas fa-coins text-yellow-600 text-4xl"></i> |
|
</div> |
|
<h3 id="divinationTitle" class="text-2xl font-bold text-gray-800">金钱卦占卜</h3> |
|
<p id="divinationDesc" class="text-gray-600 mt-2">心中默念您的问题，然后点击下方按钮开始占卜</p> |
|
</div> |
|
<div id="divinationProcess" class="text-center"> |
|
<div id="coinsContainer" class="flex justify-center space-x-4 mb-6 hidden"> |
|
<div class="coin bg-yellow-200 w-12 h-12 rounded-full flex items-center justify-center"> |
|
<i class="fas fa-circle text-gray-700"></i> |
|
</div> |
|
<div class="coin bg-yellow-200 w-12 h-12 rounded-full flex items-center justify-center"> |
|
<i class="fas fa-circle text-gray-700"></i> |
|
</div> |
|
<div class="coin bg-yellow-200 w-12 h-12 rounded-full flex items-center justify-center"> |
|
<i class="fas fa-circle text-gray-700"></i> |
|
</div> |
|
</div> |
|
<div id="yarrowContainer" class="mb-6 hidden"> |
|
<div class="flex items-center justify-center"> |
|
<div class="yarrow-stick bg-amber-700 w-2 h-20 mx-1 rounded-full"></div> |
|
<div class="yarrow-stick bg-amber-700 w-2 h-20 mx-1 rounded-full"></div> |
|
<div class="yarrow-stick bg-amber-700 w-2 h-20 mx-1 rounded-full"></div> |
|
</div> |
|
<p class="text-gray-500 mt-2">传统筹策方法分步进行中...</p> |
|
</div> |
|
<button id="startDivination" class="bg-blue-500 hover:bg-blue-600 text-white py-3 px-8 rounded-lg text-lg transition duration-300"> |
|
开始占卜 |
|
</button> |
|
</div> |
|
<div id="divinationResult" class="hidden"> |
|
<div class="text-center mb-6"> |
|
<i class="fas fa-check-circle text-green-500 text-5xl"></i> |
|
<h4 class="text-xl font-bold mt-4">卦象结果</h4> |
|
</div> |
|
<div class="bg-white rounded-lg p-4 mb-6"> |
|
<div class="flex justify-center space-x-2 mb-4"> |
|
<div class="hex-line bg-gray-800 w-12 h-1 mb-1"></div> |
|
<div class="hex-line bg-gray-800 w-12 h-1 mb-1"></div> |
|
<div class="hex-line bg-gray-800 w-12 h-1 mb-1"></div> |
|
</div> |
|
<div class="flex justify-center space-x-2 mb-4"> |
|
<div class="hex-line bg-gray-800 w-12 h-1 mb-1"></div> |
|
<div class="hex-line bg-gray-800 w-12 h-1"></div> |
|
<div class="hex-line bg-gray-800 w-12 h-1 mb-1"></div> |
|
</div> |
|
<div class="flex justify-center space-x-2 mb-4"> |
|
<div class="hex-line bg-gray-800 w-12 h-1 mb-1"></div> |
|
<div class="hex-line bg-gray-800 w-12 h-1 mb-1"></div> |
|
<div class="hex-line bg-gray-800 w-12 h-1 mb-1"></div> |
|
</div> |
|
<p class="text-center text-gray-700" id="hexagramName">天风姤卦</p> |
|
</div> |
|
<div class="bg-gray-50 p-4 rounded-lg"> |
|
<h5 class="font-bold text-gray-800 mb-2">卦象解读</h5> |
|
<p id="hexagramInterpretation" class="text-gray-700">此卦象显示您当前面临机遇与挑战并存的局面。姤卦代表相遇，提示您需要谨慎选择人际关系，把握机遇的同时也要防范潜在风险。</p> |
|
</div> |
|
<div class="mt-6 flex justify-center"> |
|
<button id="newDivination" class="bg-blue-500 hover:bg-blue-600 text-white py-2 px-6 rounded-lg transition duration-300"> |
|
重新占卜 |
|
</button> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
|
|
<div id="fortuneResultModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4 z-50 hidden"> |
|
<div class="fortune-card w-full max-w-2xl p-8 relative"> |
|
<button id="closeResultModal" class="absolute top-4 right-4 text-gray-500 hover:text-gray-700"> |
|
<i class="fas fa-times"></i> |
|
</button> |
|
<div class="text-center mb-6"> |
|
<i class="fas fa-chart-line text-green-500 text-5xl"></i> |
|
<h3 class="text-2xl font-bold mt-2">八字命理分析结果</h3> |
|
</div> |
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-6"> |
|
<div class="bg-white p-4 rounded-lg"> |
|
<h4 class="font-bold text-gray-800 border-b pb-2 mb-2">基本信息</h4> |
|
<div> |
|
<p class="text-gray-600">出生时间: <span id="resultBirthDate" class="text-gray-800">1990年5月15日 08:30</span></p> |
|
<p class="text-gray-600">八字: <span id="resultBazi" class="text-gray-800">庚午 辛巳 甲子 戊辰</span></p> |
|
<p class="text-gray-600">五行: <span id="resultElements" class="text-gray-800">金火 金火 木水 土土</span></p> |
|
</div> |
|
</div> |
|
<div class="bg-white p-4 rounded-lg"> |
|
<h4 class="font-bold text-gray-800 border-b pb-2 mb-2">五行平衡</h4> |
|
<div class="space-y-2"> |
|
<div> |
|
<div class="flex justify-between text-sm text-gray-600"> |
|
<span>金: 2</span> |
|
<span>30%</span> |
|
</div> |
|
<div class="w-full bg-gray-200 rounded-full h-2"> |
|
<div class="bg-gray-700 h-2 rounded-full" style="width: 30%"></div> |
|
</div> |
|
</div> |
|
<div> |
|
<div class="flex justify-between text-sm text-gray-600"> |
|
<span>木: 1</span> |
|
<span>15%</span> |
|
</div> |
|
<div class="w-full bg-gray-200 rounded-full h-2"> |
|
<div class="bg-green-600 h-2 rounded-full" style="width: 15%"></div> |
|
</div> |
|
</div> |
|
<div> |
|
<div class="flex justify-between text-sm text-gray-600"> |
|
<span>水: 1</span> |
|
<span>15%</span> |
|
</div> |
|
<div class="w-full bg-gray-200 rounded-full h-2"> |
|
<div class="bg-blue-500 h-2 rounded-full" style="width: 15%"></div> |
|
</div> |
|
</div> |
|
<div> |
|
<div class="flex justify-between text-sm text-gray-600"> |
|
<span>火: 2</span> |
|
<span>30%</span> |
|
</div> |
|
<div class="w-full bg-gray-200 rounded-full h-2"> |
|
<div class="bg-red-500 h-2 rounded-full" style="width: 30%"></div> |
|
</div> |
|
</div> |
|
<div> |
|
<div class="flex justify-between text-sm text-gray-600"> |
|
<span>土: 2</span> |
|
<span>30%</span> |
|
</div> |
|
<div class="w-full bg-gray-200 rounded-full h-2"> |
|
<div class="bg-yellow-600 h-2 rounded-full" style="width: 30%"></div> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
<div class="bg-white p-4 rounded-lg mt-6"> |
|
<h4 class="font-bold text-gray-800 border-b pb-2 mb-2">命格分析</h4> |
|
<p id="resultAnalysis" class="text-gray-700">您的命格显示天干庚辛金旺，地支午巳火强，构成金火相战之势。金火交争，容易性格急躁，做事积极但缺乏耐心。需要水来调和，建议多接触蓝色、黑色，居住环境宜近水。事业发展适合教育、金融、科技等行业，2025年蛇年将有重大机遇出现。</p> |
|
</div> |
|
<div class="bg-gray-50 p-4 rounded-lg mt-6"> |
|
<h4 class="font-bold text-gray-800 border-b pb-2 mb-2">大运走势</h4> |
|
<div class="overflow-x-auto"> |
|
<div class="flex space-x-8 py-4" id="luckChart"> |
|
|
|
</div> |
|
</div> |
|
<p class="text-gray-600 text-sm mt-2">*大运一般十年一换，从您6岁开始起运</p> |
|
</div> |
|
<div class="mt-6 flex justify-center"> |
|
<button id="closeFortuneResult" class="bg-blue-500 hover:bg-blue-600 text-white py-2 px-8 rounded-lg transition duration-300"> |
|
关闭 |
|
</button> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
|
|
<footer class="bg-gray-800 text-white py-8"> |
|
<div class="container mx-auto px-6"> |
|
<div class="flex flex-col md:flex-row justify-between items-center"> |
|
<div class="flex items-center space-x-4 mb-4 md:mb-0"> |
|
<i class="fas fa-yin-yang text-2xl"></i> |
|
<span class="text-xl font-semibold">玄机命理</span> |
|
</div> |
|
<div class="flex space-x-6"> |
|
<a href="#" class="hover:text-yellow-300">关于我们</a> |
|
<a href="#" class="hover:text-yellow-300">隐私政策</a> |
|
<a href="#" class="hover:text-yellow-300">联系方式</a> |
|
</div> |
|
</div> |
|
<div class="border-t border-gray-700 mt-6 pt-6 text-center text-gray-400"> |
|
<p>© 2023 玄机命理. 保留所有权利.</p> |
|
<p class="mt-2 text-sm">本网站内容仅供娱乐参考，不构成任何决策建议</p> |
|
</div> |
|
</div> |
|
</footer> |
|
|
|
<script> |
|
|
|
const birthYearSelect = document.getElementById('birthYear'); |
|
const currentYear = new Date().getFullYear(); |
|
for (let year = currentYear - 100; year <= currentYear; year++) { |
|
const option = document.createElement('option'); |
|
option.value = year; |
|
option.textContent = year + '年'; |
|
birthYearSelect.appendChild(option); |
|
} |
|
|
|
|
|
document.getElementById('birthMonth').addEventListener('change', updateDays); |
|
document.getElementById('birthYear').addEventListener('change', updateDays); |
|
|
|
function updateDays() { |
|
const year = document.getElementById('birthYear').value; |
|
const month = document.getElementById('birthMonth').value; |
|
const daySelect = document.getElementById('birthDay'); |
|
|
|
|
|
daySelect.innerHTML = '<option value="">请选择日期</option>'; |
|
|
|
if (year && month) { |
|
const daysInMonth = new Date(year, month, 0).getDate(); |
|
|
|
for (let day = 1; day <= daysInMonth; day++) { |
|
const option = document.createElement('option'); |
|
option.value = day; |
|
option.textContent = day + '日'; |
|
daySelect.appendChild(option); |
|
} |
|
} |
|
} |
|
|
|
|
|
document.getElementById('startFortuneBtn').addEventListener('click', () => { |
|
document.getElementById('birthDateModal').classList.remove('hidden'); |
|
}); |
|
|
|
document.getElementById('baziBtn').addEventListener('click', () => { |
|
document.getElementById('birthDateModal').classList.remove('hidden'); |
|
}); |
|
|
|
document.getElementById('coinDivBtn').addEventListener('click', () => { |
|
document.getElementById('divinationModal').classList.remove('hidden'); |
|
document.getElementById('divinationTitle').textContent = '金钱卦占卜'; |
|
document.getElementById('divinationDesc').textContent = '心中默念您的问题，然后点击下方按钮开始占卜'; |
|
document.getElementById('divinationIcon').innerHTML = '<i class="fas fa-coins text-yellow-600 text-4xl"></i>'; |
|
document.getElementById('coinsContainer').classList.remove('hidden'); |
|
document.getElementById('yarrowContainer').classList.add('hidden'); |
|
document.getElementById('divinationProcess').classList.remove('hidden'); |
|
document.getElementById('divinationResult').classList.add('hidden'); |
|
}); |
|
|
|
document.getElementById('yarrowDivBtn').addEventListener('click', () => { |
|
document.getElementById('divinationModal').classList.remove('hidden'); |
|
document.getElementById('divinationTitle').textContent = '筹策占卜'; |
|
document.getElementById('divinationDesc').textContent = '心中诚意思考您的问题，然后按照传统手法进行分步占卜'; |
|
document.getElementById('divinationIcon').innerHTML = '<i class="fas fa-leaf text-green-600 text-4xl"></i>'; |
|
document.getElementById('coinsContainer').classList.add('hidden'); |
|
document.getElementById('yarrowContainer').classList.remove('hidden'); |
|
document.getElementById('divinationProcess').classList.remove('hidden'); |
|
document.getElementById('divinationResult').classList.add('hidden'); |
|
}); |
|
|
|
document.getElementById('closeBirthModal').addEventListener('click', () => { |
|
document.getElementById('birthDateModal').classList.add('hidden'); |
|
}); |
|
|
|
document.getElementById('closeDivModal').addEventListener('click', () => { |
|
document.getElementById('divinationModal').classList.add('hidden'); |
|
}); |
|
|
|
document.getElementById('closeResultModal').addEventListener('click', () => { |
|
document.getElementById('fortuneResultModal').classList.add('hidden'); |
|
}); |
|
|
|
|
|
document.getElementById('confirmBirth').addEventListener('click', () => { |
|
const year = document.getElementById('birthYear').value; |
|
const month = document.getElementById('birthMonth').value; |
|
const day = document.getElementById('birthDay').value; |
|
const hour = document.getElementById('birthHour').value; |
|
|
|
if (!year || !month || !day || !hour) { |
|
alert('请填写完整的生辰信息'); |
|
return; |
|
} |
|
|
|
document.getElementById('birthDateModal').classList.add('hidden'); |
|
|
|
|
|
const resultModal = document.getElementById('fortuneResultModal'); |
|
resultModal.classList.remove('hidden'); |
|
|
|
|
|
setTimeout(() => { |
|
|
|
const birthDate = `${year}年${month}月${day}日 ${getHourText(hour)}`; |
|
document.getElementById('resultBirthDate').textContent = birthDate; |
|
|
|
|
|
const bazi = generateRandomBazi(); |
|
document.getElementById('resultBazi').textContent = bazi; |
|
|
|
|
|
const elements = generateRandomElements(); |
|
document.getElementById('resultElements').textContent = elements; |
|
|
|
|
|
document.getElementById('resultAnalysis').textContent = generateRandomAnalysis(bazi); |
|
|
|
|
|
generateLuckChart(); |
|
|
|
}, 1000); |
|
}); |
|
|
|
function getHourText(hour) { |
|
const hours = [ |
|
'23:00-00:59(子时)', '01:00-02:59(丑时)', '03:00-04:59(寅时)', |
|
'05:00-06:59(卯时)', '07:00-08:59(辰时)', '09:00-10:59(巳时)', |
|
'11:00-12:59(午时)', '13:00-14:59(未时)', '15:00-16:59(申时)', |
|
'17:00-18:59(酉时)', '19:00-20:59(戌时)', '21:00-22:59(亥时)' |
|
]; |
|
return hours[parseInt(hour)]; |
|
} |
|
|
|
function generateRandomBazi() { |
|
const heavenlyStems = ['甲', '乙', '丙', '丁', '戊', '己', '庚', '辛', '壬', '癸']; |
|
const earthlyBranches = ['子', '丑', '寅', '卯', '辰', '巳', '午', '未', '申', '酉', '戌', '亥']; |
|
|
|
let bazi = ''; |
|
for (let i = 0; i < 4; i++) { |
|
const stem = heavenlyStems[Math.floor(Math.random() * heavenlyStems.length)]; |
|
const branch = earthlyBranches[Math.floor(Math.random() * earthlyBranches.length)]; |
|
bazi += stem + branch + ' '; |
|
} |
|
return bazi.trim(); |
|
} |
|
|
|
function generateRandomElements() { |
|
const elements = ['金', '木', '水', '火', '土']; |
|
let result = ''; |
|
for (let i = 0; i < 4; i++) { |
|
result += elements[Math.floor(Math.random() * elements.length)] + ' '; |
|
} |
|
return result.trim(); |
|
} |
|
|
|
function generateRandomAnalysis(bazi) { |
|
const positiveAnalyses = [ |
|
`${bazi.split(' ')[0]}年柱显示您早年运势极佳，家庭环境优越。`, |
|
`${bazi.split(' ')[1]}月柱代表您中年事业运强，能得贵人相助。`, |
|
`${bazi.split(' ')[2]}日柱表明您天赋异禀，智慧超群。`, |
|
`${bazi.split(' ')[3]}时柱预示晚年生活富足，子孙贤孝。` |
|
]; |
|
|
|
const neutralAnalyses = [ |
|
'五行火旺之人，性格热情但易浮躁，建议修身养性。', |
|
'命带比肩，交友广泛但需防小人。', |
|
'官印相生，适合从事管理工作或公务员职业。', |
|
'财星入命，一生衣食无忧，但需学会理财。' |
|
]; |
|
|
|
const negativeAnalyses = [ |
|
'当前行运遇到冲克，建议稳守为上，不宜大动作。', |
|
'流年遇七杀，需防意外伤灾，注意安全。', |
|
'比劫夺财，需谨慎投资，避免借贷纠纷。', |
|
'五行缺水，健康方面需注意肾脏和泌尿系统。' |
|
]; |
|
|
|
let analysis = ''; |
|
|
|
|
|
for (let i = 0; i < 1 + Math.floor(Math.random() * 2); i++) { |
|
analysis += positiveAnalyses[Math.floor(Math.random() * positiveAnalyses.length)] + ' '; |
|
} |
|
|
|
|
|
for (let i = 0; i < 2 + Math.floor(Math.random() * 2); i++) { |
|
analysis += neutralAnalyses[Math.floor(Math.random() * neutralAnalyses.length)] + ' '; |
|
} |
|
|
|
|
|
for (let i = 0; i < 1 + Math.floor(Math.random() * 2); i++) { |
|
analysis += negativeAnalyses[Math.floor(Math.random() * negativeAnalyses.length)] + ' '; |
|
} |
|
|
|
|
|
analysis += '建议佩戴对应五行物品平衡命局，多行善事积累福报。'; |
|
|
|
return analysis; |
|
} |
|
|
|
function generateLuckChart() { |
|
const chart = document.getElementById('luckChart'); |
|
chart.innerHTML = ''; |
|
|
|
const years = [6, 16, 26, 36, 46, 56, 66, 76]; |
|
const qualities = ['吉', '平', '凶', '大吉', '大凶', '平', '吉', '平']; |
|
const colors = ['bg-green-500', 'bg-blue-500', 'bg-red-500', 'bg-green-700', 'bg-red-700', 'bg-blue-500', 'bg-green-500', 'bg-blue-500']; |
|
|
|
for (let i = 0; i < years.length; i++) { |
|
const div = document.createElement('div'); |
|
div.className = 'flex flex-col items-center'; |
|
|
|
const ageSpan = document.createElement('span'); |
|
ageSpan.className = 'text-sm text-gray-600 mb-1'; |
|
ageSpan.textContent = `${years[i]}-${years[i]+9}岁`; |
|
|
|
const bar = document.createElement('div'); |
|
bar.className = `w-4 ${colors[i]} rounded-t-sm`; |
|
bar.style.height = `${20 + (i % 3) * 10}px`; |
|
|
|
const qualitySpan = document.createElement('span'); |
|
qualitySpan.className = 'text-xs text-gray-700 mt-1'; |
|
qualitySpan.textContent = qualities[i]; |
|
|
|
div.appendChild(ageSpan); |
|
div.appendChild(bar); |
|
div.appendChild(qualitySpan); |
|
|
|
chart.appendChild(div); |
|
} |
|
} |
|
|
|
|
|
document.getElementById('startDivination').addEventListener('click', () => { |
|
const process = document.getElementById('divinationProcess'); |
|
const result = document.getElementById('divinationResult'); |
|
|
|
|
|
const coins = document.querySelectorAll('.coin'); |
|
coins.forEach(coin => { |
|
coin.innerHTML = '<i class="fas fa-circle text-gray-700 coin-animation"></i>'; |
|
}); |
|
|
|
|
|
setTimeout(() => { |
|
process.classList.add('hidden'); |
|
|
|
|
|
const hexagrams = [ |
|
{name: '乾卦', interpretation: '该卦象征天，代表刚健和创造。您当前面临重大机遇，需要主动出击，把握时机。但乾卦也警示过刚易折，需注意刚柔并济。'}, |
|
{name: '坤卦', interpretation: '该卦象征地，代表顺从和包容。提示您现在不宜强求，应当顺应形势，厚德载物。特别在人际关系上要多包容理解。'}, |
|
{name: '艮卦', interpretation: '该卦象征山，代表止息与稳定。提示您当前应反思决策，不宜冒进。可以考虑暂停某些计划，等待更佳时机。'}, |
|
{name: '震卦', interpretation: '该卦象征雷，代表行动与变革。显示您现在处于变动期，重大改变即将到来。挑战虽大，但也是突破困境的良机。'}, |
|
{name: '坎卦', interpretation: '该卦象征水，代表险境与智慧。您可能面临艰难处境，但保持冷静和智慧将助您渡过难关，此时特别需要谨慎行事。'}, |
|
{name: '离卦', interpretation: '该卦象征火，代表光明与依附。提示您需要寻找正确依靠对象或方向，保持明朗心态，不宜独断专行。'}, |
|
{name: '兑卦', interpretation: '该卦象征泽，代表喜悦与沟通。显示人际交往是当前重点，通过良好沟通可以化解矛盾，带来吉运。'}, |
|
{name: '巽卦', interpretation: '该卦象征风，代表渗透与顺从。提示您现在宜采取温和渐进的策略，避免强行突破，小步快走能够成功。'} |
|
]; |
|
|
|
const randomHexagram = hexagrams[Math.floor(Math.random() * hexagrams.length)]; |
|
document.getElementById('hexagramName').textContent = randomHexagram.name; |
|
document.getElementById('hexagramInterpretation').textContent = randomHexagram.interpretation; |
|
|
|
result.classList.remove('hidden'); |
|
}, 2000); |
|
}); |
|
|
|
document.getElementById('newDivination').addEventListener('click', () => { |
|
document.getElementById('divinationProcess').classList.remove('hidden'); |
|
document.getElementById('divinationResult').classList.add('hidden'); |
|
}); |
|
</script> |
|
<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - <a href="https://enzostvs-deepsite.hf.space?remix=HOrdye/xuan3" style="color: #fff;text-decoration: underline;" target="_blank" >🧬 Remix</a></p></body> |
|
</html> |
