网页中天气显示

starcpdk微信～

已于 2022-07-31 19:56:17 修改

阅读量1.7k

点赞数

分类专栏：前端文章标签： vue.js javascript 前端

于 2021-02-25 13:20:55 首次发布

本文链接：https://blog.csdn.net/weixin_44735933/article/details/114076329

版权

前端专栏收录该内容

41 篇文章 0 订阅

订阅专栏

我们常常会看到在网页中的导航栏处有一个天气的显示
在这里插入图片描述
这样的一个效果是通过一些第三方天气插件实现的 ,这里为大家讲解的是html实现和vue实现

这里的插件是从天气网插件找到的天气插件网

HTML实现

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="weather-v2-plugin-simple"></div>
    <script>
        WIDGET = {
            CONFIG: {
                "modules": "01234",
                "background": 1,
                "tmpColor": "FFFFFF",
                "tmpSize": 16,
                "cityColor": "FFFFFF",
                "citySize": 16,
                "aqiSize": 16,
                "weatherIconSize": 24,
                "alertIconSize": 18,
                "padding": "10px 10px 10px 10px",
                "shadow": "1",
                "language": "auto",
                "borderRadius": 5,
                "fixed": "false",
                "vertical": "middle",
                "horizontal": "center",
                "key": "GZKlqrzaXZ"
            }
        }
    </script>
    <script src="https://apip.weatherdt.com/simple/static/js/weather-simple-common.js?v=2.0"></script>
</body>

</html>

Vue实现

<template>
  <div>
	<div id="weather-v2-plugin-simple"></div>
  </div>
</template>

<script>
  export default {
    name: "Nav",
    data() {
      return {};
    },
    created() {

    },
    mounted() {
      // 天气插件
      window.WIDGET = {
        CONFIG: {
          modules: "01234",
          background: 1,
          tmpColor: "FFFFFF",
          tmpSize: 16,
          cityColor: "FFFFFF",
          citySize: 16,
          aqiSize: 16,
          weatherIconSize: 24,
          alertIconSize: 18,
          padding: "10px 10px 10px 10px",
          shadow: "1",
          language: "auto",
          borderRadius: 5,
          fixed: "false",
          vertical: "middle",
          horizontal: "center",
          key: "GZKlqrzaXZ"
        }
      };
      (function (d) {
        var c = d.createElement("link");
        c.rel = "stylesheet";
        c.href =
          "https://apip.weatherdt.com/simple/static/css/weather-simple.css?v=2.0";
        var s = d.createElement("script");
        s.src =
          "https://apip.weatherdt.com/simple/static/js/weather-simple.js?v=2.0";
        var sn = d.getElementsByTagName("script")[0];
        sn.parentNode.insertBefore(c, sn);
        sn.parentNode.insertBefore(s, sn);
      })(document);
    },
    methods: {
    }
  }
</script>

<style scoped>

</style>

除了这种方式还有就是可以使用iframe实现

<iframe width="500" height="40" frameborder="0" scrolling="no" hspace="0" src="https://i.tianqi.com/?c=code&a=getcode&id=40&icon=1"></iframe>

另外一个免费的天气插件网

https://widget.qweather.com/create-simple

starcpdk微信～

关注

0
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
网页中天气显示

我们常常会看到在网页中的导航栏处有一个天气的显示这样的一个效果是通过一些第三方天气插件实现的 ,这里为大家讲解的是html实现和vue实现这里的插件是从天气网插件找到的天气插件网HTML实现<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"&
复制链接

扫一扫