那些牛掰的 HTML5的API(二)
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:
那些文件需要网络才能访问.