文章摘要
该文章提供一款单页黄历的 HTML 源码，内容包括公历日期、农历日期、节气、时辰、天干地支等基本信息，并展示星座相关的综合运势、幸运颜色、幸运数字和速配星座。该页面采用简洁美观的设计样式，并通过调用 `https://api.fenx.top/api/huangli` 接口获取动态数据。加载过程中显示“正在加载数据...”，数据获取失败时会显示错误信息。页面包含可点击刷新数据的按钮，用户可实时更新黄历和运势信息。
— 文章部分摘要由DeepSeek深度思考而成
![图片[1]|一款单页黄历HTML源码|不死鸟资源网](https://busi.net/wp-content/uploads/2025/06/20250608195348645-image-1024x493.png)
HTML 源码
今日黄历
正在加载数据…
基本信息
公历日期：
农历日期：
节气：
时辰：
天干地支：
星座运势
综合运势
幸运颜色
幸运数字
速配星座
数据来源：https://api.fenx.top/api/huangli
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>今日黄历 - 动态数据</title>
<style>
body {
font-family: 'Arial', sans-serif;
background-color: #f5f5f5;
margin: 0;
padding: 20px;
color: #333;
}
.container {
max-width: 800px;
margin: 0 auto;
background-color: white;
border-radius: 10px;
box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
padding: 20px;
}
h1 {
text-align: center;
color: #333;
margin-bottom: 30px;
}
.card {
margin-bottom: 20px;
padding: 15px;
border-radius: 8px;
background-color: #fff;
border-left: 4px solid #ff8c00;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
}
.card h2 {
margin-top: 0;
color: #ff8c00;
font-size: 18px;
border-bottom: 1px solid #eee;
padding-bottom: 8px;
}
.card p {
margin: 8px 0;
line-height: 1.5;
}
.highlight {
color: #ff8c00;
font-weight: bold;
}
.fortune {
display: flex;
flex-wrap: wrap;
gap: 15px;
margin-top: 15px;
}
.fortune-item {
flex: 1;
min-width: 120px;
padding: 10px;
background-color: #fff8f0;
border-radius: 6px;
text-align: center;
}
.fortune-label {
font-size: 14px;
color: #666;
}
.fortune-value {
font-size: 16px;
font-weight: bold;
margin-top: 5px;
}
.lucky-color {
display: inline-block;
width: 20px;
height: 20px;
border-radius: 50%;
margin-right: 5px;
vertical-align: middle;
}
.lucky-number {
font-size: 20px;
font-weight: bold;
color: #ff8c00;
}
.today-quote {
font-style: italic;
text-align: center;
padding: 15px;
background-color: #f9f9f9;
border-left: 3px solid #ff8c00;
margin: 15px 0;
}
.loading {
text-align: center;
padding: 20px;
font-style: italic;
color: #888;
}
.error {
text-align: center;
padding: 20px;
color: #d9534f;
font-weight: bold;
}
.footer {
text-align: center;
margin-top: 30px;
color: #888;
font-size: 14px;
}
button {
display: block;
margin: 20px auto;
padding: 10px 20px;
background-color: #ff8c00;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
font-size: 16px;
}
button:hover {
background-color: #e67e00;
}
</style>
</head>
<body>
<div class="container">
<h1>今日黄历</h1>
<div id="loading" class="loading">正在加载数据...</div>
<div id="error" class="error" style="display: none;"></div>
<div id="content" style="display: none;">
<div id="basic-info" class="card">
<h2>基本信息</h2>
<p><strong>公历日期：</strong><span id="gregorian-date" class="highlight"></span></p>
<p><strong>农历日期：</strong><span id="lunar-date" class="highlight"></span></p>
<p><strong>节气：</strong><span id="solar-term" class="highlight"></span></p>
<p><strong>时辰：</strong><span id="hour" class="highlight"></span></p>
<p><strong>天干地支：</strong><span id="stem-branch" class="highlight"></span></p>
</div>
<div id="fortune-info" class="card">
<h2>星座运势</h2>
<div id="today-quote" class="today-quote"></div>
<div class="fortune">
<div class="fortune-item">
<div class="fortune-label">综合运势</div>
<div id="overall-fortune" class="fortune-value"></div>
</div>
<div class="fortune-item">
<div class="fortune-label">幸运颜色</div>
<div id="lucky-color" class="fortune-value"></div>
</div>
<div class="fortune-item">
<div class="fortune-label">幸运数字</div>
<div id="lucky-number" class="fortune-value"></div>
</div>
<div class="fortune-item">
<div class="fortune-label">速配星座</div>
<div id="compatible-sign" class="fortune-value"></div>
</div>
</div>
</div>
</div>
<button id="refresh-btn">刷新数据</button>
<div class="footer">
<p>数据来源：https://api.fenx.top/api/huangli</p>
</div>
</div>
<script>
// 获取 DOM 元素
const loadingEl = document.getElementById('loading');
const errorEl = document.getElementById('error');
const contentEl = document.getElementById('content');
const refreshBtn = document.getElementById('refresh-btn');
// 黄历数据相关元素
const gregorianDateEl = document.getElementById('gregorian-date');
const lunarDateEl = document.getElementById('lunar-date');
const solarTermEl = document.getElementById('solar-term');
const hourEl = document.getElementById('hour');
const stemBranchEl = document.getElementById('stem-branch');
const todayQuoteEl = document.getElementById('today-quote');
const overallFortuneEl = document.getElementById('overall-fortune');
const luckyColorEl = document.getElementById('lucky-color');
const luckyNumberEl = document.getElementById('lucky-number');
const compatibleSignEl = document.getElementById('compatible-sign');
// 获取黄历数据
async function fetchHuangliData() {
try {
// 显示加载状态
loadingEl.style.display = 'block';
errorEl.style.display = 'none';
contentEl.style.display = 'none';
// 发起 API 请求
const response = await fetch('https://api.fenx.top/api/huangli');
// 检查响应状态
if (!response.ok) {
throw new Error('网络请求失败，请稍后再试');
}
// 解析 JSON 数据
const data = await response.json();
// 如果 API 返回错误码
if (data.code !== 1) {
throw new Error('API 返回错误数据');
}
// 填充数据到页面
gregorianDateEl.textContent = data.data['时间'];
lunarDateEl.textContent = data.data['农历'];
solarTermEl.textContent = data.data['节气'];
hourEl.textContent = data.data['时辰'];
stemBranchEl.textContent = data.data['天干地支'];
todayQuoteEl.textContent = data.data['星座运势']['今日一言'];
overallFortuneEl.textContent = `${data.data['星座运势']['综合运势']}分`;
// 设置幸运颜色
const luckyColor = data.data['星座运势']['幸运颜色'];
luckyColorEl.innerHTML = `<span class="lucky-color" style="background-color: ${luckyColor}"></span>${luckyColor}`;
// 设置幸运数字
luckyNumberEl.innerHTML = `<span class="lucky-number">${data.data['星座运势']['幸运数字']}</span>`;
// 设置速配星座
compatibleSignEl.textContent = data.data['星座运势']['速配星座'];
// 隐藏加载状态，显示内容
loadingEl.style.display = 'none';
contentEl.style.display = 'block';
} catch (error) {
// 处理错误
loadingEl.style.display = 'none';
errorEl.style.display = 'block';
errorEl.textContent = error.message;
contentEl.style.display = 'none';
console.error('获取黄历数据失败:', error);
}
}
// 页面加载时自动获取数据
window.addEventListener('load', fetchHuangliData);
// 刷新按钮点击事件
refreshBtn.addEventListener('click', fetchHuangliData);
</script>
</body>
</html>本站文章部分内容可能来源于网络,仅供大家学习参考,如有侵权,请联系站长📧ommind@qq.com进行删除处理!
THE END
