HTML5技术

那些牛掰的 HTML5的API(二) - 小花大方

字号+ 作者:H5之家 来源:H5之家 2016-06-16 13:00 我要评论( )

1:视频播放器 2:地理定位 我们的支持html5 的浏览器给我们提供一个接口(api),可以用来获取你当前的位置. 主要是通过geolocation(地理位置),对象 ,去访问硬件,来获取到经纬度.. 1 if (navigator.geolocation){ 2 navigator.geolocation.getCurrentPos

1:视频播放器

2:地理定位

  我们的支持html5 的浏览器给我们提供一个接口(api),可以用来获取你当前的位置.

  主要是通过geolocation(地理位置),对象 ,去访问硬件,来获取到经纬度..

1 if (navigator.geolocation){ 2   navigator.geolocation.getCurrentPosition(showPosition); 3 } else{ 4   x.innerHTML="Geolocation is not supported by this browser.";} 5 }

   我们获取到的是一个经纬度。我们调用地图。我们调用百度地图.(街景地图)

3: 拖拽
html5 里面支持拖拽
  1)当前拖拽的元素
    ondrag 应用于拖拽元素,整个拖拽过程都会调用
    ondragstart 应用于拖拽元素,当拖拽开始时调用
    ondragleave 应用于拖拽元素,当鼠标离开拖拽元素时调用
    ondragend 应用于拖拽元素,当拖拽结束时调用
  2)目标元素
    ondragenter 应用于目标元素,当拖拽元素进入时调用
    ondragover 应用于目标元素,当停留在目标元素上时调用
    ondrop 应用于目标元素,当在目标元素上松开鼠标时调用
    ondragleave 应用于目标元素,当鼠标离开目标元素时调用

4: web 存储
  我们通过sessionStorage 和 localStorage 这两个对象可以向本地保存数据。

1 setItem(key,value) 2 getItem(); 3 removeItem(); 4 clear();

  通过这个对象sessionStorage 演示了这四个方法. (设计到数据的操作就是增删改查..)
localStorage 保存数据 ;方法的一样的
sessionStorage 与 localStorage 区别
  ①localStorage 的数据永久保存
  ②sessionStorage 关闭浏览器就没有了

5:应用级别的缓存(缓存文件,css,js 图片.)
  我们新建一个html 文件 然后我要为这个html 文件制定缓存的
  首先第一步,我要新建一个 demo.appcache
  然后在html 里面引用这个 demo.appcache 文件
  manifest="demo.appcache"
  然后我们要指定缓存的数据 ,在 demo.appcache 缓存文件里面指定

第一行:
CACHE MANIFEST
我需要指定那些文件需要缓存
CACHE:
需要缓存的文件的路径
NETWORK:
那些文件需要网络才能访问.

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • HTML5 进阶系列:拖放 API 实现拖放排序 - _林鑫

    HTML5 进阶系列:拖放 API 实现拖放排序 - _林鑫

    2017-05-02 11:02

  • HTML5 进阶系列:indexedDB 数据库 - _林鑫

    HTML5 进阶系列:indexedDB 数据库 - _林鑫

    2017-04-27 14:02

  • HTML5 高级系列:web Storage - _林鑫

    HTML5 高级系列:web Storage - _林鑫

    2017-04-27 14:01

  • HTML5和CSS3 - 奔跑在起跑线佼佼者

    HTML5和CSS3 - 奔跑在起跑线佼佼者

    2017-04-20 13:00

网友点评