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

2021-02-2522:54:20 发表评论

摘要

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

分享至：

开篇寄语

源码地址

https://github.com/zhangboheng/Javascript-Practise-Easy-Examples
该地址中的api文件夹下面的weather文件夹内

内容详情

闲话少说，直接上代码，基本上都不用改，只需要将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.googleapis.com/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值从哪里获取呢？

请点击这个网址：