iT邦幫忙

2025 iThome 鐵人賽

DAY 17
0

「只有文字的顯示有點單調,今天我們加上天氣圖示。晴天就有太陽、雨天就有雨傘,用圖示讓資訊更直觀,也讓使用者一眼就知道天氣狀況,增加互動樂趣。」

內容重點

  • 從 OpenWeather 的 API 拿到 weather[0].icon
  • 顯示對應圖示,例如 http://openweathermap.org/img/wn/10d@2x.png

程式說明

document.getElementById("result").innerHTML = `
  <strong>${data.name}</strong><br>
  <img src="http://openweathermap.org/img/wn/${data.icon}@2x.png" alt="weather icon">
  🌡️ 溫度: ${data.temp}°C <br>
  ☁️ 天氣: ${data.description}
`;

  • 後端要在回傳 JSON 加入 icon
res.json({
  name: data.name,
  temp: data.main.temp,
  description: data.weather[0].description,
  icon: data.weather[0].icon
});


上一篇
Day16.前端小改造
系列文
AI × Web:生活魔法方程式17
圖片
  熱門推薦
圖片
{{ item.channelVendor }} | {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言