wordpress 侧边栏html插件

<div class="stats-widget">
<style>
.stats-widget {
font-family: Arial, sans-serif;
background: #ffffff;
border-radius: 8px;
padding: 15px;
color: #333333;
margin-bottom: 15px;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
border: 1px solid #e0e0e0;
}

.stats-widget h4 {
margin: 0 0 10px 0;
font-size: 16px;
text-align: center;
color: #667eea;
font-weight: 600;
}

.stats-container {
display: flex;
flex-wrap: wrap;
margin-bottom: 10px;
}

.stat-item {
flex: 1 0 45%;
background: #f8f9fa;
padding: 8px;
border-radius: 6px;
text-align: center;
margin: 2.5%;
border: 1px solid #e9ecef;
}

.stat-label {
font-size: 12px;
color: #6c757d;
margin-bottom: 4px;
}

.stat-value {
font-size: 16px;
font-weight: bold;
color: #495057;
}

.weather-container {
background: #f8f9fa;
padding: 10px;
border-radius: 6px;
text-align: center;
margin-top: 10px;
border: 1px solid #e9ecef;
}

.weather-info {
display: flex;
align-items: center;
justify-content: center;
margin-top: 5px;
}

.weather-icon {
font-size: 24px;
margin-right: 8px;
}

.lunar-date {
text-align: center;
margin-top: 10px;
font-size: 14px;
color: #6c757d;
background: #f8f9fa;
padding: 8px;
border-radius: 6px;
border: 1px solid #e9ecef;
}
</style>

<h4>时间统计</h4>
<div class="stats-container">
<div class="stat-item">
<div class="stat-label">今年剩余</div>
<div class="stat-value" id="daysRemaining">计算中...</div>
</div>
<div class="stat-item">
<div class="stat-label">本月剩余</div>
<div class="stat-value" id="monthDaysRemaining">计算中...</div>
</div>
<div class="stat-item">
<div class="stat-label">本季度剩余</div>
<div class="stat-value" id="quarterDaysRemaining">计算中...</div>
</div>
<div class="stat-item">
<div class="stat-label">本周剩余</div>
<div class="stat-value" id="weekDaysRemaining">计算中...</div>
</div>
</div>

<div class="weather-container">
<div class="stat-label">上海天气</div>
<div class="weather-info">
<div class="weather-icon" id="weatherIcon">🌤️</div>
<div>
<div id="weatherTemp">--°C</div>
<div id="weatherDesc">加载中...</div>
</div>
</div>
</div>

<div class="lunar-date">
<div class="stat-label">农历</div>
<div id="lunarDate">计算中...</div>
</div>

<script>
function calculateTimeRemaining() {
const today = new Date();

// 今年剩余天数
const endOfYear = new Date(today.getFullYear(), 11, 31);
const daysLeftYear = Math.ceil((endOfYear - today) / (1000 * 60 * 60 * 24));
document.getElementById('daysRemaining').innerText = daysLeftYear + " 天";

// 本月剩余天数
const endOfMonth = new Date(today.getFullYear(), today.getMonth() + 1, 0);
const daysLeftMonth = Math.ceil((endOfMonth - today) / (1000 * 60 * 60 * 24));
document.getElementById('monthDaysRemaining').innerText = daysLeftMonth + " 天";

// 本季度剩余天数
const currentQuarter = Math.floor(today.getMonth() / 3);
const endOfQuarter = new Date(today.getFullYear(), (currentQuarter + 1) * 3, 0);
const daysLeftQuarter = Math.ceil((endOfQuarter - today) / (1000 * 60 * 60 * 24));
document.getElementById('quarterDaysRemaining').innerText = daysLeftQuarter + " 天";

// 本周剩余天数
const endOfWeek = new Date(today);
endOfWeek.setDate(today.getDate() + (7 - today.getDay()));
const daysLeftWeek = Math.ceil((endOfWeek - today) / (1000 * 60 * 60 * 24));
document.getElementById('weekDaysRemaining').innerText = daysLeftWeek + " 天";
}

