最近一直在学习HTML5,因为8月份要开发手机项目了。所以先把HTML5学习下。

基本思路:

1. 用户未设置任何城市之前,根据HTML5 geolocation 获取用户所在的地理位置。

2. 根据用户设置的城市切换到所在城市的天气数据并展示之。

3. 根据当前城市的天气,展示近3天的天气情况。

从界面而言,基本上是仿百度小天气实现的,图片等也是在百度天气中下载到。天气的接口是调用的国家气象局提供的接口数据。

从程序来讲,里面使用了一个ajax.php文件,主要是用来根据城市名称获取天气的情况,并实现缓存天气数据。设置的是每隔4小时更新缓存(在用户访问界面后)。

先看看实现的效果:

说明一点:在运行时请使用支持HTML5的浏览器,才能查看到该效果。因为有PHP文件,所以必须在PHP环境下运行展示。

点击这里下载程序包

如果有遇到程序的问题,请给我留言,我会尽快处理。希望和大家共进步。

朋友们可以点击我的新站:http://www.webfxb.com/

基于HTML5 geolocation 实现的天气预报功能的更多相关文章

  1. 基于 html5 geolocation来获取经纬度地址(copy)

    geolocation来获取经纬度地址 以前如果要获取互联网用户所在地都是根据用户的IP地址来获取地理位置,这样获取到的数据和真实数据有很大的偏差.为了获取更加精确的位置,可以使用了html5的geo ...

  2. HTML5 Geolocation 构建基于地理位置的 Web 应用

    HTML5 中的新功能 HTML5 是最新一代的 HTML 规范,是 W3C 与 WHATWG 合作的结果,目前仍外于开发中.自从上一代 HTML4,Web 世界已经发生了巨大的变化,HTML5 的到 ...

  3. HTML5 Geolocation学习

    GeolocationAPI学习,我写的挺枯燥的,直接跳到最后看示例. 5.1 位置信息 HTML5 Geolocation API的使用方法相当简单.请求一个位置信息,如果用户同意,浏览器就会返回位 ...

  4. [Javascript] HTML5 地理位置定位(HTML5 Geolocation)原理及应用

    地理位置(Geolocation)是 HTML5 的重要特性之一,提供了确定用户位置的功能,借助这个特性能够开发基于位置信息的应用.今天这篇文章向大家介绍一下 HTML5 地理位置定位的基本原理及各个 ...

  5. HTML5 地理位置定位(HTML5 Geolocation)原理及应用

    地理位置(Geolocation)是 HTML5 的重要特性之一,提供了确定用户位置的功能,借助这个特性能够开发基于位置信息的应用.今天这篇文章向大家介绍一下 HTML5 地理位置定位的基本原理及各个 ...

  6. html5 geolocation API

    清单 1. 检查浏览器支持性if (navigator.geolocation) 清单 2. 单次定位请求 API void getCurrentPosition(updateLocation, op ...

  7. 快速开发基于 HTML5 网络拓扑图应用

    采用 HT 开发网络拓扑图非常容易,例如<入门手册>的第一个小例子麻雀虽小五脏俱全:http://www.hightopo.com/guide/guide/core/beginners/e ...

  8. 基于HTML5 Canvas实现的图片马赛克模糊特效

    效果请点击下面网址: http://hovertree.com/texiao/html5/1.htm 一.开门见山受美国肖像画家Chuck Close的启发,此脚本通过使用HTML5 canvas元素 ...

  9. 基于HTML5的Web SCADA工控移动应用

    在电力.油田燃气.供水管网等工业自动化领域Web SCADA的概念已经提出了多年,早先年的Web SCADA前端技术大部分还是基于Flex.Silverlight甚至Applet这样的重客户端方案,在 ...

随机推荐

  1. salesforce 零基础开发入门学习(二)变量基础知识,集合,表达式,流程控制语句

    salesforce如果简单的说可以大概分成两个部分:Apex,VisualForce Page. 其中Apex语言和java很多的语法类似,今天总结的是一些简单的Apex的变量等知识. 有如下几种常 ...

  2. inoic start projectname sidemenu报错 - Error: Cannot find module 'lodash._baseslice'

    inoic start projectname sidemenu报错 - Error: Cannot find module 'lodash._baseslice' 在公司的电脑上出现过这个错误,后来 ...

  3. css基础总结一

    最近在弄一个简单管理系统的前端,所以打算将做项目的一些个人感想以及总结简单罗列下,当然,主要针对前端的基础部分以及一些常用的前端个人简单技巧总结.主要分为js部分和css部分,下面是css的基础部分总 ...

  4. 实用的开放源码的Excel导入导出类库 CarlosAg ExcelXmlWriter

    做企业管理软件经常会遇到要把数据导出成EXCEL格式,目前市面上有很多工具类库可以实现此功能.CarlosAg ExcelXmlWriter是其中之一,它绿色小巧,免安装,又源码开放,我在项目中一直以 ...

  5. KendoUI系列:ComboBox

    1.基本使用 1>.创建Input <input id="color" placeholder="Select Color..." /> &l ...

  6. javase基础复习攻略《八》

    进入第八篇,我们开始讨论JAVA的IO初步.在JAVA程序中,对数据的输入\输出操作以"流"(stream)方式进行,J2SDK提供了各种各样的"流"类,用于获 ...

  7. sqlserver -- 学习笔记(八)体验charindex、stuff 和 for xml path在实际问题中的应用及几个问题的探讨

    写在前面 之前做了个微信端顾客扫码评价员工的功能,除了打分数,还可以打标签. 需要统计分数和统计各个员工每种标签被点击的次数. 后来加了个要求,需要查看客户对某个员工一次服务所打出的标签组合.  在不 ...

  8. JavaScript获取图片的原始尺寸

    页面里的img元素,想要获取它的原始尺寸,以宽度为例可能首先想到的就是width,如下 <img src="http://img11.360buyimg.com/da/g14/M07/ ...

  9. PHP的学习--PHP的引用

    引用是什么 在 PHP 中引用意味着用不同的名字访问同一个变量内容.这并不像 C 的指针,替代的是,引用是符号表别名.注意在 PHP 中,变量名和变量内容是不一样的,因此同样的内容可以有不同的名字.最 ...

  10. HTML5移动Web开发(七)——通过界面图标启动Web应用

    现在我们要使用手机上某个应用时,通过点击屏幕上的图标就可以运行.但是对基于HTML的Web应用来说,运行起来就比较麻烦了,用户必须先打开浏览器,然后访问想使用的应用程序站点.现在我们想把一个指定的We ...