在你的网页中插入天气预报(附代码)

cancan2022年06月09日技术教程590

现在有很多天气网站提供了免费或收费的api,如果每日访问量不高的话可以选择免费的,下面便是使用和风天气的api制作的一个显示当前地区当前时间的天气的网页,当然如果需要天气预报等也只需要从获取的json数组里提取就是了。

上图一张:

QQ图片20220609190613.png



完整代码下载及演示链接:https://codepen.io/yinyoupoet/pen/PjgWWa

界面比较简陋,重点只在于后台获取当前位置与当前天气。


获取当前经纬度代码如下:

if(navigator.geolocation){
        navigator.geolocation.getCurrentPosition(function(position){
            lat = position.coords.latitude;     //维度
            lon = position.coords.longitude;    //经度
            });
     }



根据经纬度获取当前天气代码如下,免费注册后会获得一个免费的key,json格式请见官网。

var para = "https://free-api.heweather.com/v5/weather?city="+lon+","+lat+"&key=53153e2fed574ce19f5c089a1aacede0";
            console.log(para);
            $.getJSON(para,function(json){
                var city= json["HeWeather5"][0]["basic"]["city"];                var cnty= json["HeWeather5"][0]["basic"]["cnty"];                var weatherNow = json["HeWeather5"][0]["now"]["cond"]["txt"];
                degree=json["HeWeather5"][0]["now"]["tmp"];


最后放上完整代码:


html代码:

<!DOCTYPE html><html ><head>
  <meta charset="UTF-8">
  <title>local weather</title>
  <link rel=\'stylesheet prefetch\' href=\'http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css\'>
      <link rel="stylesheet" href="css/style.css"></head><body>

    <div class="container-fluid">
        <div class="content">
            <!-- <img src="http://file.digitaling.com/eImg/uimages/20150902/1441167475585128.gif"> -->
            <div class="city">
                <img src="img/Location.png">
                <div id="cityname" style="display: inline;">城市</div>
            </div>
            <div class="weather">天气</div>
            <div class="degree">
                <div class="tmp">30</div>
                <div class="tmp-kind">°C</div>
                <div class="tmp-change"><button class="btn-tmp-change btn btn-primary">Change °C or °F</button></div>
            </div>
            <div class="wind">北风3级</div>

        </div>
    </div>

    <script src=\'http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js\'></script>
    <script src="js/index.js"></script></body></html>


css代码:

*{    margin:0;    padding:0;}body{    overflow:none;    background: url("https://images.unsplash.com/photo-1465311530779-5241f5a29892?dpr=1&auto=format&fit=crop&w=1500&h=1000&q=80&cs=tinysrgb&crop=") no-repeat center center fixed;    background-size: cover;}/*
    雷电:https://images.unsplash.com/photo-1431440869543-efaf3388c585?dpr=1&auto=format&fit=crop&w=1500&h=1000&q=80&cs=tinysrgb&crop=
    雪:https://images.unsplash.com/photo-1483119624769-b1a73c256500?dpr=1&auto=format&fit=crop&w=1080&h=724&q=80&cs=tinysrgb&crop=
    太阳:https://images.unsplash.com/photo-1472752112832-519166b23dfa?dpr=1&auto=format&fit=crop&w=1080&h=720&q=80&cs=tinysrgb&crop=
    雨:https://images.unsplash.com/photo-1417008914239-59b898b49382?dpr=1&auto=format&fit=crop&w=1080&h=708&q=80&cs=tinysrgb&crop=
*/.content{    position: absolute;    margin-top: 10%;    margin-left: 20%;    margin-right: 20%;    width: 60%;}.city{    text-align: center;}.city>img{    width: 30px;}.city>div{    font-size: 28px;    vertical-align: middle;    color: rgb(255,102,102);}.weather{    text-align: center;    color: rgb(255,102,102);    font-size: 38px;}.degree{    text-align: center;    color: rgb(255,102,102);    font-size: 38px;}.degree div{    display: inline;}.degree .tmp-kind{    margin-left: 10px;}.degree .tmp-change{    margin-left: 30px;}.wind{    text-align: center;    color: rgb(255,102,102);    font-size: 38px;}


js代码:

$(document).ready(function(){
    var lat,lon;    var degree;     //摄氏度
    var tmpShow;    //显示的温度,因为有摄氏与华氏度的转换

    if(navigator.geolocation){
        navigator.geolocation.getCurrentPosition(function(position){
            lat = position.coords.latitude;
            lon = position.coords.longitude;
            console.log(lat+"  "+lon);            var para = "https://free-api.heweather.com/v5/weather?city="+lon+","+lat+"&key=53153e2fed574ce19f5c089a1aacede0";
            console.log(para);
            $.getJSON(para,function(json){
                var city= json["HeWeather5"][0]["basic"]["city"];                var cnty= json["HeWeather5"][0]["basic"]["cnty"];                var weatherNow = json["HeWeather5"][0]["now"]["cond"]["txt"];
                degree=json["HeWeather5"][0]["now"]["tmp"];
                tmpShow = degree;                var windShow = json["HeWeather5"][0]["now"]["wind"]["dir"]+" "+json["HeWeather5"][0]["now"]["wind"]["sc"]+"级";                //console.log(city);
                $("#cityname").html(city+","+cnty);
                $(\'.weather\').html(weatherNow);    
                $(".tmp").html(tmpShow);
                $(".wind").html(windShow);
            });
        });
    }

    $(".btn-tmp-change").on("click",function(){
        console.log($(".tmp").html());        if(degree == $(".tmp").html()){
            $(".tmp").html(degree*1.8+32);
            $(".tmp-kind").html("°F");
            console.log(degree);
            console.log($(".tmp").html());
        }else{
            $(".tmp").html(degree);
            $(".tmp-kind").html("°C");
        }
    });

});


扫描二维码推送至手机访问。

版权声明:本文由李灿灿发布,如需转载请注明出处。

本文链接:https://licancan.com/26.html

分享给朋友:

相关文章

2021年超简单免费给视频添加中文字幕的方法

2021年超简单免费给视频添加中文字幕的方法

简介:以往给视频添加中文字幕的时候总是很麻烦,需要创作者话费更多的精力去逐条增加,今天我也给大家分享下我在制作视频字幕时候的方法,个人觉得还是比较方便好用的,关键还是免费的。一、软件下载地址 https://github.com/...

2021年百度盘直链加速下载的方法!

2021年百度盘直链加速下载的方法!

简介:随着各大网盘的退出剩下的可用的网盘有限,数字盘随然好用但价格却是很高,现在大家常用的就是某度盘,但度盘的下载速度却很难受,随然出过很多破解下载的软件但却相继失效,今天我跟大家聊聊还能用的加速下载的方法!一、安装下载软件Win系统我们可...

怎样在一个Javascript文件里,再加载另一个Javascript文件。

怎样在一个Javascript文件里,再加载另一个Javascript文件。

在很多情况下,我们会遇到一个问题,就是如何在一个Javascript文件里,再加载另一个Javascript文件,并完成一定的功能,如何实现一个JS文件加载另一个JS文件呢?有些人使用document.write的方式来加载js,这种方法有...

2021年谷歌无限网盘申请和VPS挂载谷歌网盘的方法

2021年谷歌无限网盘申请和VPS挂载谷歌网盘的方法

简介:虽然谷歌盘盘对网盘进行了捕捉的搬运限制,但还有足够的谷歌能力对个人还是有很大的作用,只要不饲养还是可以长期使用的,今天还是小生常谈,接下来一说如何申请谷歌团队盘,不是把队伍盘挂到你的VPS上,挂载后可以安装离线下载,音影库,等等可以翻...

如何强制打开公共 Wi-Fi 网络登录页面

如何强制打开公共 Wi-Fi 网络登录页面

不知道你们有没有试过在机场、咖啡店、酒店或会议室打开笔记本电脑,当你想坐下来工作的时候,然后想选择正确的Wi-Fi网络上网,然后……什么都没有。您的Wi-Fi图标可能会显示它已连接,但您的浏览器显示无论多么努力,您都没办法连接到互联网。我在...

分享一个简单的Tiktok视频无水印下载方法

分享一个简单的Tiktok视频无水印下载方法

如果你在苦苦寻找Tiktok视频无水印的下载方法,我希望本文能够帮到你。我介绍的方法是pc,win和macOS均可使用,点击下面地址安装Chrome浏览器插件:https://chrome.google.com/webstore/detai...

发表评论

访客

◎欢迎参与讨论,请在这里发表您的看法和观点。