HTML、CSS和JavaScript实现简单天气预报

最新推荐文章于 2024-07-14 12:56:18 发布

槿花荣

最新推荐文章于 2024-07-14 12:56:18 发布

阅读量5.4k

点赞数 3

文章标签： javascript 前端 html vue.js

本文链接：https://blog.csdn.net/m0_63359528/article/details/130798242

版权

使用HTML、CSS和JavaScript实现简单天气预报的步骤：

首先需要获取天气API的数据，可以通过向第三方天气数据服务商发送HTTP请求来获取数据。例如，可以使用Yahoo Weather API或OpenWeatherMap API等。这里以OpenWeatherMap API为例，获取当前城市的天气情况。
接着，将获取到的天气数据动态地展示在HTML页面上。可以使用JavaScript的DOM操作方法，将获取到的数据渲染到页面上指定的位置。
最后，为了美化界面，可以使用CSS对整个天气预报页面进行样式设置。

下面是具体的代码实现：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>天气预报</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <div class="weather">
      <span class="city"></span>
      <span class="temp"></span>
      <span class="description"></span>
      <img class="icon"/>
    </div>

    <script src="main.js"></script>
  </body>
</html>

.weather {
  width: 300px;
  height: 150px;
  background-color: #eee;
  border-radius: 10px;
  text-align: center;
  margin: 50px auto;
  padding: 20px;
}

.city {
  font-size: 25px;
  font-weight: bold;
  display: block;
  margin-bottom: 15px;
}

.temp {
  font-size: 18px;
  font-weight: bold;
  display: block;
  margin-bottom: 10px;
}

.description {
  font-size: 16px;
  display: block;
  margin-bottom: 15px;
}

.icon {
  width: 50px;
  height: auto;
  margin-top: 10px;
}

let city = "北京"; // 获取天气的城市
let apiKey = "your_api_key"; // 替换为你自己的API Key

let url = `https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=${apiKey}&lang=zh_cn`;

fetch(url)
  .then(response => response.json())
  .then(data => {
    console.log(data);

    let cityName = data.name;
    let temperature = Math.round(data.main.temp - 273.15);
    let description = data.weather[0].description;
    let iconCode = data.weather[0].icon;

    document.querySelector(".city").textContent = cityName;
    document.querySelector(".temp").textContent = `${temperature}°C`;
    document.querySelector(".description").textContent = description;
    document.querySelector(".icon").setAttribute("src", `http://openweathermap.org/img/w/${iconCode}.png`);
  })
  .catch(err => {
    console.log(err);
  });

上面的代码中，先定义了要获取天气数据的城市和API Key，在JavaScript中使用fetch方法发送HTTP请求，获取数据后再使用DOM操作将数据渲染到HTML页面上对应的元素中。

如果使用Vue.js框架开发，则可以更加简便地实现天气预报功能，具体步骤如下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>天气预报</title>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.min.js"></script>
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <div id="app">
    <div class="weather">
      <span class="city">{{ city }}</span>
      <span class="temp">{{ temperature }}°C</span>
      <span class="description">{{ description }}</span>
      <img :src="iconUrl"/>
    </div>

var app = new Vue({
  el: '#app',
  data: {
    city: "北京",
    apiKey: "your_api_key",
    temperature: "",
    description: "",
    iconCode: ""
  },
  methods: {
    getWeatherData: function() {
      let url = `https://api.openweathermap.org/data/2.5/weather?q=${this.city}&appid=${this.apiKey}&lang=zh_cn`;

      fetch(url)
        .then(response => response.json())
        .then(data => {
          console.log(data);

          this.temperature = Math.round(data.main.temp - 273.15);
          this.description = data.weather[0].description;
          this.iconCode = data.weather[0].icon;
        })
        .catch(err => {
          console.log(err);
        });
    }
  },
  computed: {
    iconUrl: function() {
      return `http://openweathermap.org/img/w/${this.iconCode}.png`;
    }
  },
  mounted: function() {
    this.getWeatherData();
  }
});

在上面的代码中，我们使用了Vue.js的data属性来存储需要展示的数据和API Key信息。通过Vue.js的methods属性定义一个获取天气数据的方法，并通过computed属性计算图片地址，最后使用mounted属性在页面加载时自动调用获取天气数据的方法。

槿花荣

关注

3
点赞
踩
35

收藏

觉得还不错? 一键收藏
1
评论
HTML、CSS和JavaScript实现简单天气预报

首先需要获取天气API的数据，可以通过向第三方天气数据服务商发送HTTP请求来获取数据。上面的代码中，先定义了要获取天气数据的城市和API Key，在JavaScript中使用fetch方法发送HTTP请求，获取数据后再使用DOM操作将数据渲染到HTML页面上对应的元素中。接着，将获取到的天气数据动态地展示在HTML页面上。可以使用JavaScript的DOM操作方法，将获取到的数据渲染到页面上指定的位置。最后，为了美化界面，可以使用CSS对整个天气预报页面进行样式设置。
复制链接

扫一扫