HTML5天气应用开发教程分享

  
  
  
  


  

    
    查询
    

  
  

const API_KEY = '你的API密钥';
const BASE_URL = 'https://api.openweathermap.org/data/2.5/weather';

document.getElementById('search-btn').addEventListener('click', () => {
  const city = document.getElementById('city-input').value;
  if (!city) return alert('请输入城市名称');

  fetch(`${BASE_URL}?q=${city}&appid=${API_KEY}&units=metric&lang=zh_cn`)
    .then(res => res.json())
    .then(data => {
      if (data.cod !== 200) {
        alert('城市未找到');
        return;
      }
      displayWeather(data);
    })
    .catch(err => {
      console.error('请求失败:', err);
      alert('网络错误');
    });
});

function displayWeather(data) {
  const resultDiv = document.getElementById('weather-result');
  const temp = Math.round(data.main.temp);
  const desc = data.weather[0].description;
  const icon = `https://openweathermap.org/img/wn/${data.weather[0].icon}@2x.png`;
  const humidity = data.main.humidity;
  const wind = data.wind.speed;

  resultDiv.innerHTML = `
    
${data.name} 天气
    
    
${temp}°C
    
${desc}
    
湿度：${humidity}%
    
风速：${wind} m/s
  `;
}

if (navigator.geolocation) {
  navigator.geolocation.getCurrentPosition(pos => {
    const { latitude, longitude } = pos.coords;
    fetch(`${BASE_URL}?lat=${latitude}&lon=${longitude}&appid=${API_KEY}&units=metric`)
      .then(res => res.json())
      .then(data => displayWeather(data));
  });
}