最近一直在学习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中工厂模式的运用

    提到工厂模式,想必大家都很熟悉,工厂模式作为一种设计模式,同样在salesforce中适用. 举一个例子,笔作为基类,可以有钢笔,铅笔,圆珠笔等等.有一个笔的工厂,当你向它要钢笔,它就会生产一支钢笔; ...

  2. SSIS package 更新 variable

    在Package中声明一个variable,在package运行的过程中,SSIS如何update Variable? 第一种方法:使用 Script Task 来更新Variable的值 1,创建一 ...

  3. 【WP8.1开发】选择与搜索联系人

    在需要的情况下,可以通过相关的API来访问手机上的联系人信息:当然,在不必要的情况下,不要随便去获取别人的数据. 要从联系人列表中选择并获取一位或者N位联系人的详细信息,比较简单的做法是利用Conta ...

  4. Android入门(十八)服务

    原文链接:http://www.orlion.ga/674/ 一.定义一个服务 创建一个项目ServiceDemo,然后在这个项目中新增一个名为 MyService的类,并让它继承自 Service, ...

  5. SQL*Loader之CASE6

    CASE6 1. SQL脚本 [oracle@node3 ulcase]$ cat ulcase6.sql set termout off rem host write sys$output &quo ...

  6. Testing - 测试基础 - 流程

    测试存在于各个阶段: 需求测试--->单元测试--->集成测试--->系统测试--->性能测试--->用户测试--->回归测试 需求测试 完整性&正确性 一 ...

  7. weback学习笔记

    weback可以把各种资源,例如JS(含JSX).coffee.样式(含less/sass).图片等都作为模块来使用和处理.同时支持amd cmd CommonJS语法.同时可以和gulp一块使用. ...

  8. javascripts学习笔记（五）：用js来实现缩略语列表、文献来源链接和快捷键列表。

    1 缩略语列表问题出发点:一段包含大量缩略语的文本,例如: <p> The <abbr title="World Wide Web Consortium"> ...

  9. JS代码格式化和语法着色

    有时为了研究学习一些格式不规范的JS代码段,需要将代码段格式化一下,这样思路就会清晰多了,网上找到此款格式化的工具,将以下代码保存为html格式文件即可使用 <html> <head ...

  10. java中复制对象通过反射或序列化

    在使用缓存读取数据后修改发现缓存被修改.于是找了下复制对象的方法. 关于对象克隆 按我的理解,对象是包含引用+数据.通常变量复制都是将引用传递过去.比如: Person p1 = new Person ...