关于H5-CSS3
1:CSS3基础运动:transition:1s all ease 2s;
高级运动
1:自定动画
@keyframes test{
from{}
to{}
0%{}
100%{}
}
animation:test linear 1s infinite;
animation-duration:1s; 运动时间
animation-name:test; 名字
animation-timing-function:linear; 运动形式
animation-iteration-count:2; 运动次数
infinite 无限次数
animation-delay:2s; 延迟执行
animation-play-state:paused; 暂停
animate.css(样式文档)
文档：http://www.jq22.com/demo/animate-141106223642/
一些样式库：csdn w3cplus daqianduan
2:地理信息
1:移动端的都有：
社交 微信 微博 陌陌 QQ
团购 美团 外卖 滴滴 优步
大数据——分析
2:定位原理
phone GPS
pc IP地址
3:获取具体失败原因
ev.code 错误代码
0 未知错误
1 用户拒绝
2 获取失败 goole api
3 超时
4:ev.message 错误信息描述
1.设备是否支持
if(navigator.geolocation){
alert('此设备支持');
}else{
alert('此设备不支持');
}
2.获取位置
if(navigator.geolocation){
navigator.geolocation.getCurrentPosition(fn,fn);
}else{
alert('此设备不支持');
}
5:获取信息
alert(ev.coords);
alert(ev.coords.longitude); //经度
alert(ev.coords.latitude); //纬度
alert(ev.coords.accuracy); //精确度 少于60不可用
alert(ev.coords.altitude); //海拔高度
alert(ev.coords.altitudeAccuracy); //海拔精确度
alert(ev.coords.heading); //朝向
alert(ev.coords.speed); //速度
clearwatch() //清除位置
3:百度地图
http://lbsyun.baidu.com/
百度地图秘钥
EAc9690e060a06cfe50a260d491afd15
地图JS部分写法：
window.onload=function (){
var oBox=document.getElementById('box');
if(navigator.geolocation){
navigator.geolocation.getCurrentPosition(function (ev){
//生成地图
var map=new BMap.Map('box');
//设置中心点 以及缩放
var point=new BMap.Point(ev.coords.longitude,ev.coords.latitude);
map.centerAndZoom(point,15);
//添加标注
var marker=new BMap.Marker(point);
map.addOverlay(marker);
},function (){
alert('获取失败');
});
}else{
alert('您的设备不支');
}
};
4:多线程——webWorker
1:单线程：前一个操作没做完，后一个没发开始
2:多线程：可以同时进行多个操作
好处：充分利用cpu资源
主线程：加载页面，渲染，css渲染，jsDOM树生成
子线程：由webWorker创建出，进行一些计算
创建子线程
var oW=new Worker('文件名');
给子级传数据
oW.postMessage(data);
子级接收数据
this.onmessage=function (ev){
ev.data 接收到的数据
给父级传数据
this.postMessage(ev.data+5);
};
父级接收
oW.onmessage=function (ev){
ev.data
};
子线程里面不能操以下两个东西
DOM
BOM
子线程里面不能再去创建子线程
不能跨域
主线程和子线程之间数据不是共享，每次都是复制一份数据
结束子线程操作：oW.terminate();
5:webSql ———— 前端数据库
数据库安全吗？ 数据库一点都安全
webSql数据库 大小5M
1.开启一个数据
var db=openDatabase(数据库名,数据库版本,数据库描述,数据库申请容量);
2.开启事务
事务：原子性
要么成功，要么失败
3.SQL语句
CREATE //创建
INSERT //插入
SELECT //删除
4:websql的代码写法如下：
<script>
var db=openDatabase('test','1.0.0','play and test',200);
db.transaction(function (tx){
//tx 事务上下文
tx.executeSql('SELECT * FROM news',[],function (tx,result){
document.write('<ul>');
for(var i=0; i<result.rows.length; i++){
document.write('<li><strong>'+result.rows[i].user+'</strong><span>'+result.rows[i].pass+'</span></li>');
}
document.write('</ul>');
},function (tx,err){
console.log(err);
});
});
</script>
6:重力感应 ————需要在手机端测试
window.DeviceMotionEvent
方向有：x轴 y轴 z轴
window.addEventListener('devicemotion',function (ev){
var acc=ev.accelerationIncludingGravity;
acc.x
acc.y
acc.z
},false);
简单的重力感应代码：
CSS写法代码如下：
div{ width:200px; height:200px; background:#ccc; position:absolute; left:50%; top:50%;
margin:-100px 0 0 -100px; color:#fff; text-align:center; line-height:66px; }
JS写法代码如下：
window.onload=function (){
var oDiv=document.getElementById('div1');
if(window.DeviceMotionEvent){
window.addEventListener('devicemotion',function (ev){
var acc=ev.accelerationIncludingGravity;
oDiv.innerHTML='X:'+acc.x+'<br />Y:'+acc.y+'<br />Z:'+acc.x;
},false);
}else{
alert('您的设备不支持重力感应');
}
};