11.29作业
来源：互联网 发布：淘宝信誉评价表 编辑：程序博客网 时间：2024/06/06 05:41
完成weather app V0.1版本
（1）html部分
<!DOCTYPE html><html><head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /> <meta http-equiv="Access-Control-Allow-Origin" content="*"> <meta http-equiv="content-security-policy"> <title></title> <link rel="stylesheet" href="css/index.css" /> <style type="text/css"> /*//解决下拉刷新顶部多余文字的问题*/ #refreshContainer .mui-pull-top-pocket{ display: none; } div #c1{ margin: 0 auto; padding: 0; display: relative; } #future-weather-content{ position: absolute; height: 100px; top:60vh; /*vh移动端长度单位*/ } </style></head><body onselect="return false" onselectstart="return false"> <div id="refreshContainer" class="mui-content mui-scroll-wrapper"> <div class="weather-cover"></div> <div class="weather-content"> <div class="weather-content-header"> <div id="weather-icon"> <img src="img/location.svg" alt="" /> </div> <div id="weather-location"> <p id="weather-citynm">南通</p> </div> </div> <div class="weather-temp" id="weatherInfo-temperature_curr"> </div> <div class="weather-content-footer"> <div id="weather-wind" class="weather-other-info"> <img src="img/wind.svg" alt="" /> <span class="weatherInfo-wind"> </span> </div> <div id="weather-currweather" class="weather-other-info"> <img src="img/weather.svg" alt="" /> <span id="weatherInfo-weather"> </span> </div> <div id="weather-humidity" class="weather-other-info"> <img src="img/humidity_small.svg" alt="" /> <span class="weatherInfo-humidity"></span> </div> </div> <div class="weather-footer"> <div class="weather-footer-info"> <p class="weatherInfo-wind"></p> <img src="img/wind2.svg" alt="" /> <p id="weatherInfo-winp"></p> </div> <div class="weather-footer-info"> <p>最高温度</p> <img src="img/temp.svg" alt="" /> <p id="weatherInfo-temp_high"></p> </div> <div class="weather-footer-info"> <p>最低温度</p> <img src="img/temp_low.svg" alt="" /> <p id="weatherInfo-temp_low"></p> </div> <div class="weather-footer-info"> <p>湿度</p> <img src="img/humidity.svg" alt="" /> <p class="weatherInfo-humidity"></p> </div> </div> </div> </div> <script src="js/jquery.js" type="text/javascript"></script> <script src="js/mui.min.js" type="text/javascript" charset="utf-8"></script> <script src="js/index.js" type="text/javascript" charset="utf-8"></script> <!--<script src="http://api.map.baidu.com/api?v=2.0&ak=y4ks32wpzCHXIl6HIbuQeHSbGPEE2gkF" type="text/javascript"></script>--> <script type="text/javascript"> </script></body></html>（2）css部分
* { margin: 0; padding: 0;}html,body { width: 100%; height: 100%; overflow: hidden;}img { width: 100%; height: 100%;}.weather-cover { width: 100vw; height: 100vh; background: center no-repeat; background-size: 100% 100%; z-index: -10;}.weather-cover-spring { background-image: url(../img/spring.jpg);}.weather-cover-summer { background-image: url(../img/summer.jpg);}.weather-cover-autumn { background-image: url(../img/autumn.jpg);}.weather-cover-winter { background-image: url(../img/winter.jpg);}.weather-content { width: 100vw; height: 100vh; background: rgba(0, 0, 0, 0.3); position: fixed; left: 0; top: 0;}.weather-content-header { width: 100vw; height: 15vh; color: #fff; position: absolute; top: 5vh;}#weather-icon { width: 28px; height: 28px; position: absolute; top: 2vh; left: 40vw;}#weather-location { width: 200px; height: 64px; text-align: left; position: absolute; top: calc(2vh + 6px); left: calc(36vw + 45px);}#weather-location p { font-size: 20px;}.weather-temp { width: 100vw; height: 36vh; text-align: center; font-size: 120px; line-height: 36vh; color: #fff; position: absolute; top: 21vh;}.weather-temp::after { content: "o"; display: block; font-size: 40px; position: absolute; top: -8vh; right: calc(50vw - 98px);}.weather-content-footer { width: 100vw; height: 8vh; position: absolute; top: 50vh;}.weather-other-info { width: 25vw; height: 90%; margin-left: 2vw; text-align: center; float: left; position: relative;}.weather-other-info:first-child { margin-left: 16vw;}.weather-other-info:nth-child(2) { margin-left: -4vw;}.weather-other-info img { width: 22px; height: 22px; position: absolute; left: 0;}.weather-other-info:nth-child(3) img { width: 20px; height: 20px; left: 8px; top: 2px;}.weather-other-info span { font-size: 14px; color: #fff; position: absolute; top: 5px; left: 28px;}.weather-footer { width: 100vw; height: 14vh; position: absolute; bottom: 0;}.weather-footer-info { width: 25%; height: 100%; text-align: center; color: #fff; float: left; position: relative;}.weather-footer-info p { font-size: 10px; margin-top: 4px;}.weather-footer-info p:last-child { margin-top: 10px; font-size: 14px;}.weather-footer-info img { width: 24px; height: 24px; margin-top: 6px;}（3）js部分
var $$ = jQuery.noConflict();$$(function() {var currMonth = new Date().getMonth() + 1;if(2 <= currMonth && currMonth <= 4) {$$('.weather-cover')[0].className += ' ' + 'weather-cover-spring';} else if(5 <= currMonth && currMonth <= 7) {$$('.weather-cover')[0].className += ' ' + 'weather-cover-summer';} else if(8 <= currMonth && currMonth <= 10) {$$('.weather-cover')[0].className += ' ' + 'weather-cover-autumn';} else {$$('.weather-cover')[0].className += ' ' + 'weather-cover-winter'; } var url = "https://api.caiyunapp.com/v2/f34sfOwqSqhQ1LS4/120.883,32.05/forecast.jsonp"; /*下拉刷新方法*/ mui.init({ pullRefresh: { container: "#refreshContainer", down: { style: 'circle', //color: '#2BD009', //height: '50px', //range: '100px', //offset: '0px', callback: pull_refresh_method } } }); /*获取天气数据方法*/ function get_weather_data() { $$.ajax({ url: url, type: 'GET', dataType: 'JSONP', async: false, success: function(data) { console.log(data); print_data(data); } }); } get_weather_data(); function print_data(data) { $$('.weather-citynm').text('南通');var current_temperature=data.result.hourly.temperature[0].value;var current_humidity=data.result.daily.humidity[0].avg;var wind_speed=data.result.daily.wind[0].avg.speed + 'km/h';var max_temperature=data.result.daily.temperature[0].max+'℃';var min_temperature=data.result.daily.temperature[0].min+'℃';$$('#weatherInfo-temperature_curr').text(current_temperature); $$('.weatherInfo-wind').text('风速');//$$('#weatherInfo-weather').text(data.result.daily.desc[0].value); $$('.weatherInfo-humidity').text(current_humidity);$$('#weatherInfo-winp').text(wind_speed); $$('#weatherInfo-temp_high').text(max_temperature);$$('#weatherInfo-temp_low').text(min_temperature); } /*下拉刷新执行方法*/ function pull_refresh_method() { console.log('下拉刷新成功'); get_weather_data(); close_pull_refresh_method(); } /*关闭下拉刷新*/ function close_pull_refresh_method() { mui('#refreshContainer').pullRefresh().endPulldownToRefresh(); }});阅读全文
0 0
