定制开发小程序前端毕业设计天气预报-巴掌软件-高性价比的软件定制开发解决方案

定制开发小程序页面的设计与实现

许泓涛

摘要：

天气预报（测）或气象预报（测）定制开发小程序是使用现代科学技术对定制开发小程序未来某一地点定制开发小程序地球大气层定制开发小程序的状态进行预测。定制开发小程序从史前人类就已经开始定制开发小程序对天气进行预测来相应定制开发小程序地安排其工作与生活（定制开发小程序比如农业生产、定制开发小程序军事行动等等）。定制开发小程序今天的天气预报主要是定制开发小程序使用收集大量的数据（气温、湿度、定制开发小程序风向和风速、气压等等），定制开发小程序然后使用目前对大气过程的认识（气象学）定制开发小程序来确定未来空气变化。定制开发小程序利用互联网技术展现在人们面前，定制开发小程序让人们看的懂，定制开发小程序有利于人们的出行安排。

关键词：计算机 html API JavaScript CSS 网络

目录

定制开发小程序随着社会的发展与进步，定制开发小程序智能手机的普及，定制开发小程序人们在电视上面观看天定制开发小程序气预报的越来越少了，定制开发小程序大部分人都是在出门之定制开发小程序前观看天气预报，定制开发小程序然而电视里面的天气预定制开发小程序报只能在规定的时间内观看，不方便人们的出行，也不方便观看目的地的实时天气。在计算机飞速发展的时代，使用网页观看实时天气成了一种趋势。

本设计研究是关于一个天气预报的设计与功能实现，主要目的是方便人们知道未来三天的天气情况，可实现实时定位与输入城市查询天气情况。会根据自己的选择提供查询地区的实时温度，天气情况，风向风速，紫外线，相对湿度，大气压，降水量，能见度。还有空气相关的空气质量以及相关提示，和一些生活建议，比如舒适度，洗车指数，运动指数等等。

对于广大群众来说，出行看天气已经成为了必要条件，提前知道天气，可以更好的把握计划，不会因为没看天气预报改变自己的计划。为了方便人们的出行，为了，方便更有力的知道实时天气情况，所以就有了此设计。

方便人们知道实时天气情况，不需要蹲点观看天气预报，实时了解目的地天气情况，防止天气预报的时效性。避免一些突发的天气情况，还可以里了解未来三天的天气情况，并给出当前天的生活建议，使人们清楚当前天气可以干些什么是比较好的，可以避免一些事情的发生。

系统分析

开发任何东西都需要时间和资源，还要考虑一些条件因素。所以在这之前要有一些准备工作和计划。合理的利用时间和资源避免一些风险和一些不必要的麻烦。

此设计采用的开发工具是现在比较流行的Visual Studio Code开发工具，该工具内涵一些插件可以快速生成一些代码，提高了开发的效率。天气预报可定需要一些接口类的东西，这些接口是根据和风天气所提供的API进行开发。

页面的干净整洁，看上去美观
操作简单方便，快捷
自动获取当前位置，显示当前天气情况
可以实现根据天气提出生活建议
可以观察实时空气质量
可以观察未来三天天气情况

Visual Studio Code
百度地图API
和风天气API

Visual Studio Code项目开发

简介

Visual Studio Code（简称“VS Code” ）是Microsoft在2015年4月30日开发者大会上正式宣布一个运行于、和之上的，针对于编写现代和的跨平台，可在桌面上运行，并且可用于，和。它具有对，和的内置支持，并具有丰富的其他语言（例如，，，，，）和运行时（例如和）扩展的。

1、跨平台

它是免费的，开放源代码和跨平台的编辑器，可在Windows，Linux和上运行，因此无论您的设备所基于的平台如何，您都可以工作。

2、支持多种编程语言

当您访问Visual Studio Code网站时，您很快就会意识到它支持几乎所有主要的编程语言。它支持Python，Java，HTML，CSS，Type，C++，Java，PHP，Go，C#，PHP，SQL，Ruby，Objective-C等。

