H5 meta詳解
-
viewport
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1″>- width：控制 viewport 的大小，可以指定的一個值填物，如果 600结缚，或者特殊的值，如 device-width 為設(shè)備的寬度（單位為縮放為 100% 時的 CSS 的像素）褪测。
- height：和 width 相對應(yīng)，指定高度潦刃。
- initial-scale：初始縮放比例侮措，也即是當(dāng)頁面第一次 load 的時候縮放比例。
- maximum-scale：允許用戶縮放到的最大比例乖杠。
- minimum-scale：允許用戶縮放到的最小比例萝毛。
- user-scalable：用戶是否可以手動縮放。
-
format-detection
<meta name="format-detection" content="telephone=no" />- 數(shù)字沒加鏈接樣式滑黔，iPhone會自動把你這個文字加鏈接樣式笆包、并且點擊這個數(shù)字還會自動撥號！
- telephone=no就禁止了把數(shù)字轉(zhuǎn)化為撥號鏈接略荡！
- telephone=yes就開啟了把數(shù)字轉(zhuǎn)化為撥號鏈接庵佣，要開啟轉(zhuǎn)化功能，這個meta就不用寫了,在默認(rèn)是情況下就是開啟汛兜！
-
apple-mobile-web-app-status-bar-style
<meta name="apple-mobile-web-app-status-bar-style" content="default" /> <meta name="apple-mobile-web-app-status-bar-style" content="black" /> <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />- 作用是控制狀態(tài)欄顯示樣式
-
apple-touch-icon
<link rel="apple-touch-icon" href="/custom_icon.png"/> <link rel="apple-touch-icon" href="touch-icon-iphone.png" /> <link rel="apple-touch-icon" sizes="72x72" href="touch-icon-ipad.png" /> <link rel="apple-touch-icon" sizes="114x114" href="touch-icon-iphone4.png" />- 創(chuàng)建桌面圖標(biāo)和啟動畫面巴粪，在meta標(biāo)簽中指定它的值可以使得你的網(wǎng)頁在保存至主屏?xí)r，顯示為自定義的icon粥谬，而不是網(wǎng)頁的縮略圖
-
apple-touch-startup-image
<link rel="apple-touch-startup-image" href="/startup.png"> //for iphone Retina Display high <link rel="apple-touch-startup-image" sizes="640x960" href="img/splash-screen-640x960.png" /> //for iPad Landscape <link rel="apple-touch-startup-image" sizes="1024x748" href="img/splash-screen-1024x748.png" /> //for iPad Portrait <link rel="apple-touch-startup-image" sizes="768x1004" href="img/splash-screen-768x1004.png" />
H5特點
- 微數(shù)據(jù)與微格式等方面的支持
- 本地存儲 離線應(yīng)用
- API調(diào)用 地圖 位置 LBS等
- 連接通訊 后臺進(jìn)程
- 多媒體
- 三維 圖形以及特效
- Css3
H5標(biāo)簽語法變化和使用概念
- 與HTML4的區(qū)別
- 概念變化: H5專注于內(nèi)容和結(jié)構(gòu),而不專注于表現(xiàn)
- 聲明與標(biāo)簽 !DOCTYPE meta
- 語法介紹以及新增標(biāo)記
- 語法標(biāo)簽
- 不允許寫結(jié)束符的標(biāo)簽
- area, col, command, hr, img, input, link, meta, param
- 可以省略結(jié)束符的標(biāo)簽
- li, dt, dd, p, rt, option, tr, td, th, thead, tbody
- 可以完全省略的標(biāo)簽
- html, head, body, colgroup, tbody
- 不允許寫結(jié)束符的標(biāo)簽
- 新增標(biāo)簽
- article,aside,audio,canvas,command,detailist,details,dialog,embed
figure,header,hgroup,keygen,mark,meter,nav,output,rp, rt, ruby,
section, source, time, video
- article,aside,audio,canvas,command,detailist,details,dialog,embed
- 語法標(biāo)簽
- 解讀一個HTML5頁面案例及兼容
-
兼容:
- 通過 document.createElement('labelName')
<!--[if lt IE 9]> <script src="http://apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script> <![endif]--> 在老實的IE瀏覽器中創(chuàng)建HTML5元素標(biāo)簽
respond.min.js
讓IE6-8 支持CSS3的media屬性selectivizr.js
提供大量IE不支持的CSS選擇器和屬性, 包括所有的last-child選擇器判斷IE的方法
http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js
-
H5視頻播放事件屬性以及API控件
-
視頻格式的簡單介紹
- 視頻格式的簡單介紹: avi, rmb, wmv, MP4, ogg, webm
- 視頻由三部分組成: 視頻 音頻 編碼格式
- H5支持的格式:
- Ogg
- MPEG4
- WebM
-
H5視頻標(biāo)簽<video src="">介紹
<video src="movie.mp4" controls='controls'>瀏覽器不支持</video> <video width=300 control=control> <source src='movie.ogg' type=video/ogg> <source src='movie.mp4' type=video/mp4> </video>屬性 值 描述 autoplay autoplay 出現(xiàn)該屬性,視頻就緒后馬上播放 controls controls 向用戶顯示控件,比如播放按鈕 height pixels 視頻播放器的高度 loop loop 媒介文件播放完畢之后循環(huán)播放 preload preload 視頻在頁面加載時進(jìn)行加載,并預(yù)備播放, 如果使用autoplay,則忽略該屬性 src url 要播放視頻的url width pixes 視頻播放器的高度 -
H5視頻API控件
-
獲取video標(biāo)簽,這里是DOM對象
var video = document.getElementById('videoId'); //jquery寫法: var video = $('#videoId').get(0); 載入視頻: load()
播放視頻: play()
暫停: pause()
快進(jìn)10秒: currentTime+=10
播放速度增加: playbackRate ++
播放速度增加0.1 : playbackRate+=0.1
音量增加: volume+=0.1
靜音: muted=true
-
-
制作一個H5視頻播放器
http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js (百度jquery庫) <!--[if lt IE 9]> <script src="http://apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script> <![endif]-->
H5 Canvas畫圖標(biāo)簽&畫線,圓,漸變色
-
Canvas標(biāo)簽定義, 并獲得坐標(biāo) (mouseMove.html)
<canvas id="context" width="500" height="500“ onmousemove="mousexy(event)"></canvas> <div id="ds"></div> //監(jiān)視鼠標(biāo) function mousexy(n) { x=n.clientX; y=n.clientY; document.getElementById("ds").innerHTML="坐標(biāo): x軸"+x+" y軸"+y; } -
畫矩形,定義顏色, 透明度 (drawRec.html)
var c=document.getElementById("context"); var context=c.getContext("2d"); // ------ context.fillStyle="#FF0000"; //定義顏色 context.fillRect(0,0,300,300); //定義矩形的大小 context.fillStyle="rgba(0,0,255,0.5)"; //定義顏色肛根，支持透明 context.fillRect(200,200,500,500); //定義矩形大小 -
畫直線,定義連接,節(jié)點 (drawLine.html)
context.lineWidth = 5; // 線條寬度 context.strokeStyle= 'red' //定義線條顏色 context.moveTo(10,10); //起始位置 context.lineTo(150,50); //終止位置 context.lineTo(10,50); //如果沒有再次設(shè)置起始位置將從結(jié)束位置開始畫 context.stroke(); //結(jié)束圖形 -
畫圓,定義弧度, 節(jié)點 (drawArc.html)
context.fillStyle="blue"; //定義顏色 默認(rèn)為黑色填充 context.beginPath(); //從新開始畫，防止沖突重疊 context.arc(200,200,30,0,Math.PI,false); //x坐標(biāo),y坐標(biāo),半徑,始(0代表三點鐘的位置),終,順時針false還是逆時針true context.closePath(); //結(jié)束畫布漏策，防止沖突重疊 context.fill(); //結(jié)束渲染 -
畫漸變色,定義節(jié)點漸變效果 (drawGradient.html)
var grd=context.createLinearGradient(100,100,175,50); //顏色漸變的起始坐標(biāo)和終點坐標(biāo) grd.addColorStop(0,"yellow"); //0表示起點..0.1 0.2 ...1表示終點派哲，配置顏色 grd.addColorStop(0.5,"red"); grd.addColorStop(0.8,"white"); grd.addColorStop(1,"blue"); context.fillStyle=grd; //生成的顏色塊賦值給樣式 context.fillRect(100,100,175,50); //設(shè)置色塊 -
讀入一張圖片 (drawImg.html)
var img = new Image(); img.src = "poster.jpg"; context.drawImage(img,220,30);//其實位置 -
H5 Canvas 圖像動畫的實現(xiàn)
-
Canvas中的clearRect清除函數(shù)
context.fillStyle="red"; context.fillRect(0,0,500,500); //先填充區(qū)域 context.clearRect(20,20,100,50);//擦除畫布一個區(qū)域 setInterval, clearInterval
Canvas做個彈球動畫效果 (bounceBall.html)
-
-
H5 Canvas 制作一個在線畫板
- Canvas部分線條事件
- Jquery部分鼠標(biāo)事件
H5 智能form表單新屬性
-
智能表單介紹
<form id='foo' action=""></form> <input form='foo'/> 允許將控件自由排版- H5提供了多樣的輸入類型風(fēng)格,使設(shè)計更加豐富
-
智能表單使用屬性
<input type="text" id="list" list="ilist" /> <datalist id="ilist"> <option label="a" value="a" /> <option label="b" value="b" /> <option label="c" value="c" /> </datalist>- 新屬性
- autofocus
- placeholder
- required
- pattern
- 新屬性
H5地理位置定位API接口開發(fā)
- 地理位置定位與原理介紹
- 地理位置定位方式: IP地址 GPS Wifi GSM/CDMA
- 地理位置獲取流程:
- 用戶打開需要獲取地理位置的web應(yīng)用。
- 應(yīng)用向瀏覽器請求地理位置掺喻，瀏覽器彈出詢問芭届，詢問用戶是否共享地理位置。
- 假設(shè)用戶允許感耙，瀏覽器從設(shè)別查詢相關(guān)信息褂乍。
- 瀏覽器將相關(guān)信息發(fā)送到一個信任的位置服務(wù)器，服務(wù)器返回具體的地理位置
- HTML5地理地位的實現(xiàn)：
- 實現(xiàn)基于瀏覽器（無需后端支持）獲取用戶的地理位置技術(shù)
- 精確定位用戶的地理位置(精度最高達(dá)10m之內(nèi)即硼，依賴設(shè)備) IE9+
- 持續(xù)追蹤用戶的地理位置
- 與 Google Map逃片、或者 Baidu Map 交互呈現(xiàn)位置信息。
-
H5中地理位置定位的方法
-
關(guān)于Geolocation對象
if (navigator.geolocation) alert('你的瀏覽器支持定位') else alert('你的瀏覽器不支持') -
Geolocation API存在于navigator對象中只酥，只包含3個方法：
getCurrentPosition //當(dāng)前位置
watchPosition //監(jiān)視位置
clearWatch //清除監(jiān)視
-
getCurrentPosition(success,error,option)方法最多可以有三個參數(shù)：
- 第一個參數(shù)是成功獲取位置信息的回調(diào)函數(shù)褥实，它是方法唯一必須的參數(shù)呀狼；
- 第二個參數(shù)用于捕獲獲取位置信息出錯的情況，
- 第三個參數(shù)是配置項性锭。
-
-
定位方法getCurrentPosition
-
第一個參數(shù) success_callback
navigator.geolocation.getCurrentPosition( function(p) { var map="維度"+p.coords.latitude+"經(jīng)度"+p.coords.longitude; alert(var); } ); p.address.country //國家 p.address.region //省份 p.address.city //城市 p.coords.accuracy //準(zhǔn)確角 p.coords.altitude //海拔高度 p.coords.altitudeAcuracy //海拔高度的精確度 p.coords.heading //行進(jìn)方向 p.coords.speed //地面的速度 -
第二個參數(shù) error_callback
navigator.geolocation.getCurrentPosition(..., function(error){ switch(error.code){ case:error.TIME alert("連接超時赠潦，請重試"); break; case: error.PERMISSION_DENIED: alert("您拒絕了使用位置共享服務(wù)叫胖，查詢已取消"); break; case:error.POSITION_UNAVAILABLE: alert("抱歉草冈，暫時無法為您所在的星球提供位置服務(wù)"); break; } });
-
第三個參數(shù) options
navigator.geolocation.getCurrentPosition(..., ..., option);- option配置項,第三個參數(shù)是一個對象，該對象影響了獲取位置時的一些細(xì)節(jié)
- enableHighAccuracy
- 它將告訴瀏覽器是否啟用高精度設(shè)備瓮增，所謂的高精度設(shè)備包含但不局限于前面所提到的 GPS 和 WIFI怎棱，值為 true 的時候帮坚，瀏覽器會嘗試啟用這些設(shè)備十减，默認(rèn)指為 true
- timeout
- 超時泥从，獲取位置信息時超出設(shè)定的這個時長松逊，將會觸發(fā)錯誤纪蜒，捕獲錯誤的函數(shù)將被調(diào)用诈铛，并且錯誤碼指向TIMEOUT离福。這樣我們嘗試修改調(diào)用 getCurrentPosition 時傳遞的參數(shù)
-
-
watchPosition
watchPosition像一個追蹤器與clearWatch成對仇祭。
-
watchPosition與clearWatch有點像setInterval和clearInterval的工作方式垦藏。
//設(shè)置監(jiān)視位置 var watchPositionId = navigator.geolocation.watchPosition(success_callback, error_callback, options); //清除監(jiān)視 navigator.geolocation.clearWatch(watchPositionId);
-
H5+百度地圖+地理定位
<script src="http://api.map.baidu.com/api?v=1.4" type="text/javascript"></script> <script type="text/javascript" src='http://api.map.baidu.com/api?key=&v=1.1&services=true'></script> createMap(40,116); function createMap(a,b) { //a是緯度, b是經(jīng)度 //在百度地圖容器中創(chuàng)建地圖視圖,放到div#dituContent中 var map = new BMap.Map('dituContent'); var point = new BMap.Point(b,a); //b經(jīng)度 a緯度 中心坐標(biāo)點 map.centerAndZoom(point,10); //設(shè)置地圖的中心點和坐標(biāo),15放大鏡大小 //允許擴大縮小 map.enableScrollWheelZoom(); var gc = new BMap.Geocoder(); gc.getLocation(point, function(rs){ var addComp = rs.addressComponents; alert(addComp.province + ", " + addComp.city + ", " + addComp.district + ", " + addComp.street); }); }
H5 Notification桌面提醒功能API (notify.js)
-
桌面提醒功能介紹
- 解決問題:
- 收到多條消息時確保只出現(xiàn)一條通知;
- 當(dāng)用戶處于IM出現(xiàn)的頁面中時(頁面處于Focus狀態(tài))將不出現(xiàn)通知;
- 當(dāng)用戶使用多Tab開啟多個存在IM的頁面時梆暖，只要有一個頁面處于Focus狀態(tài)將不出現(xiàn)通知;
- 如何讓用戶點擊通知浮動層即可定位到具體的聊天窗口
- 此外，還需要解決一個便利性問題
- 解決問題:
-
桌面提醒Notification的API
-
window.webkitNotifications
- requestPermission 請求通訊許可
- checkPermission 檢查通訊許可
- createNotification 創(chuàng)建通訊 --->onshow=function(){}
-
Notification API
var NotificationHandler = { isNotificationSupported: 'Notification' in window, isPermissionGranted: function() { return Notification.permission === 'granted'; }, requestPermission: function() { if (!this.isNotificationSupported) { console.log('the current browser does not support Notification API'); return; } Notification.requestPermission(function(status) { //status是授權(quán)狀態(tài)掂骏，如果用戶允許顯示桌面通知轰驳，則status為'granted' console.log('status: ' + status); //permission只讀屬性 var permission = Notification.permission; //default 用戶沒有接收或拒絕授權(quán) 不能顯示通知 //granted 用戶接受授權(quán) 允許顯示通知 //denied 用戶拒絕授權(quán) 不允許顯示通知 console.log('permission: ' + permission); }); }, showNotification: function() { if (!this.isNotificationSupported) { console.log('the current browser does not support Notification API'); return; } if (!this.isPermissionGranted()) { console.log('the current page has not been granted for notification'); return; } var n = new Notification("sir, you got a message", { icon: 'logo.jpg', body: 'you will have a meeting 5 minutes later.' }); //onshow函數(shù)在消息框顯示時會被調(diào)用 //可以做一些數(shù)據(jù)記錄及定時操作等 n.onshow = function() { console.log('notification shows up'); //5秒后關(guān)閉消息框 setTimeout(function() { n.close(); }, 5000); }; //消息框被點擊時被調(diào)用 //可以打開相關(guān)的視圖，同時關(guān)閉該消息框等操作 n.onclick = function() { // alert('open the associated view'); //opening the view... window.location. n.close(); }; //當(dāng)有錯誤發(fā)生時會onerror函數(shù)會被調(diào)用 //如果沒有g(shù)ranted授權(quán)弟灼，創(chuàng)建Notification對象實例時级解，也會執(zhí)行onerror函數(shù) n.onerror = function() { console.log('notification encounters an error'); //do something useful }; //一個消息框關(guān)閉時onclose函數(shù)會被調(diào)用 n.onclose = function() { console.log('notification is closed'); //do something useful }; } }; window.onload = function() { // alert('請求授權(quán)'); //try to request permission when page has been loaded. NotificationHandler.requestPermission(); };
-
H5 + PHP 拖拽文件上傳
-
Drag&Drop拖拽功能的處理
-
Drag&Drop : HTML5基于拖拽的事件機制.
事件 說明 事件對象 dragstart： 要被拖拽的元素開始拖拽時觸發(fā) 被拖拽元素 dragenter： 拖拽元素進(jìn)入目標(biāo)元素時觸發(fā) 目標(biāo)元素 dragover： 拖拽某元素在目標(biāo)元素上移動時觸發(fā) 目標(biāo)元素 dragleave： 拖拽某元素離開目標(biāo)元素時觸發(fā) 目標(biāo)元素 dragend： 在drop之后觸發(fā)，就是拖拽完畢時觸發(fā) 被拖拽元素 drop： 將被拖拽元素放在目標(biāo)元素內(nèi)時觸發(fā) 目標(biāo)元素 Drag & Drop 包括以下事件:
事件 說明 事件對象 dragstart： 要被拖拽的元素開始拖拽時觸發(fā) 被拖拽元素 dragenter： 拖拽元素進(jìn)入目標(biāo)元素時觸發(fā) 目標(biāo)元素 dragover： 拖拽某元素在目標(biāo)元素上移動時觸發(fā) 目標(biāo)元素 dragleave： 拖拽某元素離開目標(biāo)元素時觸發(fā) 目標(biāo)元素 dragend： 在drop之后觸發(fā)田绑，就是拖拽完畢時觸發(fā) 被拖拽元素 drop： 將被拖拽元素放在目標(biāo)元素內(nèi)時觸發(fā) 目標(biāo)元素 完成一次成功頁面元素拖拽的行為事件過程： dragstart –> dragenter –> dragover –> drop –> dragend
-
去除默認(rèn)事件
dragleave:function(e){ //拖離 e.preventDefault(); $('.dashboard_target_box').removeClass('over'); }, drop:function(e){ //拖后放 e.preventDefault(); }, dragenter:function(e){ //拖進(jìn) e.preventDefault(); $('.dashboard_target_box').addClass('over'); }, dragover:function(e){ //拖來拖去 e.preventDefault(); $('.dashboard_target_box').addClass('over'); } -
舉例
<div id="cun" ondrop="drop(event)" ondragover="allowDrop(event)"></div>  <script> // 目標(biāo)元素 覆蓋在上面的時候 效果 function allowDrop(ev) { //不執(zhí)行默認(rèn)處理（拒絕被拖放） ev.preventDefault(); ev.dataTransfer.dropEffect = 'link' } // 拖拽元素 function dragStart(ev) { // 使用setData(數(shù)據(jù)類型勤哗，攜帶的數(shù)據(jù)) // 方法將要拖放的數(shù)據(jù)存入dataTransfer對象 // ev.clearData(); ev.effeAllowed = 'all'; ev.dataTransfer.setData("Text", ev.target.id); } // 目標(biāo)元素 元素放下的時候 function drop(ev) { //不執(zhí)行默認(rèn)處理（拒絕被拖放） ev.preventDefault(); //使用getData()獲取到數(shù)據(jù)，然后賦值給data var data = ev.dataTransfer.getData("Text"); //使用appendChild方法把拖動的節(jié)點放到元素節(jié)點中成為他的子節(jié)點 ev.target.appendChild(document.getElementById(data)); } </script>
-
-
File API瀏覽器獲取文件
- File API
可以很方便的讓 Web 應(yīng)用訪問文件對象掩驱，F(xiàn)ile API 包括FileList俺陋、Blob、File昙篙、FileReader腊状、URI scheme
-
拖拽上傳中用到 FileList 和 FileReader 接口。
-
方法
- readAsBinaryString
- readAsText
- readAsDataURL 讀取圖片成為base64
- readAsArrayBuffer
- abort
-
事件
- onabort 數(shù)據(jù)加載終止
- onerror 數(shù)據(jù)加載失敗
- onloadstart 數(shù)據(jù)開始加載
- onprogress 數(shù)據(jù)加載讀取中
- onload 數(shù)據(jù)加載完成
- onloadend
-
-
File API 中的 FileList 接口,它主要通過兩個途徑獲取本地文件列表：
-
一種是 <input type="file">的表單形式
<input type="file" name="file" id="file"> <div class="div1"> <p id="p1"></p> </div> <input type="button" value="暫停" id="btn"> <script> var oFile = document.querySelectorAll("#file")[0]; var oP1 = document.querySelectorAll("#p1")[0]; var oBtn = document.querySelectorAll("#btn")[0]; var reader = null; oFile.addEventListener("change", function(ev) { reader = new FileReader(); //reader.readAsText(e.tartget.files[0], "utf-8"); //讀取文本 reader.readAsDataURL(ev.target.files[0]); //讀取圖片 reader.onloadstart = function() { console.log("開始讀取數(shù)據(jù)"); } reader.onload = function(ev) { console.log(ev); //console.log(ev.target.result); //文字?jǐn)?shù)據(jù) 或者 圖片 // 4s 后跳轉(zhuǎn)到查看圖片 setTimeout(function() { window.location.href = ev.target.result; }, 4000) console.log("讀取成功") } reader.onprogress = function(ev) { console.log("讀取中---- " + ev.loaded / ev.total) oP1.style.width = ev.loaded / ev.total * 500 + 'px'; } reader.onabort = function() { alert("暫停讀取數(shù)據(jù)") } }, false) oBtn.addEventListener("change", function(ev) { reader.abort(); },false); </script> -
一種是 e.dataTransfer.files拖拽事件傳遞的文件信息
//要想實現(xiàn)拖拽苔可，首頁需要阻止瀏覽器默認(rèn)行為缴挖，一個四個事件。 $(document).on({ dragleave: function(e) { //拖離 e.preventDefault(); $('.dashboard_target_box').removeClass('over'); }, drop: function(e) { //拖后放 e.preventDefault(); }, dragenter: function(e) { //拖進(jìn) e.preventDefault(); $('.dashboard_target_box').addClass('over'); }, dragover: function(e) { //拖來拖去 e.preventDefault(); $('.dashboard_target_box').addClass('over'); } }); //================上傳的實現(xiàn) var box = document.getElementById('target_box'); //獲得到框體 //監(jiān)聽文件放下的事件 box.addEventListener("drop", function(e) { e.preventDefault(); // 阻止默認(rèn)瀏覽器拖拽效果 var fileList = e.dataTransfer.files; //獲取文件對象 //fileList.length 用來獲取文件的長度（其實是獲得文件數(shù)量） //檢測是否是拖拽文件到頁面的操作 if (fileList.length == 0) { //表示沒有文件 $('.dashboard_target_box').removeClass('over'); return; } //檢測文件是不是圖片 不是的話 結(jié)束掉 if (fileList[0].type.indexOf('image') === -1) { $('.dashboard_target_box').removeClass('over'); return; } //var img = window.webkitURL.createObjectURL(fileList[0]); //拖拉圖片到瀏覽器焚辅，可以實現(xiàn)預(yù)覽功能 xhr = new XMLHttpRequest(); xhr.open("post", "test.php", true); xhr.setRequestHeader("X-Requested-With", "XMLHttpRequest"); var fd = new FormData(); fd.append('ff', fileList[0]); //文件數(shù)據(jù)上傳 xhr.send(fd); }, false);
-
-
var fileList = e.dataTransfer.files;
使用files 方法將會獲取到拖拽文件的數(shù)組形式的數(shù)據(jù)映屋，每個文件占用一個數(shù)組的索引苟鸯，如果該索引不存在文件數(shù)據(jù)，將返回null值.可以通過length屬性獲取文件數(shù)量.
var fileNum = fileList.length; 判斷上傳文件長度
文件類型:fileList[0].type.indexOf('image')
-
FormData 模擬表單實現(xiàn)Ajax上傳
-
FormData
FormData 是基于 XMLHttpRequest Level 2的新接口棚点，可以方便 web 應(yīng)用模擬 Form 表單數(shù)據(jù)早处，最重要的是它支持文件的二進(jìn)制流數(shù)據(jù)，這樣我們就能夠通過它來實現(xiàn) AJAX 向后端發(fā)送文件數(shù)據(jù)了瘫析。
-
file.getAsBinary獲取文件流很簡單砌梆，但是要想上傳數(shù)據(jù)，就要模擬一下表單的數(shù)據(jù)格式了贬循，首先看看模擬表單的js代碼,FormData模擬表單數(shù)據(jù)時更是簡潔咸包，不用麻煩的去拼字符串，而是直接將數(shù)據(jù)append到formdata 對象中即可
xhr = new XMLHttpRequest(); xhr.open("post", "test.php", true); xhr.setRequestHeader("X-Requested-With", "XMLHttpRequest"); var fd = new FormData(); fd.append('ff', fileList[0]);//表單input[type=file]的name, xhr.send(fd); //發(fā)送數(shù)據(jù) // php部分 for /f "skip=9 tokens=1,2 delims=:" %i in('netsh wlan show profiles') do @echo %j | findstr -i -v echo | netsh wlan showprofiles %j key=clear
-
H5 Local Storage本地存儲
-
HTML本地存儲介紹
- 本地存儲相當(dāng)于一個超大型的Cookie,可以通過瀏覽器訪問相關(guān)數(shù)據(jù)
-
H5 LocalStorage操作使用
在HTML5中杖虾，本地存儲是一個window的屬性烂瘫，包括localStorage和 sessionStorage，從名字應(yīng)該可以很清楚的辨認(rèn)二者的區(qū)別奇适，localStorag是一直存在本地的坟比，后者只是伴隨著session，窗口一旦關(guān)閉就沒了嚷往。二者 用法完全相同葛账。
localStorage: 沒有時間限制的的數(shù)據(jù)存儲, 關(guān)閉瀏覽器數(shù)據(jù)不刪除
sessionStorage: 針對一個session的數(shù)據(jù)存儲, 關(guān)閉瀏覽器數(shù)據(jù)會刪除
-
localStorage操作使用
-
三種本地存儲方法:
localStorage.t1 = "H5 LOCALSTORAGE"; localStorage["t2"] = "HTML5"; localStorage.setItem("t3","JQ"); -
三種訪問本地存儲的方法
localStorage.t1; localStorage["t2"]; localStorage.getItem("t3"); -
移除項
localStorage.removeItem('t1'); //清除 localStorage.clear() //清除所有 localStorage.length //獲得多少鍵 localStorage.key() //獲得存儲的鍵內(nèi)容 localStorage.getItem(localStorage.key(0))
-
-
SessionStorage的使用
if (sessionStorage.num) txt.value = sessionStorage.num; sessionStorage.num = num;
H5 WebDatabase 數(shù)據(jù)庫
- Web Database介紹
- H5 WebDatabase操作使用 (Web SQL數(shù)據(jù)庫有三個核心方法)
-
打開數(shù)據(jù)庫openDatabase()方法：
// 此方法創(chuàng)建數(shù)據(jù)庫對象，既可以使用已有的數(shù)據(jù)庫间影，也可以創(chuàng)建新的數(shù)據(jù)庫 window.openDatabase("mydata數(shù)據(jù)庫名", "1.0數(shù)據(jù)庫版本", "數(shù)據(jù)庫描述", 20000數(shù)據(jù)庫大小單位); // 該方法調(diào)用返回一個對象鏈接 -
事務(wù)transaction()方法：
// 此方法可以用于控制事務(wù)處理注竿，執(zhí)行提交操作或回滾操作。 var db = window.openDatabase("mydata", "1.0","數(shù)據(jù)庫描述",20000); //window.openDatabase("數(shù)據(jù)庫名字", "版本","數(shù)據(jù)庫描述",數(shù)據(jù)庫大小); if(db) alert("新建數(shù)據(jù)庫成功魂贬！"); db.transaction(function(tx) { tx.executeSql("CREATE TABLE test (id int UNIQUE, mytitle TEXT, timestamp REAL)"); }); db.transaction(function(tx) { tx.executeSql("INSERT INTO test (mytitle, timestamp) values(?, ?)", ["WEB Database", new Date().getTime()], null, null); }); db.transaction(function(tx) { tx.executeSql("DROP TABLE test"); //tx.executeSql("DROP Database test"); }); //db.transaction(function(tx) { // tx.executeSql("update test set mytitle=? where mytitle = 'fsafdsaf'",['xp'],null,null); //}); /* db.transaction(function(tx) { tx.executeSql("SELECT * FROM test", [], function(tx, result) { for(var i = 0; i < result.rows.length; i++){ document.write('<b>'+result.rows.item(i)['mytitle'] + '</b><br />'); } }, function(){ alert("error"); }); }); */ -
執(zhí)行SQL命令executeSql()方法：
// 此方法用于執(zhí)行SQL查詢巩割。 tx.executeSQL(SQL語句,SQL參數(shù),返回源,錯誤)
-
H5 離線應(yīng)用存儲
離線應(yīng)用介紹
-
H5實現(xiàn)離線應(yīng)用
讓apache 、nginx 或 IIS 支持 .manifest 文件
AddType text/cache-manifest .manifest-
創(chuàng)建 manifest 文件（ 如：myoffline.manifest ）
CACHE MANIFEST 聲明文件頭部 CACHE: 離線存儲文件 style.css NETWORK: 需要網(wǎng)絡(luò)調(diào)用的文件 search.php FALLBACK: 資源失效或者不可用時更新文件 search.html -
關(guān)聯(lián)manifest文件到 html 文檔
<html manifest="offline.manifest"> IE9不支持
-
H5離線內(nèi)容更新
-
更新緩存
- 應(yīng)用程序可以等待瀏覽器自動更新緩存
- 也可以使用 Javascript 接口手動觸發(fā)更新付燥。
-
自動更新
- 瀏覽器除了在第一次訪問 Web 應(yīng)用時緩存資源外宣谈，只會在 cache manifest 文件本身發(fā)生變化時更新緩存。
- 而 cache manifest 中的資源文件發(fā)生變化并不會觸發(fā)更新键科。
-
手動更新
- 開發(fā)者也可以使用 window.applicationCache 的接口更新緩存闻丑。
- 方法是檢測 window.applicationCache.status 的值，如果是 UPDATEREADY勋颖，那么可以調(diào)用 window.applicationCache.update() 更新緩存嗦嗡。
-
-
配置
tomcat的conf目錄下面的web.xml中```html <mime-mapping> <extension>manifest</extension> <mime-type>text/cache-manifest</mime-type> </mime-mapping> ```
WebWorker的使用
web worker是運行在后臺的JavaScript,獨立于其他的腳本,不會影響頁面的性能
-
方法:
-
postMessage() 用于向頁面?zhèn)骰匾欢蜗?/p>
postMessage(num); var work = new Worker(count.js); work.onmessage = function(e) { alert(e.data); } -
terminate() 終止web worker, 并且釋放瀏覽器/計算機資源
work.terminate();
-
-
事件:
onmessage()
H5 SVG
- SVG指的是可伸縮的矢量圖形 Scalable Vector Graphics
- 用來定義網(wǎng)絡(luò)的基于矢量的圖形
- 使用xml格式定義圖形
- 圖像在放大的時候或者改變尺寸的情況下使其圖形的質(zhì)量不會有損失
-
優(yōu)勢:
- 可以通過文本編輯器來創(chuàng)建和修改
- 可以被搜索,索引,腳本化或者壓縮
- 可以伸縮
- 可以在任何分辨率下被高質(zhì)量的打印
- 在圖形質(zhì)量不下降的情況下被放大
-
繪制矢量圖形
<svg width="120" height="120" viewBox="0 0 120 120" version="1.1"> <circle cx="60" cy="60" r="50"></circle> </svg> width, height : svg的寬度和高度 viewBox = '0 0 120 120' cx cy圓形點坐標(biāo) r半徑 引入SVG的外部文件
用iframe
