HTML5
1. geolocation 定位
原理
PC端:通过IP地址定位(精度差),需使用IP库(百度下载);
Chrome 通过google定位IP,所以不翻墙就无法完成定位;
IE 通过微软(microsoft)定位,测试通常使用IE;
定位以域名为单位,只要允许\拒绝一次,该域名下所有网址全部被允许\拒绝;
测试时不能使用文件域;
//核心代码
//geolocation存在于navigator中,而不是window,
//geolocation中getCurrentPosition方法只获取一次位置 适用于定位,
//watchPositionf方法会一直获取位置 适用于导航,
//clearWatch方法取消位置监视
navigator.geolocation.getCurrentPosition(res=>{
//用户同意即为成功;
//res中有coords中有经纬度,用来定位;
//使用百度开放地图中获取的代码;
//页面中引入1.2版本的API
//获取的代码中生成百度地图的JS代码放在此处;
alert('成功')
},err=>{
alert('失败')
});
移动端: 通过GPS定位(精度高);
2. video、audio 音频
3. localStorage 类似cookie的存储
cookie: 存储比较小(4k),数据浏览器跟服务器共享;
localStorage: 存储比较大(5M,以域为单位储存),数据浏览器独享,没有过期时间;
(-)sessionStorage: 仅在会话期间存储数据,浏览器一旦被关闭就没了(通常不用);
//核心代码
localStorage.a=12;//把a存到localStorage;
var a = localStorage.a;//得到存储的a;
delete localStorage.a;//删除存储的a;
//遍历
for(let i=0;i<localStorage.length;i++){
let key = localStorage.key(i);//此处需要使用key函数获得存储的所有key,localStorage自身函数不会被遍历;
alert(`${key}:${localStorage[key]}`);
}
//localStorage常用用途:保存草稿
//监听文本域的oninput事件,将文本域的内容存到localStorage中;
//下次在进入该页面时将localStorage中的内容放到文本域中;
//用户发送后,清空存储的localStorage;
4. (-)WebWorker 在Web端实现多进程工作模式
//核心代码
//html script代码
let oW = new Worker('1.js');//指定接收数据的JS,每个worker对应一个独立的JS文件
.postMessage(12);//发送了数据12,多个数据可使用JSON发送
oW.onmessage = function (ev){
alert(ev.data);//接收1.js发送回来的数据
}
//1.js代码
this.onmessage = function (ev){
alert(ev.data);
this.postMessage(ev.data+3);//向HTML发送数据15
}
5. (-)WebSQL,IndexedDB 前端数据库,安全性很差,已经被W3C删除了;
6. FileReader 文件拖拽,文件操作(参考2-8);
7. canvas 位图(失真) H5标准,常用于图表、游戏、处理图像(添加滤镜等操作)
//核心代码
//canvas标签,宽高必须写在行内
<canvas id = 'c1' width='800' height='800'></canvas>;
//js代码
window.onload = function (){
//获取页面上的canvas标签
let oC = document.getElementById('c1');
//获取图形上下文接口:包含所需属性、函数
let gd = oC.getContext('2d');
//路径操作 选中一个范围
gd.moveTo(470,81);//起点
gd.lineTo(778,236);//连接
gd.lineTo(532,411);//连接
gd.lineTo(312,259);//连接
gd.closePath();//系统自动闭合,无需手动处理闭合路径,或者使用gd.lineTo(470,81);//手动闭合路径;
gd.beginPath();//清除之前开启的路径,防止两次路径重复渲染
gd.react();//画矩形
gd.arc();//画圆,参数为:圆心,半径,弧度开始,弧度结束,逆时针
gd.stroke();//对选取进行描边
gd.fill();//对选取进行填充
gd.lineWidth=10;//设置边线宽度为10
gd.strokeStyle='red';//设置边线的颜色;
gd.fillStyle='red';//设置填充的颜色;
gd.strokeRect();//直接画一个矩形线框
gd.fillRect();//直接填充一个矩形线框
gd.clearRect();//清除一个矩形线框
}
SVG 矢量图(不失真) 独立标准
VML 矢量图(不失真) IE的矢量图解决方案
8. manifest文件 在前端控制缓存
9. CSS3
扩展
百度开放平台
http://lbsyun.baidu.com/
开发文档=>地图生成器=>自行调整=>获取代码;
获取的代码中引入的百度地图api2.0版本需要使用密匙;
修改版本改为1.2即可;1.2版本是免费开放;
修改代码中的坐标为res.coords.;
修改new BMap.Map("omap")omap改成自己容器DIV的ID;
网友评论