3、您可以更改所选文件的语言

它支持默认语言，具体取决于您的文件，但您也可以更改语言模式。为此，请单击状态栏右侧的语言指示器，这将打开“更改语言模式”下拉菜单。在这里，您可以为当前文件选择不同的语言。

4、提供特定语言的文档

它的网站包含特定于Visual Studio Code支持的通用语言的文档。其中一些是C++，C#，CSS，Go，Python，PHP，Java等。

5、调试

VSC带有内置调试器，这也是其主要功能之一。它有助于加速任何程序员的编辑，编译和调试循环。但是，默认情况下，它仅带有支持NodeJS的调试器，该调试器可以调试任何转译为Java的内容，但同样，您可以将扩展名用于其他运行时。

6、内置Git集成

Visual Studio Code通过提供完整的Git集成使程序员更进一步，使程序员无需离开编辑器即可立即查看更改。您可以在侧栏的左侧找到Git图标，在其中可以对其进行初始化，并可以执行若干Git命令，例如pull，push，publish和其他命令。此外，VSC还可以与多个Git存储库一起使用，无论是本地的还是远程的。

7、智能感知

程序员使用此功能来实现智能代码完成，参数信息，内容辅助，快速信息和代码提示。VSC为Java，CSS，HTML，Type，JSON，Sass和Less编程语言提供了IntelliSense。对于其他语言，我们可以通过添加其扩展名来使用IntelliSense。

8、命令面板

按下Ctrl + Shift + P 命令会显示命令面板，使您可以从键盘访问VS Code。它允许您访问VS Code的所有功能，包括所有关键字快捷方式。此外，此选板还允许访问许多命令。

9、代码管理功能

Visual Studio代码还提供了代码管理功能，例如转到定义，查看定义，查找所有引用并重命名符号。通过右键单击代码文件，可以在VSC中轻松找到这些功能。

计算机编程语言

1、。JavaScript是一种解释型的脚本语言，C、等语言先后执行，而JavaScript是在程序的运行过程中逐行进行解释。

2、基于对象。JavaScript是一种基于对象的脚本语言，它不仅可以创建对象，也能使用现有的对象。

3、简单。JavaScript语言中采用的是弱类型的变量类型，对使用的数据类型未做出严格的要求，是基于Java基本语句和控制的脚本语言，其设计简单紧凑。

4、动态性。JavaScript是一种采用事件驱动的脚本语言，它不需要经过Web服务器就可以对用户的输入做出响应。在访问一个网页时，鼠标在网页中进行鼠标点击或上下移、窗口移动等操作JavaScript都可直接对这些事件给出相应的响应。

5、跨平台性。JavaScript脚本语言不依赖于操作系统，仅需要浏览器的支持。因此一个JavaScript脚本在编写后可以带到任意机器上使用，前提是机器上的浏览器支持JavaScript脚本语言，JavaScript已被大多数的浏览器所支持。

6 不同于服务器端脚本语言，例如与，JavaScript主要被作为客户端脚本语言在用户的浏览器上运行，不需要服务器的支持。所以在早期程序员比较青睐于JavaScript以减少对服务器的负担，而与此同时也带来另一个问题，安全性。

安装谷歌浏览器和Visual Studio Code 不需要太复杂的过程，然后在Visual Studio Code内置里安装一个插件open in browser 即可，方便快速在浏览器当中打开（快捷键Alt + B ）。

进来页面显示所在城市实时天气预报，以及未来两天天气情况，点击显示日期区域即可获取未来天气情况，效果图如下。

首先要把样式写好，再去调用百度地图API和和风天气API进行获取当前地区天气情况。利用了基础的div li h2 span等元素标签进行整体布局，主要利用CSS3 float浮动布局与基础的属性进行样式展现。

具体页面布局如下：


<div class="container">
 
    <div class="search_box">
 
        <input type="text" placeholder="请输入城市">
 
        <button>获取</button>
 
    </div>
 
    <h2>当前城市</h2>
 
    <div class="header clearfix">
 
        <ul>
 
            <li class="active">今天</li>
 
            <li>明天</li>
 
            <li>后天</li>
 
        </ul>
 
    </div>
 
    <div class="w clearfix">
 
        <img src="icons/100.png" alt="" class="Weather" data-title="iconDay">
 
        <span class="DEG" data-title="tempMin">23°</span>
 
        <span class="weather" data-title="textDay">晴天</span>
 
    </div>
 
    <div class="co">
 
        <div class="content">
 
            <ul class="clearfix">
 
                <li class="clearfix">
 
                    <img src="images/fx.png" alt="">
 
                    <div class="text">
 
                         <span data-title="windScaleDay" data-text="级">
 
n-m级
 
</span>
 
                         <span class="WDIR" data-title="windDirDay">
 
西北风
 
</span>
 
                    </div>
 
                </li>
 
                <li class="clearfix">
 
                    <img src="images/uv.png" alt="">
 
                    <div class="text">
 
                        <span data-title="uvIndex" data-text=" ">10</span>
 
                        <span class="">紫外线</span>
 
                    </div>
 
                </li>
 
                <li class="clearfix">
 
                    <img src="images/hum.png" alt="">
 
                    <div class="text">
 
                        <span data-title="humidity" data-text="%">10</span>
 
                        <span class="">相对湿度</span>
 
                    </div>
 
                </li>
 
                <li class="clearfix">
 
                    <img src="images/pressure.png" alt="">
 
                    <div class="text">
 
                        <span data-title="pressure" data-text="hPa">10</span>
 
                        <span class="">大气压</span>
 
                    </div>
 
                </li>
 
                <li class="clearfix">
 
                    <img src="images/pcpn.png" alt="">
 
                    <div class="text">
 
                        <span data-title="precip" data-text="mm">10</span>
 
                        <span class="">降水量</span>
 
                    </div>
 
                </li>
 
                <li class="clearfix">
 
                    <img src="images/vis.png" alt="">
 
                    <div class="text">
 
                        <span data-title="vis" data-text="KM">10</span>
 
                        <span class="">能见度</span>
 
                    </div>
 
                </li>
 
            </ul>
 
        </div>
 
    </div>
 
</div>

CSS样式代码如下：


/*显示内容*/
 
.search_box {
 
    width: 400px;
 
    margin: 0 auto;
 
}
 
 
 
/*输入框*/
 
input {
 
    padding-left: 5px;
 
    height: 30px;
 
    width: 225px;
 
    border: none;
 
    color: rgba(40, 41, 44, 0.8);
 
    outline: none;
 
    border-radius: 18px;
 
    background-color: #FFFFFF;
 
    padding: 4px 0 4px 14px;
 
    margin: 50px 0 50px 50px;
 
}
 
 
 
button {
 
    text-decoration: none;
 
    width: 70px;
 
    background-color: rgba(255, 255, 255, .1);
 
    height: 30px;
 
    margin-left: 10px;
 
    text-align: center;
 
    color: white;
 
    text-transform: uppercase;
 
    border-radius: 50px;
 
    cursor: pointer;
 
}
 
 
 
/*天气情况及温度显示*/
 
.w {
 
    width: 176px;
 
    color: #fff;
 
    margin: 0 auto;
 
    margin-bottom: 20px;
 
}
 
 
 
.w img {
 
    float: left;
 
    width: 108px;
 
    height: 108px;
 
}
 
 
 
/*度数显示*/
 
.w .DEG {
 
    float: left;
 
    padding-top: 17px;
 
    font-size: 48px;
 
    line-height: 1;
 
font-weight: 300;
 
    width: 65px;
 
}
 
 
 
/*天气状况*/
 
.w .weather {
 
    font-size: 18px;
 
    line-height: 24px;
 
}
 
 
 
