轻松自制全球天气查询网站使用这个API附源码

百度已收录   阅读次数: 93
2021-02-2522:54:20 发表评论
摘要

最近一段时间,伯衡君练习学习python不亦乐乎,而Javascript的练习学习稍微有些生疏,于是今天忙中偷闲,制作了一个全球天气查询的一个模板,使用了openweathermap这个网站的api,稍微恢复了一点之前的功力,伯衡君想了想,python和javascript还是同步进展吧,以免出现荒废……

轻松自制全球天气查询网站使用这个API附源码

开篇寄语

最近一段时间,伯衡君练习学习python不亦乐乎,而Javascript的练习学习稍微有些生疏,于是今天忙中偷闲,制作了一个全球天气查询的一个模板,使用了openweathermap这个网站的api,稍微恢复了一点之前的功力,伯衡君想了想,python和javascript还是同步进展吧,以免出现荒废。

源码地址

内容详情

闲话少说,直接上代码,基本上都不用改,只需要将js文件中第一行的key值从openweathermap这个网站替换一下就可以了。默认只支持英文城市或者国家查询哦。

  • Html
<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>Current Weather</title>
    <link href="css/face.css" rel="stylesheet">
    <link href="https://fonts.lug.ustc.edu.cn/css?family=Montserrat:400,900" rel="stylesheet">

</head>

<body>
    <span style="margin-right:20px">City Name:</span><input type="text" id="moe" value="" name="City Name">
    <button id="bj" onclick="myFunction()">Click Me</button>
    <div>
        <div id="description"></div>
        <h1 id="temp"></h1>
        <div id="location"></div>
    </div>
    <script src="js/javascript.js"></script>
</body>

</html>
  • CSS
body {
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    text-shadow: .1em .1em 0 rgba(0,0,0,0.3);
    font-size: 1.3em;
    height: 100vh;
    background-image: linear-gradient(to right top, #99bbcb, #a5c7d7, #b1d4e2, #bde0ee, #c9edfa);
}
input[type="text"]{
    margin-right:20px;
}
#bj {
    margin-right: 20px;
}
h1 {
    margin: 0 auto;
    font-size: 1.5em;
    text-align: center;
    color: #fff;
    font-size: 2em;
}
body.sunny {
    background-image: linear-gradient(to right top, #ff4e50, #ff713e, #ff932b, #ffb41d, #f9d423);
}
body.cloudy {
    background-image: linear-gradient(to right top, #63747c, #71858e, #7f96a0, #8da8b2, #9bbac5);
}
body.rainy {
    background-image: linear-gradient(to right top, #637c7b, #718e8c, #7ea09e, #8db2b0, #9bc5c3);
}
  • Javascript
const key = '在这里替换哦';//The key you can get in the https://openweathermap.org/
if (key == '') document.getElementById('temp').innerHTML = ('Remember to add your api key!');
function myFunction() { 
    var inputName = document.getElementById("moe").value;
    weatherBallon(inputName)
} 

function weatherBallon(inputName) {
    fetch('https://api.openweathermap.org/data/2.5/weather?q=' + inputName + '&appid=' + key)
        .then(function (resp) { return resp.json() }) // Convert data to json
        .then(function (data) {
            drawWeather(data);
        })
        .catch(function () {
            // catch any errors
        });
}

function drawWeather(d) {
    var celcius = Math.round(parseFloat(d.main.temp) - 273.15);
    var fahrenheit = Math.round(((parseFloat(d.main.temp) - 273.15) * 1.8) + 32);
    var description = d.weather[0].description;

    document.getElementById('description').innerHTML = description;
    document.getElementById('temp').innerHTML = celcius + '&deg;';
    document.getElementById('location').innerHTML = d.name;

    if (description.indexOf('rain') > 0) {
        document.body.className = 'rainy';
    } else if (description.indexOf('cloud') > 0) {
        document.body.className = 'cloudy';
    } else if (description.indexOf('sunny') > 0) {
        document.body.className = 'sunny';
    } else {
        document.body.className = 'clear';
    }
}

至于这个API,也就是Key值从哪里获取呢?

请点击这个网址:

轻松自制全球天气查询网站使用这个API附源码

注册后,进入后台,可以看到api字样,如下图所示。

轻松自制全球天气查询网站使用这个API附源码

复制粘贴到js文件中,第一行的key值即可,已经提示。

保存后,就可以打开网页,看到天气查询的信息了,输入城市名称就可以哦。

分享至:
  • 我的微信
  • 微信扫一扫加好友
  • weinxin
  • 我的微信公众号
  • 扫描关注公众号
  • weinxin

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: