HTML5 天气预报应用

hankkin 发布于2019-08-21 10:47 / 2830人阅读

摘要：实现输入城市名称，通过的来获取当前城市的天气情况。页面展示效果代码北京

jQuery实现输入城市名称，通过yahoo的Weather API来获取当前城市的天气情况。
页面展示效果：

HTML

CSS

html,
body {
    background-color: #F5F8FC;
    height: 100%;
    width: 100%;
    overflow: hidden;
    font-family: "Open Sans", sans-serif;
}
.info p {
    text-align: center;
    margin: 10px auto 0px auto;
    width: 540px;
    color: #4c4c4c;
    font-size: 16px;
    font-weight: bold;
}
.wrapper {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    max-width: 100%;
    max-height: 100%;
    overflow: auto;
   
    height: 500px;
    
}
.shadow {
    -webkit-box-shadow: 0px 30px 100px 1px rgba(180, 180, 180, 1);
    -moz-box-shadow: 0px 30px 100px 1px rgba(180, 180, 180, 1);
    box-shadow: 0px 30px 100px 1px rgba(180, 180, 180, 1);
}
.top {
    position: relative;
    z-index: 0;
    background-color: #61c3e6;
    height: 300px;
    overflow: hidden;
    text-align: center;
    display: inline-block;
    width: 100%;
    float: left;
}
.top .btn {
    text-align: center;
    line-height: 25px;
    position: absolute;
    color: white;
    font-weight: bold;
    font-size: 20px;
    border-radius: 50%;
    border: 1px solid white;
    top: 5px;
    left: 740px;
    cursor: pointer;
    text-transform: uppercase;
}
.top img {
    position: relative;
    z-index: -1;
    margin-top: -10px;
    margin-bottom: 10px;
    width: 275px;
    -webkit-filter: invert(100%);
    -moz-filter: invert(100%);
    filter: invert(100%);
}
.top .deg {
    font-weight: bold;
}
.top .text {
    text-align: center;
    color: white;
    margin-bottom: 15px;
    margin-top: -70px;
    font-size: 25px;
}
.top .text-city{
    text-align: center;
    color: white;
    margin-bottom: 10px;
    font-size: 25px;
}
.top input {
    position: relative;
    z-index: 1;
    font-family: "Open Sans", sans-serif;
    width: 210px;
    background-color: rgba(0, 0, 0, 0);
    border-top: 0px;
    border-right:0px;
    border-left:0px;
    border-bottom:1px solid #F5F8FC;
    outline: 0;
}
.top input:focus {
    outline: 0;
    border: 0px;
}
.bot {
    float: left;
    background-color: white;
    height: 200px;
    overflow: hidden;
    display: inline-block;
    width: 100%;
}
.bot ul {
    overflow: hidden;
    display: inline-block;
    width: 100%;
    height: 100%;
    list-style-type: none;
    padding-top: 30px;
}
.bot ul li {
    color: #999999;
    float: left;
    width: 20%;
   
    text-align: center;
}
.bot ul li:nth-child(1) {
    color: #4c4c4c;
}
.bot ul li h1 {
    text-transform: uppercase;
    font-weight: bold;
}
.bot ul li p {
    font-weight: bold;
}
.bot ul li img {
    -webkit-filter: invert(60%);
    -moz-filter: invert(60%);
    filter: invert(60%);
}
.bot ul li:first-child img {
    -webkit-filter: invert(30%);
    -moz-filter: invert(30%);
    filter: invert(30%);
}

javascript代码

var baseYahooURL = "https://query.yahooapis.com/v1/public/yql?q="
var selectedCity = "北京";
var placeholder = "";
var unit = "c";
$(function(){
  init();
})
  
function init() {
    getWoeid(selectedCity);

    $("#city").keypress(function() {
        if (event.which == 13) {
            selectedCity = $("#city").val();
            getWoeid(selectedCity);
            $("#city").blur();
        }
    });

    $("#btn").click(function() {
        if ($("#btn").html() == "F") {
            unit = "c";
        } else unit = "f";
        $("#btn").html(unit.toUpperCase());
        getWoeid(selectedCity);
    })

    $("#city").focus(function(event) {
        placeholder = $("#city").val();
        $("#city").val("");
        $("#city").css("border-bottom", "1px solid #F5F8FC");
    });

    $("#city").blur(function(event) {
        if ($("#city").val() == "") {
            $("#city").val(placeholder);
        }
    });
}

function getWoeid(city) {
    var woeidYQL = "select woeid from geo.placefinder where text="" + city + ""&format=json";
    var jsonURL = baseYahooURL + woeidYQL;
    $.getJSON(jsonURL, woeidDownloaded);
}