/*近三天*/
 
.header {
 
    width: 616px;
 
    margin: 0 auto;
 
    border-radius: 22px;
 
}
 
 
 
.header li {
 
    float: left;
 
    width: 192px;
 
    height: 50px;
 
    text-align: center;
 
    border-radius: 22px;
 
    line-height: 50px;
 
    margin-left: 10px;
 
    color: black;
 
    cursor: pointer;
 
    background-color: #EFF1F7;
 
}
 
 
 
.header li:hover,
 
.header .active {
 
    background-color: rgba(102, 134, 253, 0.9);
 
    color: #fff;
 
}
 
 
 
/*显示内容--湿度--压强*/
 
.content {
 
    height: 32px;
 
    background-color: rgba(0, 0, 0, 0.7);
 
    line-height: 20px;
 
    padding: 24px 0;
 
    border-radius: 12px;
 
    width: 800px;
 
    margin: 0 auto;
 
}
 
 
 
.content>ul>li {
 
    float: left;
 
    margin-left: 30px;
 
    position: relative;
 
}
 
 
 
.content>ul>li>img {
 
    position: relative;
 
    top: -3px;
 
    width: 36px;
 
    height: 36px;
 
    margin-right: 8px;
 
    float: left;
 
}
 
 
 
.content>ul>li>.text {
 
    float: left;
 
    color: #fff;
 
}
 
 
 
.text span:first-child {
 
    display: block;
 
    font-size: 18px;
 
    line-height: 14px;
 
}
 
 
 
.content>ul>li span:nth-child(2) {
 
    margin-top: 5px;
 
    font-size: 14px;
 
}
 
 
 
.banner {
 
    overflow: hidden;
 
 
 
    background: url(../images/bg.png) 0% 0% / 100% 100% no-repeat;
 
    /* height: 694px; */
 
    height: 92vh;
 
    position: relative;
 
}

上面这些只能展现出最原始的样式，并没有真实的数据进行填充，效果图如下：

首先要获取到当前页面需要的元素。


var btn = document.querySelector("button");
 
var ipt = document.querySelector("input");
 
var h2 = document.querySelector(".banner h2");
 
var Weather = document.querySelector(".Weather");
 
var weather = document.querySelector(".weather");
 
var dge = document.querySelector('.DEG');
 
var lis = document.querySelectorAll(".header li");
 
var spans = document.querySelectorAll(".content .text span:first-child");
 
var wdir = document.querySelector(".WDIR");
 
var banner = document.querySelector('.banner');

要想获得当前城市天气情况就要获取当前城市，这里借助百度地图API提供的方法获取当前定位。代码如下：


var geolocation = new BMap.Geolocation();
 
geolocation.getCurrentPosition(function (r) {
 
    if (this.getStatus() == BMAP_STATUS_SUCCESS) {
 
        mk = new BMap.Marker(r.point);
 
        getAddress(r.point);
 
    } else {
 
        alert('failed' + this.getStatus());
 
    }
 
});
 
 
 
function getAddress(point) {
 
    var gc = new BMap.Geocoder();
 
    gc.getLocation(point, function (rs) {
 
        console.log(rs);
 
        var addComp = rs.addressComponents;
 
        find(addComp.city); // 这里是调用了自己写的方法
 
    });
 
}

打开页面就进行调用此方法，就能获取当前定位信息。然后进行调用自己写的方法，去进行获取当前地区天气情况。这里需要自行申请和风天气的KEY，以下需要KEY的地方用“你的KEY”代替。

由于获取当前城市天气情况需要利用当前城市id去获取，所以要先调用获取当前城市id的方法。


function find(value) {
 
    var xhr = new XMLHttpRequest();
 
    xhr.open("get", "https://geoapi.qweather.com/v2/city/lookup?location=" + value + "&key=你的KEY");
 
    xhr.send();
 
    xhr.onreadystatechange = function () {
 
        if (xhr.readyState == 4) {
 
            var json = JSON.parse(xhr.responseText);
 
            var locationId = json.location[0].id;
 
            searchWeather(locationId);// 这里是获取城市天气的方法
 
            h2.innerText = "当前城市" + json.location[0].name;
 
        }
 
    }
 
}

