关于H5-CSS3(4)

关于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('您的设备不支持重力感应');
      }
  };