關(guān)于H5-CSS3
1:CSS3基礎(chǔ)運動: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; 運動次數(shù)
infinite 無限次數(shù)
animation-delay:2s; 延遲執(zhí)行
animation-play-state:paused; 暫停
animate.css(樣式文檔)
文檔：http://www.jq22.com/demo/animate-141106223642/
一些樣式庫：csdn w3cplus daqianduan
2:地理信息
1:移動端的都有：
社交 微信 微博 陌陌 QQ
團購 美團 外賣 滴滴 優(yōu)步
大數(shù)據(jù)——分析
2:定位原理
phone GPS
pc IP地址
3:獲取具體失敗原因
ev.code 錯誤代碼
0 未知錯誤
1 用戶拒絕
2 獲取失敗 goole api
3 超時
4:ev.message 錯誤信息描述
1.設(shè)備是否支持
if(navigator.geolocation){
alert('此設(shè)備支持');
}else{
alert('此設(shè)備不支持');
}
2.獲取位置
if(navigator.geolocation){
navigator.geolocation.getCurrentPosition(fn,fn);
}else{
alert('此設(shè)備不支持');
}
5:獲取信息
alert(ev.coords);
alert(ev.coords.longitude); //經(jīng)度
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');
//設(shè)置中心點 以及縮放
var point=new BMap.Point(ev.coords.longitude,ev.coords.latitude);
map.centerAndZoom(point,15);
//添加標(biāo)注
var marker=new BMap.Marker(point);
map.addOverlay(marker);
},function (){
alert('獲取失敗');
});
}else{
alert('您的設(shè)備不支');
}
};
4:多線程——webWorker
1:單線程：前一個操作沒做完，后一個沒發(fā)開始
2:多線程：可以同時進行多個操作
好處：充分利用cpu資源
主線程：加載頁面，渲染敏弃，css渲染，jsDOM樹生成
子線程：由webWorker創(chuàng)建出薄声，進行一些計算
創(chuàng)建子線程
var oW=new Worker('文件名');
給子級傳數(shù)據(jù)
oW.postMessage(data);
子級接收數(shù)據(jù)
this.onmessage=function (ev){
ev.data 接收到的數(shù)據(jù)
給父級傳數(shù)據(jù)
this.postMessage(ev.data+5);
};
父級接收
oW.onmessage=function (ev){
ev.data
};
子線程里面不能操以下兩個東西
DOM
BOM
子線程里面不能再去創(chuàng)建子線程
不能跨域
主線程和子線程之間數(shù)據(jù)不是共享鸣奔，每次都是復(fù)制一份數(shù)據(jù)
結(jié)束子線程操作：oW.terminate();
5:webSql ———— 前端數(shù)據(jù)庫
數(shù)據(jù)庫安全嗎？ 數(shù)據(jù)庫一點都安全
webSql數(shù)據(jù)庫 大小5M
1.開啟一個數(shù)據(jù)
var db=openDatabase(數(shù)據(jù)庫名,數(shù)據(jù)庫版本,數(shù)據(jù)庫描述,數(shù)據(jù)庫申請容量);
2.開啟事務(wù)
事務(wù)：原子性
要么成功脐彩，要么失敗
3.SQL語句
CREATE //創(chuàng)建
INSERT //插入
SELECT //刪除
4:websql的代碼寫法如下：
<script>
var db=openDatabase('test','1.0.0','play and test',200);
db.transaction(function (tx){
//tx 事務(wù)上下文
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:重力感應(yīng) ————需要在手機端測試
window.DeviceMotionEvent
方向有：x軸 y軸 z軸
window.addEventListener('devicemotion',function (ev){
var acc=ev.accelerationIncludingGravity;
acc.x
acc.y
acc.z
},false);
簡單的重力感應(yīng)代碼：
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('您的設(shè)備不支持重力感應(yīng)');
}
};