zoukankan      html  css  js  c++  java
  • h5的一些小扩展

    (1)地理定位

    在HTML规范中,增加了获取用户地理信息的API,这样使得我们可以基于用户位置开发互联网应用,即基于位置服务 (Location Base Service)

    • 获取当前地理信息

    navigator.geolocation.getCurrentPosition(successCallback, errorCallback) 
    • 重复获取当前地理信息

    navigator. geolocation.watchPosition(successCallback, errorCallback)
    • 当成功获取地理信息后,会调用succssCallback,并返回一个包含位置信息的对象position。position.coords.latitude纬度position.coords.longitude经度position.coords.accuracy精度position.coords.altitude海拔高度

    • 当获取地理信息失败后,会调用errorCallback,并返回错误信息error

    • 在现实开发中,通过调用第三方API(如百度地图)来实现地理定位信息,这些API都是基于用户当前位置的,并将用位置位置(经/纬度)当做参数传递,就可以实现相应的功能。

    (2)离线应用

    HTML5中我们可以轻松的构建一个离线(无网络状态)应用,只需要创建一个cache manifest文件。

    • 优势

      • 1、可配置需要缓存的资源

      • 2、网络无连接应用仍可用

      • 3、本地读取缓存资源,提升访问速度,增强用户体验

      • 4、减少请求,缓解服务器负担

    • 缓存清单

      • 一个普通文本文件,其中列出了浏览器应缓存以供离线访问的资源,推荐使用.appcache为后缀名

      • 例如我们创建了一个名为demo.appcache的文件,然后在需要应用缓存在页面的根元素(html)添加属性manifest="demo.appcache",路径要保证正确。

    • manifest文件格式

      • 1、顶行写CACHE MANIFEST

      • 2、CACHE: 换行 指定我们需要缓存的静态资源,如.css、image、js等

      • 3、NETWORK: 换行 指定需要在线访问的资源,可使用通配符

      • 4、FALLBACK: 换行 当被缓存的文件找不到时的备用资源

    • 其它

      • 1、CACHE: 可以省略,这种情况下将需要缓存的资源写在CACHE MANIFEST

      • 2、可以指定多个CACHE: NETWORK: FALLBACK:,无顺序限制

      • 3、#表示注释,只有当demo.appcache文件内容发生改变时或者手动清除缓存后,才会重新缓存。

      • 4、chrome 可以通过chrome://appcache-internals/工具和离线(offline)模式来调试管理应用缓存

    (3)文件读取

    HTML5新增内建对象,可以读取本地文件内容。


    /*获取到了文件表单元素*/
    var file = document.querySelector('.file');
    /*选择文件后触发*/
    file.onchange = function () {
      /*初始化了一个文件读取对象*/
      var reader = new FileReader();
      /*读取文件数据 this.files[0] 文件表单元素选择的第一个文件 */
      reader.readAsDataURL(this.files[0]);
      /*读取的过程就相当于 加载过程 */
      /*读取完毕 预览 */
      reader.onload = function () {
          /*读取完毕 base64位数据 表示图片*/
          console.log(this.result);
        document.querySelector('#img').src = this.result;

      }
    }

    (4)h5拖拽

    首先,为了使元素可拖动,把 draggable 属性设置为 true ,

    被拖动的源对象可以触发的事件:

    (1) ondragstart:源对象开始被拖动

    (2) ondrag:源对象被拖动过程中(鼠标可能在移动也可能未移动)

    (3) ondragend:源对象被拖动结束

    拖动源对象可以进入到上方的目标对象可以触发的事件:

    (1) ondragenter:目标对象被源对象拖动着进入

    (2) ondragover:目标对象被源对象拖动着悬停在上方

    (3) ondragleave:源对象拖动着离开了目标对象

    (4) ondrop:源对象拖动着在目标对象上方释放/松手

    (5)网络状态

    • 我们可以通过window.navgator.onLine来检测,用户当前的网络状况,返回一个布尔值

      • window.online用户网络连接时被调用

      • window.offline用户网络断开时被调用

     
  • 相关阅读:
    Spring SpringFactoriesLoader
    java8函数式接口 Supplier
    Spring DefaultResourceLoader
    Spring ProtocolResolver接口
    StringBuilder&StringBuffer
    java自动自动拆装箱
    Spring ClassPathResource
    windows10风格 springboot vue.js html 跨域 前后分离 activiti 整合项目框架源码
    SQL语句及数据库优化
    tomcat添加https服务
  • 原文地址:https://www.cnblogs.com/buautifulgirl/p/9743403.html
Copyright © 2011-2022 走看看