效果
![](https://i-blog.csdnimg.cn/blog_migrate/606d91b6e0958c140381deebd4abc394.png)
1.html页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>天气</title>
</head>
<body>
<div style="width: 120px;height: 120px;background-color: black;">
<div id="he-plugin-simple"></div>
</div>
</body>
</html>
<script src="./weatherTool.js"></script>
<script>
weather.weatherTool()
</script>
2.js
// 天气插件
window.WIDGET = {
CONFIG: {
modules: "02",
background: "4",
tmpColor: "FFFFFF",
tmpSize: "18",
cityColor: "FFFFFF",
citySize: "18",
aqiColor: "FFFFFF",
aqiSize: "18",
weatherIconSize: "24",
alertIconSize: "18",
padding: "10px 0px 10px 0px",
shadow: "1",
language: "zh",
borderRadius: "10",
fixed: "false",
vertical: "middle",
horizontal: "middle",
key: "8f0727ee21004600b2a5826ffc63a5f9"
}
};
let weather = {
weatherTool: function () {
var d = document;
var c = d.createElement("link");
c.rel = "stylesheet";
c.href =
"https://widget.heweather.net/simple/static/css/he-simple.css?v=1.4.0";
var s = d.createElement("script");
s.src = "https://widget.heweather.net/simple/static/js/he-simple.js?v=1.4.0";
var sn = d.getElementsByTagName("script")[0];
sn.parentNode.insertBefore(c, sn);
sn.parentNode.insertBefore(s, sn);
}
}