function woeidDownloaded(data) {
    var woeid = null;
    if (data.query.count <= 0) {
        $("#city").val("No city found");
        $("#deg").html("");
        setImage(999, $("#big")[0]);
        for (var i = 0; i <= 4; i++) {
            $("#forecast" + i).html("");
            setImage(999, $("#forecastimg" + i)[0]);
            $("#forecastdeg" + i).html("");
        }
        return;
    } else if (data.query.count == 1) {
        woeid = data.query.results.Result.woeid;
    } else {
        woeid = data.query.results.Result[0].woeid;
    }
    getWeatherInfo(woeid);
}

function getWeatherInfo(woeid) {
    var weatherYQL = "select * from weather.forecast where woeid=" + woeid + " and u = "" + unit + "" &format=json";
    var jsonURL = baseYahooURL + weatherYQL
    $.getJSON(jsonURL, weaterInfoDownloaded);
}

function weaterInfoDownloaded(data) {
    $("#city").val(selectedCity);
    //$("#city").val(data.query.results.channel.location.city);
    $("#deg").html(data.query.results.channel.item.condition.temp + " °" + unit.toUpperCase());
    setImage(data.query.results.channel.item.condition.code, $("#big")[0]);
    for (var i = 0; i <= 4; i++) {
        var fc = data.query.results.channel.item.forecast[i];
        $("#forecast" + i).html(fc.day);
        setImage(fc.code, $("#forecastimg" + i)[0]);
        $("#forecastdeg" + i).html((parseInt(fc.low) + parseInt(fc.high)) / 2 + " °" + unit.toUpperCase());
    }
}

function setImage(code, image) {
    image.src = "http://www.hubwiz.com/course/55a60445a164dd0d75929fbd/";
    switch (parseInt(code)) {
        case 0:
            image.src += "images/icons/Tornado.svg"
            break;
        case 1:
            image.src += "images/icons/Cloud-Lightning.svg"
            break;
        case 2:
            image.src += "images/icons/Wind.svg"
            break;
        case 3:
            image.src += "images/icons/Cloud-Lightning.svg"
            break;
        case 4:
            image.src += "images/icons/Cloud-Lightning.svg"
            break;
        case 5:
            image.src += "images/icons/Cloud-Snow-Alt.svg"
            break;
        case 6:
            image.src += "images/icons/Cloud-Rain-Alt.svg"
            break;
        case 7:
            image.src += "images/icons/Cloud-Snow-Alt.svg"
            break;
        case 8:
            image.src += "images/icons/Cloud-Drizzle-Alt.svg"
            break;
        case 9:
            image.src += "images/icons/Cloud-Drizzle-Alt.svg"
            break;
        case 10:
            image.src += "images/icons/Cloud-Drizzle-Alt.svg"
            break;
        case 11:
            image.src += "images/icons/Cloud-Drizzle-Alt.svg"
            break;
        case 12:
            image.src += "images/icons/Cloud-Drizzle-Alt.svg"
            break;
        case 13:
            image.src += "images/icons/Cloud-Snow-Alt.svg"
            break;
        case 14:
            image.src += "images/icons/Cloud-Snow-Alt.svg"
            break;
        case 15:
            image.src += "images/icons/Cloud-Snow-Alt.svg"
            break;
        case 16:
            image.src += "images/icons/Cloud-Snow-Alt.svg"
            break;
        case 17:
            image.src += "images/icons/Cloud-Hail-Alt.svg"
            break;
        case 18:
            image.src += "images/icons/Cloud-Hail-Alt.svg"
            break;
        case 19:
            image.src += "images/icons/Cloud-Hail-Alt.svg"
            break;
        case 20:
            image.src += "images/icons/Cloud-Fog.svg"
            break;
        case 21:
            image.src += "images/icons/Cloud-Fog.svg"
            break;
        case 22:
            image.src += "images/icons/Cloud-Fog.svg"
            break;
        case 23:
            image.src += "images/icons/Cloud-Fog.svg"
            break;
        case 24:
            image.src += "images/icons/Wind.svg"
            break;
        case 25:
            image.src += "images/icons/Thermometer-Zero"
            break;
        case 26:
            image.src += "images/icons/Cloud.svg"
            break;
        case 27:
            image.src += "images/icons/Cloud-Moon.svg"
            break;
        case 28:
            image.src += "images/icons/Cloud.svg"
            break;
        case 29:
            image.src += "images/icons/Cloud-Moon.svg"
            break;
        case 30:
            image.src += "images/icons/Cloud-Sun.svg"
            break;
        case 31:
            image.src += "images/icons/Moon.svg"
            break;
        case 32:
            image.src += "images/icons/Sun.svg"
            break;
        case 33:
            image.src += "images/icons/Moon.svg"
            break;
        case 34:
            image.src += "images/icons/Sun.svg"
            break;
        case 35:
            image.src += "images/icons/Cloud-Hail-Alt.svg"
            break;
        case 36:
            image.src += "images/icons/Sun.svg"
            break;
        case 37:
            image.src += "images/icons/Cloud-Lightning.svg"
            break;
        case 38:
            image.src += "images/icons/Cloud-Lightning.svg"
            break;
        case 39:
            image.src += "images/icons/Cloud-Lightning.svg"
            break;
        case 40:
            image.src += "images/icons/Cloud-Rain.svg"
            break;
        case 41:
            image.src += "images/icons/Cloud-Snow-Alt.svg"
            break;
        case 42:
            image.src += "images/icons/Cloud-Snow-Alt.svg"
            break;
        case 43:
            image.src += "images/icons/Cloud-Snow-Alt.svg"
            break;
        case 44:
            image.src += "images/icons/Cloud.svg"
            break;
        case 45:
            image.src += "images/icons/Cloud-Lightning.svg"
            break;
        case 46:
            image.src += "images/icons/Cloud-Snow-Alt.svg"
            break;
        case 47:
            image.src += "images/icons/Cloud-Lightning.svg"
            break;
        case 3200:
            image.src += "images/icons/Moon-New.svg"
            break;
        case 999:
            image.src += "images/icons/Compass.svg"
            break;
        default:
            image.src += "images/icons/Moon-New.svg"
            break;
    }
}

