<!doctype html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML5 Canvas和jQuery实用实时天气预报App|DEMO_jQuery之家-自由分享jQuery、html5、css3的插件库</title>
<link href="http://cdn.bootcss.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/normalize.css" />
<link rel="stylesheet" type="text/css" href="css/default.css">
<link rel="stylesheet" type="text/css" href="css/weather.css">
</head>
<body id="weather-background" class="default-weather">
<canvas id="rain-canvas">
</canvas>
<canvas id="cloud-canvas">
</canvas>
<canvas id="weather-canvas">
</canvas>
<canvas id="time-canvas">
</canvas>
<canvas id="lightning-canvas">
</canvas>
<div class="page-wrap">
<header class="search-bar">
<p class="search-text"><span class="search-location-text">What's the weather like in <input id="search-location-input" class="search-location-input" type="text" placeholder="City"> ?</span></p>
<div class="search-location-button-group">
<button id="search-location-button" class="fa fa-search search-location-button search-button"></button><!--
--><button id="geo-button" class="geo-button fa fa-location-arrow search-button"></button>
</div>
</header>
<div id="geo-error-message" class="geo-error-message hide"><button id='close-error' class='fa fa-times close-error'></button>Uh oh! It looks like we can't find your location. Please type your city into the search box above!</div>
<div id="front-page-description" class="front-page-description middle">
<!-- <h1>Blank Canvas Weather</h1>
<h2>An Obligatory Weather App</h2> -->
<header class="htmleaf-header">
<h1>HTML5 Canvas和jQuery实用实时天气预报App <span>A weather app made with jQuery and HTML5 Canvas</span></h1>
<div class="htmleaf-links">
<a class="htmleaf-icon icon-htmleaf-home-outline" href="http://www.htmleaf.com/" title="jQuery之家" target="_blank"><span> jQuery之家</span></a>
<a class="htmleaf-icon icon-htmleaf-arrow-forward-outline" href="http://www.htmleaf.com/html5/html5-canvas/201508132407.html" title="返回下载页" target="_blank"><span> 返回下载页</span></a>
</div>
</header>
</div>
<div class="attribution-links hide" id="attribution-links"><button id='close-attribution' class='fa fa-times close-attribution'></button>
<h3>Icons from <a href="https://thenounproject.com/">Noun Project</a></h3>
<ul>
<li class="icon-attribution"><a href="https://thenounproject.com/term/cloud/6852/">Cloud</a> by Pieter J. Smits</li>
<li class="icon-attribution"><a href="https://thenounproject.com/term/snow/64/">Snow</a> from National Park Service Collection</li>
<li class="icon-attribution"><a href="https://thenounproject.com/term/drop/11449/">Drop</a> Alex Fuller</li>
<li class="icon-attribution"><a href="https://thenounproject.com/term/smoke/27750/">Smoke</a> by Gerardo Martín Martínez</li>
<li class="icon-attribution"><a href="https://thenounproject.com/term/moon/13554/">Moon</a> by Jory Raphael</li>
<li class="icon-attribution"><a href="https://thenounproject.com/term/warning/18974/">Warning</a> by Icomatic</li>
<li class="icon-attribution"><a href="https://thenounproject.com/term/sun/13545/">Sun</a> by Jory Raphael</li>
<li class="icon-attribution"><a href="https://thenounproject.com/term/windsock/135621/">Windsock</a> by Golden Roof</li>
</div>
<div id="weather" class="weather middle hide">
<div class="location" id="location"></div>
<div class="weather-container">
<div id="temperature-info" class="temperature-info">
<div class="temperature" id="temperature"></div>
<div class="weather-description" id="weather-description"></div>
</div>
<div class="weather-box">
<ul class="weather-info" id="weather-info">
<li class="weather-item humidity">Humidity: <span id="humidity"></span>%</li><!--
--><li class="weather-item wind">Wind: <span id="wind-direction"></span> <span id="wind"></span> <span id="speed-unit"></span></li>
</ul>
</div>
<div class="temp-change">
<button id="celsius" class="temp-change-button celsius">°C</button><button id="fahrenheit" class="temp-change-button fahrenheit">°F</button>
</div>
</div>
</div>
</div>
<script src="js/jquery-2.1.1.min.js"></script>
<script src="js/weather.js"></script>
</body>
</html>
HTML5 Canvas和jQuery实用实时天气预报App
需积分: 50 165 浏览量
2019-12-12
21:34:41
上传
评论
收藏 121KB ZIP 举报
201508132158.zip （20个子文件） 
css 
weather.css 6KB normalize.css 2KB weather-min.css 4KB images 
stardust.png 32KB
humidity.svg 1KB flag.svg 1KB default.css 6KB jQuery之家.url 268B
readme.html 865B fonts icomoon.woff 1KB icomoon.eot 2KB icomoon.svg 2KB icomoon.ttf 1KB images stardust.png 32KB humidity.svg 1KB flag.svg 1KB js weather.js 42KB weather-min.js 29KB jquery-2.1.1.min.js 82KB index.html 5KB资源评论
