關于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('您的設備不支持重力感應');
}
};