function getLunarDate() {
// 简化版农历计算（实际应用中建议使用专门的农历库）
const today = new Date();
const lunarInfo = [
0x04bd8, 0x04ae0, 0x0a570, 0x054d5, 0x0d260, 0x0d950, 0x16554, 0x056a0, 0x09ad0, 0x055d2,
0x04ae0, 0x0a5b6, 0x0a4d0, 0x0d250, 0x1d255, 0x0b540, 0x0d6a0, 0x0ada2, 0x095b0, 0x14977,
0x04970, 0x0a4b0, 0x0b4b5, 0x06a50, 0x06d40, 0x1ab54, 0x02b60, 0x09570, 0x052f2, 0x04970,
0x06566, 0x0d4a0, 0x0ea50, 0x06e95, 0x05ad0, 0x02b60, 0x186e3, 0x092e0, 0x1c8d7, 0x0c950,
0x0d4a0, 0x1d8a6, 0x0b550, 0x056a0, 0x1a5b4, 0x025d0, 0x092d0, 0x0d2b2, 0x0a950, 0x0b557
];

// 简化计算，实际应用中应使用更精确的算法
const lunarMonths = ["正月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "冬月", "腊月"];
const lunarDays = ["初一", "初二", "初三", "初四", "初五", "初六", "初七", "初八", "初九", "初十",
"十一", "十二", "十三", "十四", "十五", "十六", "十七", "十八", "十九", "二十",
"廿一", "廿二", "廿三", "廿四", "廿五", "廿六", "廿七", "廿八", "廿九", "三十"];

// 这里使用简化算法，实际应用中应使用更精确的农历计算库
const month = lunarMonths[today.getMonth() % 12];
const day = lunarDays[today.getDate() % 30];

document.getElementById('lunarDate').innerText = month + day;
}

function getWeatherData() {
// 使用OpenWeatherMap API获取上海天气（需要注册获取API密钥）
// 这里使用模拟数据，实际使用时请替换为真实的API调用
const apiKey = 'YOUR_API_KEY'; // 替换为你的API密钥
const city = 'Shanghai';
const apiUrl = `https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=${apiKey}&units=metric&lang=zh_cn`;

// 模拟数据（实际使用时请删除这部分，使用上面的API调用）
const mockWeatherData = {
main: { temp: 22 },
weather: [{ description: '多云', icon: '03d' }]
};

// 使用模拟数据
document.getElementById('weatherTemp').innerText = mockWeatherData.main.temp + "°C";
document.getElementById('weatherDesc').innerText = mockWeatherData.weather[0].description;

// 根据天气描述设置图标
const weatherDesc = mockWeatherData.weather[0].description;
let weatherIcon = '🌤️'; // 默认图标

if (weatherDesc.includes('晴')) weatherIcon = '☀️';
else if (weatherDesc.includes('云')) weatherIcon = '☁️';
else if (weatherDesc.includes('雨')) weatherIcon = '🌧️';
else if (weatherDesc.includes('雪')) weatherIcon = '❄️';
else if (weatherDesc.includes('雾') || weatherDesc.includes('霾')) weatherIcon = '🌫️';

document.getElementById('weatherIcon').innerText = weatherIcon;

/* 实际API调用代码（取消注释并替换API密钥）
fetch(apiUrl)
.then(response => response.json())
.then(data => {
document.getElementById('weatherTemp').innerText = data.main.temp + "°C";
document.getElementById('weatherDesc').innerText = data.weather[0].description;

// 根据天气图标代码设置表情图标
const iconCode = data.weather[0].icon;
let weatherIcon = '🌤️'; // 默认图标

if (iconCode.includes('01')) weatherIcon = '☀️'; // 晴天
else if (iconCode.includes('02')) weatherIcon = '⛅'; // 少云
else if (iconCode.includes('03') || iconCode.includes('04')) weatherIcon = '☁️'; // 多云
else if (iconCode.includes('09')) weatherIcon = '🌧️'; // 阵雨
else if (iconCode.includes('10')) weatherIcon = '🌦️'; // 雨
else if (iconCode.includes('11')) weatherIcon = '⛈️'; // 雷雨
else if (iconCode.includes('13')) weatherIcon = '❄️'; // 雪
else if (iconCode.includes('50')) weatherIcon = '🌫️'; // 雾

document.getElementById('weatherIcon').innerText = weatherIcon;
})
.catch(error => {
console.error('获取天气数据失败:', error);
document.getElementById('weatherTemp').innerText = '--°C';
document.getElementById('weatherDesc').innerText = '获取失败';
});
*/
}

// 初始化
calculateTimeRemaining();
getLunarDate();
getWeatherData();

// 每分钟更新一次数据
setInterval(function() {
calculateTimeRemaining();
getLunarDate();
getWeatherData();
}, 60000);
</script>
</div>