那些牛掰的 HTML5的API

Posted 2020-07-25 小花喵

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:
那些文件需要网络才能访问.