获取到当前城市就要显示在页面当中，首先要获取到要展示的地方，然后利用innerText 把获取的城市名称拼接起来，展示在页面当中。

h2.innerText = "当前城市" + json.location[0].name;

自动获取完当前地区，然后要获取天气情况，把城市id传到获取天气情况的方法当中，利用城市id获取当前城市未来天气情况：


function searchWeather(id) {
 
    var xhr = new XMLHttpRequest();
 
    xhr.open("get", "https://devapi.qweather.com/v7/weather/3d?location="
 
     + id + "&key=你的KEY");
 
    xhr.send();
 
    xhr.onreadystatechange = function () {
 
        if (xhr.readyState == 4) {
 
            var data = JSON.parse(xhr.responseText);
 
            console.log(data, "data");
 
        }
 
    }
 
}

由于获取到的是数组，所以要去循坏调用，并在第一次调用方法的时候，把数组下标为0的数据回显到页面，进行渲染展示当天的天气情况。具体代码如下：


for (var i = 0; i < spans.length; i++) {
 
    var key = spans[i].getAttribute("data-title");
 
    var units = spans[i].getAttribute('data-text');
 
    spans[i].innerText = data.daily[0][key] + units;
 
    weather.innerText = data.daily[0][weather.getAttribute("data-title")];
 
    dge.innerText = data.daily[0][dge.getAttribute("data-title")] + '°';
 
    Weather.setAttribute("src", "icons/" + data.daily[0].iconDay + ".png");
 
    wdir.innerText = data.daily[0].windDirDay;
 
}

然后为每一个日期区域添加点击事件，点击的时候下面就显示当前日期的天气情况。具体代码如下：


for (var i = 0; i < lis.length; i++) {
 
    lis[i].innerText = data.daily[i].fxDate;
 
    lis[i].index = i;
 
    lis[i].addEventListener('click', f1);
 
    function f1() {
 
        console.log(data.daily);
 
        for (var i = 0; i < spans.length; i++) {
 
            var key = spans[i].getAttribute("data-title");
 
            var units = spans[i].getAttribute('data-text');
 
            spans[i].innerText = data.daily[this.index][key] + units;
 
            weather.innerText =
 
            data.daily[this.index][weather.getAttribute("data-title")];
 
            dge.innerText =
 
            data.daily[this.index][dge.getAttribute("data-title")] + '°';
 
            Weather.setAttribute("src",
 
            "icons/" + data.daily[this.index].iconDay + ".png");
 
        }
 
        wdir.innerText = data.daily[this.index].windDirDay;
 
        document.querySelector('.active').className = '';
 
        this.className = 'active';
 
    }
 
}

然后就可以点击日期，显示区域就能显示对应日期的天气情况了。当然，不仅仅可以查询当地天气情况，也可以自己输入地区查询。

例如：如图输入框内输入了黄岛地区，点击查询就可以获取黄岛地区天气情况。

首先要获取到输入的地区名称，点击获取按钮，先去获取输入地址的id，根据查询的id去获取输入地区的天气情况，然后在进行回显。步骤方法和上面一致，多了一个点击按钮。按钮事件如下：


btn.onclick = function () {
 
    document.querySelector('.active').className = '';
 
    lis[0].className = 'active';
 
    find(ipt.value)
 
}

然后就可以输入你想查询的地区了。

此页面用来获取地区相关指数，包括运动指数，洗车指数，穿衣指数，钓鱼指数，紫外线指数，旅游指数，过敏指数，舒适度指数等等。

