<!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 {
margin: 0;
padding: 0;
background-color: #f5f5f5;
font-family: 'Arial', sans-serif;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: #fdf5e6;
}
.container {
width: 90%;
max-width: 600px;
background: white;
border-radius: 20px;
overflow: hidden;
padding: 25px;
position: relative;
box-shadow: 8px 8px 0px #FF6B6B;
border: 3px solid #000;
}
/* 孟菲斯风格装饰元素 */
.memphis-dot {
position: absolute;
width: 20px;
height: 20px;
background: #FFD166;
border-radius: 50%;
border: 2px solid #000;
}
.memphis-dot-1 {
top: 15px;
right: 20px;
}
.memphis-dot-2 {
bottom: 20px;
left: 25px;
background: #4ECDC4;
}
.memphis-zigzag {
position: absolute;
top: 70px;
right: 30px;
width: 60px;
height: 15px;
background: repeating-linear-gradient(45deg, #FF6B6B, #FF6B6B 10px, transparent 10px, transparent 20px);
transform: rotate(-15deg);
border: 2px solid #000;
}
.memphis-square {
position: absolute;
bottom: 100px;
right: 40px;
width: 30px;
height: 30px;
background: #06D6A0;
border: 2px solid #000;
transform: rotate(30deg);
}
.memphis-triangle {
position: absolute;
top: 150px;
left: 20px;
width: 0;
height: 0;
border-left: 25px solid transparent;
border-right: 25px solid transparent;
border-bottom: 40px solid #118AB2;
z-index: 0;
}
.header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 25px;
position: relative;
z-index: 1;
}
.location {
font-size: 1.8rem;
font-weight: bold;
color: #073B4C;
background: #FFD166;
padding: 5px 15px;
border-radius: 10px;
border: 2px solid #000;
box-shadow: 4px 4px 0px #000;
}
.date-time {
font-size: 0.9rem;
color: #073B4C;
background: #4ECDC4;
padding: 5px 10px;
border-radius: 8px;
border: 2px solid #000;
}
.main-info {
display: flex;
justify-content: space-between;
margin-bottom: 30px;
position: relative;
z-index: 1;
}
.temperature {
font-size: 3.5rem;
font-weight: bold;
color: #073B4C;
background: #FF6B6B;
padding: 5px 15px;
border-radius: 15px;
border: 2px solid #000;
box-shadow: 6px 6px 0px #000;
}
.weather-icon {
font-size: 3rem;
margin-right: 20px;
background: white;
width: 70px;
height: 70px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
border: 2px solid #000;
box-shadow: 4px 4px 0px #000;
}
.weather-desc {
color: #073B4C;
font-size: 1.2rem;
margin: 10px 0;
font-weight: bold;
background: #F4F1DE;
padding: 5px 10px;
border-radius: 8px;
border: 2px solid #000;
}
.details {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 15px;
margin-bottom: 30px;
position: relative;
z-index: 1;
}
.detail-item {
background-color: white;
padding: 12px;
border-radius: 10px;
border: 2px solid #000;
box-shadow: 4px 4px 0px #000;
}
.detail-item:nth-child(odd) {
background: #F4F1DE;
}
.detail-item:nth-child(even) {
background: #E2F0CB;
}
.detail-label {
font-size: 0.9rem;
color: #073B4C;
margin-bottom: 5px;
font-weight: bold;
}
.detail-value {
font-size: 1.1rem;
color: #118AB2;
font-weight: bold;
}
.forecast {
margin-top: 30px;
overflow-x: auto;
position: relative;
z-index: 1;
}
.forecast-title {
color: #073B4C;
margin-bottom: 15px;
font-size: 1.3rem;
font-weight: bold;
background: #FFD166;
display: inline-block;
padding: 5px 15px;
border-radius: 10px;
border: 2px solid #000;
box-shadow: 4px 4px 0px #000;
}
.forecast-container {
display: flex;
padding-bottom: 15px;
}
.forecast-item {
min-width: 90px;
text-align: center;
margin-right: 15px;
background-color: white;
padding: 12px;
border-radius: 10px;
border: 2px solid #000;
box-shadow: 4px 4px 0px #000;
}
.forecast-item:nth-child(1) { background: #FFD166; }
.forecast-item:nth-child(2) { background: #06D6A0; }
.forecast-item:nth-child(3) { background: #118AB2; color: white; }
.forecast-item:nth-child(4) { background: #F4F1DE; }
.forecast-item:nth-child(5) { background: #FF6B6B; }
.forecast-time {
font-size: 0.9rem;
color: #073B4C;
margin-bottom: 8px;
font-weight: bold;
}
.forecast-temp {
font-size: 1.3rem;
color: #073B4C;
margin: 8px 0;
font-weight: bold;
}
.forecast-desc {
font-size: 0.9rem;
color: #073B4C;
font-weight: bold;
}
.air-quality {
margin-top: 30px;
padding: 15px;
background-color: #F4F1DE;
border-radius: 15px;
border: 2px solid #000;
box-shadow: 6px 6px 0px #000;
position: relative;
z-index: 1;
}
.air-quality-title {
color: #073B4C;
margin-bottom: 15px;
font-size: 1.3rem;
font-weight: bold;
background: #FF6B6B;
display: inline-block;
padding: 3px 10px;
border-radius: 8px;
border: 2px solid #000;
}
.air-quality-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
}
.air-quality-item {
background: white;
padding: 8px;
border-radius: 8px;
border: 2px solid #000;
text-align: center;
}
.air-quality-label {
color: #073B4C;
font-weight: bold;
font-size: 0.9rem;
}
.air-quality-value {
color: #118AB2;
font-weight: bold;
font-size: 1.2rem;
}
.air-quality-message {
margin-top: 15px;
color: #073B4C;
background: #06D6A0;
padding: 8px;
border-radius: 8px;
border: 2px solid #000;
font-weight: bold;
}
.indices {
margin-top: 30px;
position: relative;
z-index: 1;
}
.indices-title {
color: #073B4C;
margin-bottom: 15px;
font-size: 1.3rem;
font-weight: bold;
background: #4ECDC4;
display: inline-block;
padding: 5px 15px;
border-radius: 10px;
border: 2px solid #000;
box-shadow: 4px 4px 0px #000;
}
.indices-container {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.index-item {
background: #F4F1DE;
padding: 8px 12px;
border-radius: 8px;
border: 2px solid #000;
font-weight: bold;
color: #073B4C;
display: flex;
align-items: center;
}
.index-item span {
color: #118AB2;
margin-left: 5px;
}
/* 适配移动设备 */
[url=home.php?mod=space&uid=945662]@media[/url] (max-width: 600px) {
.details {
grid-template-columns: 1fr;
}
.air-quality-grid {
grid-template-columns: repeat(2, 1fr);
}
}
</style>
</head>
<body>
<div class="container">
<!-- 孟菲斯风格装饰元素 -->
<div class="memphis-dot memphis-dot-1"></div>
<div class="memphis-dot memphis-dot-2"></div>
<div class="memphis-zigzag"></div>
<div class="memphis-square"></div>
<div class="memphis-triangle"></div>
<div class="header">
<div class="location">东湖区</div>
<div class="date-time">2025-02-26 20:58</div>
</div>
<div class="main-info">
<div>
<div class="temperature">11.2°C</div>
<div class="weather-desc">当前天气: 霾</div>
<div class="weather-desc">今日: 9°C - 20°C</div>
</div>
<div class="weather-icon">☁️</div>
</div>
<div class="details">
<div class="detail-item">
<div class="detail-label">风向/风力</div>
<div class="detail-value">西北风 1级 (2km/h)</div>
</div>
<div class="detail-item">
<div class="detail-label">湿度</div>
<div class="detail-value">72%</div>
</div>
<div class="detail-item">
<div class="detail-label">能见度</div>
<div class="detail-value">6km</div>
</div>
<div class="detail-item">
<div class="detail-label">气压</div>
<div class="detail-value">1016 hPa</div>
</div>
<div class="detail-item">
<div class="detail-label">日出</div>
<div class="detail-value">06:45</div>
</div>
<div class="detail-item">
<div class="detail-label">日落</div>
<div class="detail-value">18:14</div>
</div>
</div>
<div class="air-quality">
<div class="air-quality-title">空气质量数据 [AQI: 78 - 良]</div>
<div class="air-quality-grid">
<div class="air-quality-item">
<div class="air-quality-label">PM2.5</div>
<div class="air-quality-value">57</div>
</div>
<div class="air-quality-item">
<div class="air-quality-label">PM10</div>
<div class="air-quality-value">76</div>
</div>
<div class="air-quality-item">
<div class="air-quality-label">CO</div>
<div class="air-quality-value">0.7</div>
</div>
<div class="air-quality-item">
<div class="air-quality-label">NO2</div>
<div class="air-quality-value">34</div>
</div>
<div class="air-quality-item">
<div class="air-quality-label">SO2</div>
<div class="air-quality-value">5</div>
</div>
<div class="air-quality-item">
<div class="air-quality-label">O3</div>
<div class="air-quality-value">65</div>
</div>
</div>
<div class="air-quality-message">
空气好，除极少数对污染物特别敏感的人群以外，对公众没有危害！
</div>
</div>
<div class="forecast">
<div class="forecast-title">未来预报</div>
<div class="forecast-container">
<div class="forecast-item">
<div class="forecast-time">21:00</div>
<div class="forecast-temp">10°C</div>
<div class="forecast-desc">多云</div>
</div>
<div class="forecast-item">
<div class="forecast-time">22:00</div>
<div class="forecast-temp">10°C</div>
<div class="forecast-desc">多云</div>
</div>
<div class="forecast-item">
<div class="forecast-time">23:00</div>
<div class="forecast-temp">10°C</div>
<div class="forecast-desc">阴</div>
</div>
<div class="forecast-item">
<div class="forecast-time">00:00</div>
<div class="forecast-temp">10°C</div>
<div class="forecast-desc">小雨</div>
</div>
<div class="forecast-item">
<div class="forecast-time">01:00</div>
<div class="forecast-temp">10°C</div>
<div class="forecast-desc">小雨</div>
</div>
</div>
</div>
<div class="indices">
<div class="indices-title">生活指数</div>
<div class="indices-container">
<div class="index-item">钓鱼 <span>适宜</span></div>
<div class="index-item">感冒 <span>易发</span></div>
<div class="index-item">过敏 <span>不易</span></div>
<div class="index-item">洗车 <span>较适宜</span></div>
<div class="index-item">运动 <span>较适宜</span></div>
<div class="index-item">紫外线 <span>最弱</span></div>
</div>
</div>
</div>
<script>
document.addEventListener('DOMContentLoaded', function() {
// 定义API请求地址
const token = "你的token";
const apiUrl = 'https://v3.alapi.cn/api/tianqi?token='+token;
// 发起API请求
fetch(apiUrl)
.then(response => {
if (!response.ok) {
throw new Error('网络响应异常');
}
return response.json();
})
.then(data => {
if (data.success) {
// 获取天气数据成功，更新页面
updateWeatherData(data.data);
} else {
console.error('获取天气数据失败:', data.message);
}
})
.catch(error => {
console.error('请求天气数据出错:', error);
});
});
// 更新页面上的天气数据
function updateWeatherData(data) {
// 更新位置和时间
document.querySelector('.location').textContent = data.city;
document.querySelector('.date-time').textContent = data.date + ' ' + data.update_time.split(' ')[1];
// 更新主要天气信息
document.querySelector('.temperature').textContent = data.temp + '°C';
document.querySelector('.weather-desc').textContent = '当前天气: ' + data.weather;
document.querySelector('.weather-desc:nth-child(3)').textContent = '今日: ' + data.min_temp + '°C - ' + data.max_temp + '°C';
// 更新天气图标 (这里可以根据weather_code设置不同的图标)
updateWeatherIcon(data.weather_code);
// 更新详细信息
const detailValues = document.querySelectorAll('.detail-value');
detailValues[0].textContent = data.wind + ' ' + data.wind_power + ' (' + data.wind_speed + ')';
detailValues[1].textContent = data.humidity;
detailValues[2].textContent = data.visibility;
detailValues[3].textContent = data.pressure + ' hPa';
detailValues[4].textContent = data.sunrise;
detailValues[5].textContent = data.sunset;
// 更新空气质量数据
document.querySelector('.air-quality-title').textContent = '空气质量数据 [AQI: ' + data.aqi.air + ' - ' + data.aqi.air_level + ']';
const aqiValues = document.querySelectorAll('.air-quality-value');
aqiValues[0].textContent = data.aqi.pm25;
aqiValues[1].textContent = data.aqi.pm10;
aqiValues[2].textContent = data.aqi.co;
aqiValues[3].textContent = data.aqi.no2;
aqiValues[4].textContent = data.aqi.so2;
aqiValues[5].textContent = data.aqi.o3;
document.querySelector('.air-quality-message').textContent = data.aqi.air_tips;
// 更新未来预报
updateForecast(data.hour);
// 更新生活指数
updateIndices(data.index);
}
// 更新天气图标
function updateWeatherIcon(weatherCode) {
let icon = '☁️'; // 默认图标
// 根据天气代码设置不同的图标
switch(weatherCode) {
case 'qing':
icon = '☀️';
break;
case 'duoyun':
icon = '⛅';
break;
case 'yin':
icon = '☁️';
break;
case 'yu':
case 'xiaoyu':
icon = '🌧️';
break;
case 'dayu':
icon = '🌧️';
break;
case 'xue':
icon = '❄️';
break;
case 'mai':
icon = '🌫️';
break;
// 可以添加更多天气代码对应的图标
}
document.querySelector('.weather-icon').textContent = icon;
}
// 更新未来预报
function updateForecast(hourData) {
const forecastItems = document.querySelectorAll('.forecast-item');
// 只显示未来5个小时的预报
for (let i = 0; i < 5 && i < hourData.length; i++) {
const hour = hourData[i];
const time = hour.time.split(' ')[1].substring(0, 5);
forecastItems[i].querySelector('.forecast-time').textContent = time;
forecastItems[i].querySelector('.forecast-temp').textContent = hour.temp + '°C';
forecastItems[i].querySelector('.forecast-desc').textContent = hour.wea;
}
}
// 更新生活指数
function updateIndices(indexData) {
const indexItems = document.querySelectorAll('.index-item');
// 遍历生活指数数据
indexData.forEach((item, index) => {
if (index < indexItems.length) {
const nameElement = document.createTextNode(item.name.replace('指数', '') + ' ');
const spanElement = document.createElement('span');
spanElement.textContent = item.level;
// 清空原有内容
indexItems[index].innerHTML = '';
// 添加新内容
indexItems[index].appendChild(nameElement);
indexItems[index].appendChild(spanElement);
}
});
}
</script>
</body>
</html>
孟菲斯风格天气HTML卡片源码
- 版权声明：本站原创文章，于2025-03-02，由卓越飞翔博客发表，共 21923个字。下载次
- 转载请注明：孟菲斯风格天气HTML卡片源码 - 卓越飞翔博客 +复制链接
相关推荐
标签：
| 留言与评论（共有 0 条评论） |