GPU云服务器云服务器 html5应用 html5应用上架 webrtc html5 应用案例天气预报

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/86182.html

纯 HTML+CSS+JavaScript 编写的计算器应用

摘要：不允许再有其他文件，不允许再有单独的文件。必须支持标准的四则运算。请在收到邮件的小时内独立完成本测试，并回复本邮件。项目地址最终版的计算器，项目地址和预览图片在。并且使用单位来进行自动计算尺寸。一道笔试题之前偶然看到一个公司的笔试题，题目如下：用HTML5、CSS3、JavaScript，做一个网页，实现如下图形式计算器 showImg(https://segmentfault....

PiscesYE 2019-08-29 11:21 评论0 收藏0
纯 HTML+CSS+JavaScript 编写的计算器应用

摘要：不允许再有其他文件，不允许再有单独的文件。必须支持标准的四则运算。请在收到邮件的小时内独立完成本测试，并回复本邮件。项目地址最终版的计算器，项目地址和预览图片在。并且使用单位来进行自动计算尺寸。一道笔试题之前偶然看到一个公司的笔试题，题目如下：用HTML5、CSS3、JavaScript，做一个网页，实现如下图形式计算器 showImg(https://segmentfault....

youkede 2019-08-21 14:29 评论0 收藏0
纯 HTML+CSS+JavaScript 编写的计算器应用

摘要：不允许再有其他文件，不允许再有单独的文件。必须支持标准的四则运算。请在收到邮件的小时内独立完成本测试，并回复本邮件。项目地址最终版的计算器，项目地址和预览图片在。并且使用单位来进行自动计算尺寸。一道笔试题之前偶然看到一个公司的笔试题，题目如下：用HTML5、CSS3、JavaScript，做一个网页，实现如下图形式计算器 showImg(https://segmentfault....

fancyLuo 2019-08-01 15:43 评论0 收藏0

发表评论

登陆后可评论

0条评论

hankkin

男|高级讲师

我要关注我要私信

TA的文章

Python使用Numpy实现Kmeans算法

阅读 3288·2021-11-12 10:36
viewport&像素

阅读 1431·2019-08-30 15:56
什么是 CSS？

阅读 2539·2019-08-30 11:26
CSS Modules实践

阅读 607·2019-08-29 13:00
CSS

阅读 3650·2019-08-28 18:08
微信小程序实践_4显示新闻（1）

阅读 2796·2019-08-26 17:18
复习Javascript专题（二）：闭包，内存，以及垃圾回收机制

阅读 1951·2019-08-26 13:26
css3动画整理

阅读 2477·2019-08-26 11:39

资讯专栏INFORMATION COLUMN

上云采购季！| 2核2G4M爆款云服务器低至59元/年，更有多台、长期优惠，快来选购！

HTML5 天气预报应用

相关文章

纯 HTML+CSS+JavaScript 编写的计算器应用

纯 HTML+CSS+JavaScript 编写的计算器应用

纯 HTML+CSS+JavaScript 编写的计算器应用

发表评论

0条评论

hankkin

男|高级讲师

TA的文章

Python使用Numpy实现Kmeans算法

viewport&像素

什么是 CSS？

CSS Modules实践

CSS

微信小程序实践_4显示新闻（1）

复习Javascript专题（二）：闭包，内存，以及垃圾回收机制

css3动画整理

最新活动