利用了基础的div li h2 span等元素标签进行整体布局，主要利用CSS3 float浮动布局与基础的属性进行样式展现。布局代码如下：


  <div class="box container">
 
                <div class="GML container">
 
                    <i>
 
                        <img src="images/addr.png" alt="">
 
                    </i>
 
                    <span class="dart">北京市，北京市，中国</span>
 
                    <span class="time">08:24更新</span>
 
                </div>
 
                <div class="ipt container">
 
                    <input type="text" placeholder="请输入您想要查询的城市" id="city">
 
                    <input type="text" placeholder="请输入要查询的内容(数字)" id="matter">
 
                    <button>查询</button>
 
                    <div class="hint">
 
                        <i>?</i>
 
                        <ul class="hint_cont">
 
                            <li><span>1</span>----运动指数</li>
 
                            <li><span>2</span>----洗车指数</li>
 
                            <li><span>3</span>----穿衣指数</li>
 
                            <li><span>4</span>----钓鱼指数</li>
 
                            <li><span>5</span>----紫外线指数</li>
 
                            <li><span>6</span>----旅游指数</li>
 
                            <li><span>7</span>----过敏指数</li>
 
                            <li><span>8</span>----舒适度指数</li>
 
                            <li><span>9</span>----感冒指数</li>
 
                            <li><span>10</span>---空气污染扩散条件指数</li>
 
                            <li><span>11</span>----空调开启指数</li>
 
                            <li><span>12</span>----太阳镜指数</li>
 
                            <li><span>13</span>----化妆指数</li>
 
                            <li><span>14</span>----化妆指数</li>
 
                            <li><span>15</span>----交通指数</li>
 
                            <li><span>16</span>----防晒指数</li>
 
                        </ul>
 
                    </div>
 
                </div>
 
                <div class="content container">
 
                    <div class="top_cont">
 
                        <div class="info">
 
                            <span class="fit">不适宜</span>
 
                            <span data-title="name" class="thing">运动</span>
 
                        </div>
 
                    </div>
 
                    <dl class="bot_cont">
 
                        <dt>温馨提示</dt>
 
                        <dd>紫外线太强了，不宜长时间在户外运动。</dd>
 
                    </dl>
 
                </div>
 
            </div>

CSS样式代码如下：


.banner input {
 
    border: 1px solid #ccc;
 
    padding: 7px 0px;
 
    border-radius: 3px;
 
    padding-left: 5px;
 
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
 
    transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s
 
}
 
 
 
.banner input:focus {
 
    border-color: #66afe9;
 
    outline: 0;
 
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, .6);
 
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, .6)
 
}
 
 
 
input {
 
    margin-top: 21px;
 
}
 
 
 
button {
 
    text-decoration: none;
 
    width: 70px;
 
    background-color: rgba(255, 255, 255, .1);
 
    height: 30px;
 
    margin-left: 10px;
 
    text-align: center;
 
    color: white;
 
    text-transform: uppercase;
 
    border-radius: 50px;
 
    cursor: pointer;
 
}
 
 
 
.ipt .hint {
 
    display: inline-block;
 
    position: relative;
 
}
 
 
 
.ipt .hint i {
 
    display: inline-block;
 
    text-align: center;
 
    width: 15px;
 
    cursor: pointer;
 
    height: 15px;
 
    border-radius: 10px;
 
    font-size: 12px;
 
    background-color: #00a0e9;
 
}
 
 
 
.ipt .hint .hint_cont {
 
    display: none;
 
    position: absolute;
 
    width: 200px;
 
    background-color: rgba(255, 255, 255, .8);
 
}
 
 
 
.ipt .hint:hover .hint_cont {
 
    display: block;
 
}
 
 
 
.content {
 
    color: rgb(255, 255, 255);
 
    text-align: center;
 
}
 
 
 
.content .top_cont {
 
    width: 300px;
 
    height: 300px;
 
    margin: 60px auto 0 auto;
 
    padding: 35px;
 
    border-radius: 185px;
 
    background: rgba(0, 0, 0, .15);
 
}
 
 
 
