console
document.getElementById('predict').addEventListener('click', () => {
const birthdate = document.getElementById('birthdate').value;
if (!birthdate) {
alert('请输入出生日期！');
return;
}
const date = new Date(birthdate);
const zodiac = getZodiac(date);
const constellation = getConstellation(date);
const horoscope = getHoroscope(constellation);
const fortuneData = getFortuneData(constellation);
document.getElementById('zodiac').textContent = zodiac;
document.getElementById('constellation').textContent = constellation;
document.getElementById('horoscope').textContent = horoscope;
document.getElementById('fortune').textContent = fortuneData.fortune;
document.getElementById('lucky-color').textContent = fortuneData.luckyColor;
document.getElementById('result').classList.remove('hidden');
setTimeout(() => {
document.getElementById('result').classList.add('visible');
}, 100);
});
function getZodiac(date) {
const year = date.getFullYear();
const zodiacs = ['鼠', '牛', '虎', '兔', '龙', '蛇', '马', '羊', '猴', '鸡', '狗', '猪'];
return zodiacs[(year - 4) % 12];
}
function getConstellation(date) {
const month = date.getMonth() + 1;
const day = date.getDate();
if ((month === 1 && day >= 20) || (month === 2 && day <= 18)) return '水瓶座';
if ((month === 2 && day >= 19) || (month === 3 && day <= 20)) return '双鱼座';
if ((month === 3 && day >= 21) || (month === 4 && day <= 19)) return '白羊座';
if ((month === 4 && day >= 20) || (month === 5 && day <= 20)) return '金牛座';
if ((month === 5 && day >= 21) || (month === 6 && day <= 21)) return '双子座';
if ((month === 6 && day >= 22) || (month === 7 && day <= 22)) return '巨蟹座';
if ((month === 7 && day >= 23) || (month === 8 && day <= 22)) return '狮子座';
if ((month === 8 && day >= 23) || (month === 9 && day <= 22)) return '处女座';
if ((month === 9 && day >= 23) || (month === 10 && day <= 23)) return '天秤座';
if ((month === 10 && day >= 24) || (month === 11 && day <= 22)) return '天蝎座';
if ((month === 11 && day >= 23) || (month === 12 && day <= 21)) return '射手座';
return '摩羯座';
}
function getHoroscope(constellation) {
const horoscopes = {
'水瓶座': '风象星座',
'双鱼座': '水象星座',
'白羊座': '火象星座',
'金牛座': '土象星座',
'双子座': '风象星座',
'巨蟹座': '水象星座',
'狮子座': '火象星座',
'处女座': '土象星座',
'天秤座': '风象星座',
'天蝎座': '水象星座',
'射手座': '火象星座',
'摩羯座': '土象星座'
};
return horoscopes[constellation];
}
const fortunes = {
"水瓶座": { "fortune": "本月你将充满创意，适合尝试新事物。", "luckyColor": "蓝色" },
"双鱼座": { "fortune": "本月你的直觉敏锐，适合做出重要决定。", "luckyColor": "紫色" },
"白羊座": { "fortune": "本月你将充满活力，适合开展新项目。", "luckyColor": "红色" },
"金牛座": { "fortune": "本月你将收获稳定，适合规划未来。", "luckyColor": "绿色" },
"双子座": { "fortune": "本月你将社交活跃，适合拓展人脉。", "luckyColor": "黄色" },
"巨蟹座": { "fortune": "本月你将情感丰富，适合与家人共度时光。", "luckyColor": "银色" },
"狮子座": { "fortune": "本月你将自信满满，适合展示自我。", "luckyColor": "金色" },
"处女座": { "fortune": "本月你将注重细节，适合完成重要任务。", "luckyColor": "灰色" },
"天秤座": { "fortune": "本月你将追求平衡，适合解决冲突。", "luckyColor": "粉色" },
"天蝎座": { "fortune": "本月你将洞察力强，适合深入思考。", "luckyColor": "黑色" },
"射手座": { "fortune": "本月你将充满冒险精神，适合旅行。", "luckyColor": "橙色" },
"摩羯座": { "fortune": "本月你将脚踏实地，适合实现目标。", "luckyColor": "棕色" }
};
function getFortuneData(constellation) {
return fortunes[constellation];
}
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>星盘预测</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<h1>�� 星盘预测 ��</h1>
<p>请输入你的出生日期：</p>
<input type="date" id="birthdate" max="2023-12-31">
<button id="predict">预测</button>
<div id="result" class="hidden">
<h2>你的星盘信息</h2>
<p>生肖：<span id="zodiac"></span></p>
<p>星座：<span id="constellation"></span></p>
<p>星盘属性：<span id="horoscope"></span></p>
<p>本月运势：<span id="fortune"></span></p>
<p>幸运色：<span id="lucky-color"></span></p>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
body {
font-family: Arial, sans-serif;
background-color: #1e1e2f;
color: #fff;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}
.container {
background-color: #2a2a40;
padding: 20px;
border-radius: 10px;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
text-align: center;
max-width: 400px;
width: 100%;
}
h1 {
margin-bottom: 20px;
font-size: 2em;
color: #ff6f61;
}
input[type="date"] {
padding: 10px;
font-size: 16px;
border: 2px solid #ff6f61;
border-radius: 5px;
background-color: #3a3a4f;
color: #fff;
margin-bottom: 20px;
}
button {
padding: 10px 20px;
font-size: 16px;
background-color: #ff6f61;
color: #fff;
border: none;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.3s ease;
}
button:hover {
background-color: #ff4a3d;
}
#result {
margin-top: 20px;
opacity: 0;
transition: opacity 0.5s ease;
}
#result.visible {
opacity: 1;
}
.hidden {
display: none;
}