jQuery Ajax应用之–天气预报的改进

作者: Jancaelm 分类: jQuery 发布时间: 2017-08-07 15:58

上一个demo中,只能查询所设置好的城市(泉州)的天气,并且没有处理未来的天气数据只进行了当日天气的显示.
无法进行天气查询是由于未找到可以查询城市id的免费api,今日无意中找到可以用城市名称进行查询的天气api:

http://api.asilu.com/weather/

特别致谢api提供者.
对于上一个demo的改进: 直达新demo———->天气预报查询

  1. 仍然是使用的bootstrap进行快速网页构建
  2. 添加了一个动画效果,初始状态下天气还未加载时是隐藏的,在输入城市名进行查询之后才加载出来;
  3. 将查询按钮的点击事件与回车键绑定

效果对比:
原:

新demo:

 
 
代码参考:



  
    
    Flat UI Free 101 Template
    
    
    
    
    
    
    
    
    
  
  
    

Hello, 看看今天天气怎么样

  • 今天是:
  • 今天天气:
  • 温度:
  • 风向:
  • PM2.5:
  • 明天:
  • 今天天气:
  • 温度:
  • 风向:
  • 后天:
  • 今天天气:
  • 温度:
  • 风向:
  • 大后天:
  • 今天天气:
  • 温度:
  • 风向:

发表评论

电子邮件地址不会被公开。 必填项已用*标注