当前位置：首页 > news >正文

练习小项目7：天气状态切换器

news 2025/5/23 8:48:15

🧠 项目目标：

点击按钮切换不同天气状态，背景或图标随之变化。

✨ 功能描述：

显示当前天气（如：☀️ 晴天 / ☁️ 多云 / 🌧️ 雨天）
点击“切换天气”按钮，每点击一次切换到下一种天气
更换天气时，背景颜色或页面样式会变化

💡 技术点练习：

数组索引循环
DOM 文本和样式修改
classList 切换
对用户状态的可视反馈

页面结构（HTML 参考）：

<div class="container"><h2 id="weatherText">☀️ 晴天</h2><button id="changeBtn">切换天气</button>
</div>

实践代码如下：

JS:

const weatherText = document.getElementById('weatherText')
const changeBtn = document.getElementById('changeBtn')const weatherData = [{ icon: "☀️", text: "晴天", class: "sunny" },{ icon: "☁️", text: "多云", class: "cloudy" },{ icon: "🌧️", text: "雨天", class: "rainy" }
]let i = 0
const updateWeather = (index) => {// 更新文本weatherText.textContent = `${weatherData[index].icon} ${weatherData[index].text}`// 移除所有旧的 classweatherData.forEach(weather => {document.body.classList.remove(weather.class)})// 添加新的 classdocument.body.classList.add(weatherData[index].class)// 更新全局索引 ii = index
}
changeBtn.addEventListener('click', () => {// 每次调用时，传入下一个索引updateWeather((i + 1) % weatherData.length)
})// 初始设置
updateWeather(0)

CSS：

 body {transition: background-color 0.3s;font-family: sans-serif;text-align: center;padding-top: 50px;}.sunny {background-color: #ffe066;color: #333;}.cloudy {background-color: #d0d0d0;color: #333;}.rainy {background-color: #7f8fa6;color: white;}button {margin-top: 20px;padding: 10px 20px;}

页面效果展示：

额外知识记录：

✅ `(i + 1) % weatherData.length的理解`

这是循环索引的技巧：

i 是当前索引
加 1 后对总长度取余，可以在数组中循环切换，比如 0 → 1 → 2 → 0...

✅ 清空样式的方式

weatherData.forEach(weather => {document.body.classList.remove(weather.class)
})

虽然每次都移除所有 class，看起来“重复”，但这种方式：

简单清晰
不需要判断当前状态
性能上没问题（浏览器对 classList.remove 做了优化）

这是小项目中推荐使用的方式。

✅ 如果在 `updateWeather(index)` 函数里不加i=index会怎么样？

会导致 全局变量 i 不能正确更新当前显示的天气索引，从而影响下一次点击时计算的“下一个天气”。

具体表现是：

第一次点击按钮时，nextIndex = (i + 1) % weatherData.length，假设 i 是 0，nextIndex 就是 1。
调用 updateWeather(1) 显示了第2个天气，但如果没有 i = index，全局变量 i 依然是 0。
下一次点击时，nextIndex 还是 (0 + 1) % length，还是 1，页面显示的不会切换到第3个天气，永远停留在第2个。
也就是说，点击按钮后显示会切换，但内部“记录当前天气索引”的变量没有更新，导致后续点击计算下一状态出错，循环无法正常进行。