.content .top_cont .info {
 
    width: 300px;
 
    height: 300px;
 
    border-radius: 150px;
 
    background: rgba(0, 0, 0, .1);
 
}
 
 
 
.content .top_cont .info span {
 
    display: block;
 
    font-size: 50px;
 
    font-style: normal;
 
}
 
 
 
.content .top_cont .info .fit {
 
    padding: 66px 0 30px 0;
 
    font-size: 74px;
 
}
 
 
 
.content .bot_cont dt {
 
    margin: 40px 0 20px 0;
 
    font-size: 25px;
 
}
 
 
 
.content .bot_cont dd {
 
    font-size: 22px;
 
}
 
 
 
.banner .links {
 
    position: absolute;
 
    right: -200px;
 
    top: 0;
 
    height: 100%;
 
    width: 200px;
 
    padding: 90px 15px 0 15px;
 
    background: rgba(0, 0, 0, .7);
 
    z-index: 2;
 
    text-align: left;
 
    text-align: center;
 
    transition: all .7s
 
}
 
 
 
.banner .links h2 {
 
    color: #fff;
 
}
 
 
 
.banner .links a {
 
    display: block;
 
    margin-top: 30px;
 
    padding: 10px 0;
 
    width: 100%;
 
    font-size: 14px;
 
    color: #fff;
 
}
 
 
 
.banner .links li:hover {
 
    background: rgba(0, 0, 0, .4);
 
}
 
 
 
.banner .rests:hover .links {
 
    right: 0;
 
}
 
 
 
.banner .GML {
 
    position: absolute;
 
    /*right: 250px;*/
 
    top: 35px;
 
    text-align: right;
 
    font-size: 20px;
 
    color: #fff;
 
}
 
 
 
.banner .GML i,
 
.banner .GML .dart,
 
.banner .GML .time {
 
    display: block;
 
    margin: 0 0 20px 0;
 
    font-style: normal;
 
}
 
 
 
.banner .box {
 
    position: relative;
 
}

输入城市和想要获取的相关指数，就可以在下面显示相关提示，以及是否可以去做一些事情的建议。如果不输入查询指数的数据，默认查询运动指数。JavaScript代码如下：


var btn = document.querySelector("button");
 
var city = document.querySelector("#city");
 
var dart = document.querySelector(".dart");
 
var matter = document.querySelector('#matter');
 
var dd = document.querySelector('dd');
 
var fit = document.querySelector('.fit');
 
var thing = document.querySelector('.thing');
 
var time = document.querySelector('.time');
 
 
 
function find(value) {
 
    console.log(111);
 
    var xhr = new XMLHttpRequest();
 
    xhr.open("get", "https://geoapi.qweather.com/v2/city/lookup?location=" + value + "&key=bc89ee9752c9420a90ef784b04ff328e");
 
    xhr.send();
 
    xhr.onreadystatechange = function () {
 
        if (xhr.readyState == 4) {
 
            var json = JSON.parse(xhr.responseText);
 
            var locationId = json.location[0].id;
 
            searchWeather(locationId);
 
            dart.innerText = "当前城市" + json.location[0].name;
 
        }
 
    }
 
}
 
btn.onclick = function () {
 
    find(city.value);
 
}
 
 
 
