LocalWeather实现

本项目主要实现了根据ip获得地址当地天气，并根据天气显示不同图片，同时可以切换摄氏与华氏温度

在垂直方向上居中实现

在垂直方向上居中利用display:table实现

.site-wrapper { display: table; width: 100%; height: 100%; /* For at least Firefox */ min-height: 100%; -webkit-box-shadow: inset 0 0 100px rgba(0,0,0,.5); box-shadow: inset 0 0 100px rgba(0,0,0,.5); } .site-wrapper-inner { display: table-cell; vertical-align: middle; }

html界面

css页面

.btn-celsius, .btn-fahrenheit { display: none; } a, a:focus, a:hover { color: #fff; } .btn-default, .btn-default:hover, .btn-default:focus { color: #333; text-shadow: none; background-color: #fff; border: 1px solid #fff; } .btn-lg { padding: 10px 20px; font-weight: bold; } .information { font-size: 36px; font-weight: 600; } html, body { height: 100%; background-size: cover; } body { color: #fff; text-align: center; text-shadow: 0 1px 3px rgba(0,0,0,.5); } .site-wrapper { display: table; width: 100%; height: 100%; /* For at least Firefox */ min-height: 100%; -webkit-box-shadow: inset 0 0 100px rgba(0,0,0,.5); box-shadow: inset 0 0 100px rgba(0,0,0,.5); background-color: #333; } .test{ width: 100%; height: 100%; background-color: #FFF; } .test2{ width: 100%; height: 100%; background-color: #333; } .site-wrapper-inner { display: table-cell; vertical-align: middle; width: 100%; } .container { margin-right: auto; margin-left: auto; width: 700px; padding: 0 20px; } .foot{ display: table-row; height: 10%; vertical-align: center; color: rgba(255,255,255,.5); }

通过jquery获得天气数据

根据结果更换图片，按钮形式，显示内容

$(document).ready(function() { $.getJSON(‘http://ip-api.com/json’, function(ipAddress) { $.getJSON(‘http://api.openweathermap.org/data/2.5/weather?lat=’ + ipAddress.lat + ‘&lon=’ + ipAddress.lon + ‘&appid=3695e5e886e4a1b016cf201000ec807e’, function(forecast) { var celsius = forecast.main.temp – 273.15; var fahrenheit = celsius * 1.8 + 32; var backgroundPic = forecast.weather[0].icon.substring(0, 2); var $body = $(‘.site-wrapper’); if (backgroundPic === ’01’ || backgroundPic === ’02’ || backgroundPic === ’03’) { $body.css(‘background-image’, ‘url(“images/clear.jpg”)’); } else if (backgroundPic === ’04’) { $body.css(‘background-image’, ‘url(“images/broken.jpg”)’); } else if (backgroundPic === ’09’) { $body.css(‘background-image’, ‘url(“images/drizzle.jpg”)’); } else if (backgroundPic === ’10’) { $body.css(‘background-image’, ‘url(“images/rain.jpg”)’); } else if (backgroundPic === ’11’) { $body.css(‘background-image’, ‘url(“images/thunder.jpg”)’); } else if (backgroundPic === ’13’) { $body.css(‘background-image’, ‘url(“images/snow.jpg”)’); } else if (backgroundPic === ’50’) { $body.css(‘background-image’, ‘url(“images/fog.jpg”)’); } else { $body.css(‘background-image’, ‘url(“images/def.jpg”)’); } $(‘.information’).text(‘Hello ‘ + ipAddress.city + ‘ from Seattle.’); $(‘.btn-check’).on(‘click’, function() { $(‘.btn-check’).hide(); $(‘.btn-celsius’).show(); $(‘.information’).text(‘The current temperature in ‘ + ipAddress.city + ‘ is ‘ + fahrenheit.toFixed(0) + ‘ degrees Fahrenheit.’); }); $(‘.btn-celsius’).on(‘click’, function() { $(‘.btn-celsius’).hide(); $(‘.btn-fahrenheit’).show(); $(‘.information’).text(‘The current temperature in ‘ + ipAddress.city + ‘ is ‘ + celsius.toFixed(0) + ‘ degrees Celsius.’); }); $(‘.btn-fahrenheit’).on(‘click’, function() { $(‘.btn-fahrenheit’).hide(); $(‘.btn-celsius’).show(); $(‘.information’).text(‘The current temperature in ‘ + ipAddress.city + ‘ is ‘ + fahrenheit.toFixed(0) + ‘ degrees Fahrenheit.’); }); }); }); });

问题

This request has been blocked; the content must be served over HTTPS.

当把网页放到https目录下时，似乎不能请求http资源，导致网页不能使用，但这个接口又似乎没有https版本，暂时无法解决。

源码:SourceCode

liveDemo:Weather