首页>>Jquery文字>>输入城市名称显示动画天气预报，支持中文输入(2015-07-26)

输入城市名称显示动画天气预报，支持中文输入

 天气显示是英文的，有些中文城市识别失败，建议输入拼音

输入城市名称显示动画天气预报，支持中文输入
演示
下载
赞赏支持
立刻微信赞赏支持 关闭

 

XML/HTML Code
  1. <canvas id="rain-canvas"> </canvas>  
  2. <canvas id="cloud-canvas"> </canvas>  
  3. <canvas id="weather-canvas"> </canvas>  
  4. <canvas id="time-canvas"> </canvas>  
  5. <canvas id="lightning-canvas"> </canvas>  
  6. <div class="page-wrap">  
  7. <header class="search-bar">  
  8.   <p class="search-text"><span class="search-location-text">What's the weather like in  
  9.     <input id="search-location-input" class="search-location-input" type="text" placeholder="City">  
  10.     ?</span></p>  
  11.   <div class="search-location-button-group">  
  12.     <button id="search-location-button" class="fa fa-search search-location-button search-button"></button>  
  13.     <!-- 
  14.                 -->  
  15.     <button id="geo-button" class="geo-button fa fa-location-arrow search-button"></button>  
  16.   </div>  
  17. </header>  
  18. <div id="geo-error-message" class="geo-error-message hide">  
  19.   <button id='close-error' class='fa fa-times close-error'></button>  
  20.   Uh oh! It looks like we can't find your location. Please type your city into the search box above!</div>  
  21. <div id="front-page-description" class="front-page-description middle">  
  22.   <h1>Blank Canvas Weather</h1>  
  23.   <h2>jQuery & canvas based weather web app</h2>  
  24. </div>  
  25. <div id="weather" class="weather middle hide">  
  26.   <div class="location" id="location"></div>  
  27.   <div class="weather-container">  
  28.     <div id="temperature-info" class="temperature-info">  
  29.       <div class="temperature" id="temperature"></div>  
  30.       <div class="weather-description" id="weather-description"></div>  
  31.     </div>  
  32.     <div class="weather-box">  
  33.       <ul class="weather-info" id="weather-info">  
  34.         <li class="weather-item humidity">Humidity: <span id="humidity"></span>%</li>  
  35.         <!-- 
  36.                      -->  
  37.         <li class="weather-item wind">Wind: <span id="wind-direction"></span> <span id="wind"></span> <span id="speed-unit"></span></li>  
  38.       </ul>  
  39.     </div>  
  40.     <div class="temp-change">  
  41.       <button id="celsius" class="temp-change-button celsius">°C</button>  
  42.       <button id="fahrenheit" class="temp-change-button fahrenheit">°F</button>  
  43.     </div>  
  44.   </div>  
  45. </div>  
  46. </div>  

 


原文地址:http://www.freejs.net/article_jquerywenzi_495.html