function searchWeather(id) {
 
    var xhr = new XMLHttpRequest();
 
    console.log(matter.value, "matter.value");
 
    if (matter.value != "") {
 
        xhr.open("get", "https://devapi.qweather.com/v7/indices/1d?type=" + matter.value + "&location=" + id + "&key=你的KEY");
 
        xhr.send();
 
        xhr.onreadystatechange = function () {
 
            if (xhr.readyState == 4) {
 
                var data = JSON.parse(xhr.responseText).daily;
 
                if (data[0].name.length >= 6) {
 
                    thing.style.fontSize = 30 + 'px';
 
                } else {
 
                    thing.style.fontSize = 50 + 'px';
 
                }
 
                dd.innerText = data[0].text;
 
                fit.innerText = data[0].category;
 
                thing.innerText = data[0].name;
 
                time.innerText = data[0].date;
 
            }
 
        }
 
    } else {
 
        xhr.open("get", "https://devapi.qweather.com/v7/indices/1d?type=1" + "&location=" + id + "&key=你的KEY");
 
        xhr.send();
 
        xhr.onreadystatechange = function () {
 
            if (xhr.readyState == 4) {
 
                var data = JSON.parse(xhr.responseText).daily;
 
                if (data[0].name.length >= 6) {
 
                    thing.style.fontSize = 30 + 'px';
 
                } else {
 
                    thing.style.fontSize = 50 + 'px';
 
                }
 
                dd.innerText = data[0].text;
 
                fit.innerText = data[0].category;
 
                thing.innerText = data[0].name;
 
                time.innerText = data[0].date;
 
            }
 
        }
 
    }
 
}
 
/* 菏泽职业学院19级计算机三班 */

输入想查询指数必须是数字。把鼠标放在“？”就会自动显示。

获取空气质量代码如下，可以根据空气质量来控制文字的颜色变化，背景图也可以根据实施情况进行变化。（图少，放的这几张）

以及空气质量的优缺点和建议。


function searchWeather(id) {
 
    var xhr = new XMLHttpRequest();
 
    xhr.open("get", "https://devapi.qweather.com/v7/air/now?location=" + id + "&key=你的KEY");
 
    xhr.send();
 
    xhr.onreadystatechange = function () {
 
        if (xhr.readyState == 4) {
 
            var data = JSON.parse(xhr.responseText).now;
 
            time.innerText = data.pubTime.substring(0, 10);
 
            var i = data.aqi;
 
            console.log(i)
 
            if (i >= 0 && i <= 50) {
 
                fit.style.color = 'green';
 
                dd.innerText = "空气质量令人满意,基本无空气污";
 
                dt.innerText = "各类人群可正常活动";
 
            } else if (i > 50 && i <= 100) {
 
                fit.style.color = 'yellow';
 
                dd.innerText = "空气质量可接受,但某些污染物可能对极少数异常敏感人群健康有较弱影响";
 
                dt.innerText = "极少数异常敏感人群应减少户外活动";
 
            } else if (i > 100 && i <= 150) {
 
                fit.style.color = 'orange';
 
                dd.innerText = "易感人群症状有轻度加剧,健康人群出现刺激症状";
 
                dt.innerText = "儿童、老年人及心脏病、呼吸系统疾病患者应减少长时间、高强度的户外锻炼";
 
                banner.style.background = 'url(images/9.png) 0% 0% / 100% 100% no-repeat';
 
            } else if (i > 150 && i <= 200) {
 
                fit.style.color = 'red';
 
                dd.innerText = "进一步加剧易感人群症状,可能对健康人群心脏、呼吸系统有影响";
 
                dt.innerText = "疾病患者避免长时间、高强度的户外锻练，一般人群适量减少户外运动";
 
 
 
            } else if (i > 200 && i <= 300) {
 
                fit.style.color = 'purple';
 
                dd.innerText = "心脏病和肺病患者症状显著加剧,运动耐受力降低，健康人群普遍出现症状";
 
                dt.innerText = "|儿童、老年人和心脏病、肺病患者应停留在室内，停止户外运动,一般人群减少户外运动";
 
            } else if (i > 300) {
 
                fit.style.color = 'brown';
 
                dd.innerText = "健康人群运动耐受力降低,有明显强烈症状，提前出现某些疾病";
 
                dt.innerText = "儿童、老年人和病人应当留在室内，避免体力消耗，一般人群应避免户外活动";
 
            }
 
            fit.innerText = data.category;
 
        }
 
    }
 
}

禁止商用，仅可学术讨论。

定制开发小程序前端毕业设计 天气预报

简介

定制开发小程序前端毕业设计天气预报