162 lines
5.1 KiB
HTML
162 lines
5.1 KiB
HTML
<!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 {
|
|
background: #1e1e2e;
|
|
color: white;
|
|
font-family: Arial, sans-serif;
|
|
padding: 20px;
|
|
}
|
|
|
|
.controls {
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.control-btn {
|
|
padding: 10px 20px;
|
|
margin: 5px;
|
|
border: none;
|
|
border-radius: 5px;
|
|
background: #667eea;
|
|
color: white;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.control-btn.active {
|
|
background: #ff6b6b;
|
|
}
|
|
|
|
.weather-container {
|
|
display: flex;
|
|
gap: 20px;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.weather-card {
|
|
width: 200px;
|
|
height: 250px;
|
|
border-radius: 10px;
|
|
position: relative;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.weather-card.hidden {
|
|
opacity: 0;
|
|
transform: scale(0.8);
|
|
}
|
|
|
|
.weather-card.visible {
|
|
opacity: 1;
|
|
transform: scale(1);
|
|
}
|
|
|
|
.wind-card { background: linear-gradient(135deg, #74b9ff, #0984e3); }
|
|
.rain-card { background: linear-gradient(135deg, #636e72, #2d3436); }
|
|
.sun-card { background: linear-gradient(135deg, #fdcb6e, #e17055); }
|
|
.snow-card { background: linear-gradient(135deg, #a8e6cf, #74b9ff); }
|
|
|
|
.card-content {
|
|
position: absolute;
|
|
bottom: 20px;
|
|
left: 20px;
|
|
color: white;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<h1>测试天气卡片切换功能</h1>
|
|
|
|
<div class="controls">
|
|
<button class="control-btn active" data-weather="all">显示全部</button>
|
|
<button class="control-btn" data-weather="wind">风</button>
|
|
<button class="control-btn" data-weather="rain">雨</button>
|
|
<button class="control-btn" data-weather="sun">太阳</button>
|
|
<button class="control-btn" data-weather="snow">雪</button>
|
|
</div>
|
|
|
|
<div class="weather-container">
|
|
<div class="weather-card wind-card visible" data-type="wind">
|
|
<div class="card-content">
|
|
<div>风</div>
|
|
<div>微风轻拂</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="weather-card rain-card visible" data-type="rain">
|
|
<div class="card-content">
|
|
<div>雨</div>
|
|
<div>细雨绵绵</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="weather-card sun-card visible" data-type="sun">
|
|
<div class="card-content">
|
|
<div>太阳</div>
|
|
<div>阳光明媚</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="weather-card snow-card visible" data-type="snow">
|
|
<div class="card-content">
|
|
<div>雪</div>
|
|
<div>雪花飞舞</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
console.log('开始初始化...');
|
|
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
console.log('DOM加载完成');
|
|
|
|
const controlBtns = document.querySelectorAll('.control-btn');
|
|
console.log('找到按钮数量:', controlBtns.length);
|
|
|
|
controlBtns.forEach((btn, index) => {
|
|
console.log(`绑定按钮 ${index}:`, btn.textContent, btn.dataset.weather);
|
|
btn.addEventListener('click', (e) => {
|
|
console.log('按钮被点击:', e.target.textContent, e.target.dataset.weather);
|
|
|
|
const weather = e.target.dataset.weather;
|
|
showWeather(weather);
|
|
updateActiveButton(e.target);
|
|
});
|
|
});
|
|
});
|
|
|
|
function showWeather(weatherType) {
|
|
console.log('切换到天气类型:', weatherType);
|
|
|
|
const weatherCards = document.querySelectorAll('.weather-card');
|
|
|
|
weatherCards.forEach(card => {
|
|
const cardType = card.dataset.type;
|
|
console.log('处理卡片:', cardType);
|
|
|
|
if (weatherType === 'all') {
|
|
card.classList.remove('hidden');
|
|
card.classList.add('visible');
|
|
} else if (cardType === weatherType) {
|
|
card.classList.remove('hidden');
|
|
card.classList.add('visible');
|
|
} else {
|
|
card.classList.add('hidden');
|
|
card.classList.remove('visible');
|
|
}
|
|
});
|
|
}
|
|
|
|
function updateActiveButton(activeBtn) {
|
|
const controlBtns = document.querySelectorAll('.control-btn');
|
|
controlBtns.forEach(btn => btn.classList.remove('active'));
|
|
activeBtn.classList.add('active');
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|