整合營銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
目中需要用到 html5調(diào)用手機(jī)攝像頭，找了很多資料，大都是 js調(diào)用api ，做了幾個(gè)demo測試發(fā)現(xiàn)根本不行， 后來恍然大悟，用html5自帶的 input file="" ，純html5，并且不涉及到j(luò)s ，就可以實(shí)現(xiàn)。
代碼如下：
capture表示，可以捕獲到系統(tǒng)默認(rèn)的設(shè)備，比如：camera--照相機(jī)；camcorder--攝像機(jī)；microphone--錄音。
accept表示，直接打開系統(tǒng)文件目錄。
其實(shí)html5的input:file標(biāo)簽還支持一個(gè)multiple屬性，表示可以支持多選，如：
加上這個(gè)multiple后，capture就沒啥用了，因?yàn)閙ultiple是專門用來支持多選的。
切圖網(wǎng)一個(gè)客戶的webapp項(xiàng)目中需要用到 html5調(diào)用手機(jī)攝像頭，找了很多資料，大都是 js調(diào)用api 然后怎樣怎樣，做了幾個(gè)demo測試發(fā)現(xiàn)根本不行， 后來恍然大悟，用html5自帶的 input file="" ，純html5，并且不涉及到j(luò)s ，就可以實(shí)現(xiàn)。代碼如下：
<input type="file" accept="image/*" capture="camera">
<input type="file" accept="video/*" capture="camcorder">
<input type="file" accept="audio/*" capture="microphone">
capture表示，可以捕獲到系統(tǒng)默認(rèn)的設(shè)備，比如：camera--照相機(jī)；camcorder--攝像機(jī)；microphone--錄音。
accept表示，直接打開系統(tǒng)文件目錄。
其實(shí)html5的input:file標(biāo)簽還支持一個(gè)multiple屬性，表示可以支持多選，如：
<input type="file" accept="image/*" multiple>
加上這個(gè)multiple后，capture就沒啥用了，因?yàn)閙ultiple是專門yong用來支持多選的。
切圖社區(qū)（qietu.cn）原創(chuàng)。
.應(yīng)用程序標(biāo)簽
DataList(數(shù)據(jù)列表)
Progress(進(jìn)度條)
Meter(數(shù)值顯示器) 示例:
<html lang="en"><head> <meta charset="UTF-8"> <title>應(yīng)用程序標(biāo)簽</title> <style> .my-progress{ -webkit-appearance: none; } </style></head><body><!--數(shù)據(jù)列表，呈現(xiàn)需要載體--><input type="text" list="data-list"><datalist id="data-list"> <option value="張三"></option> <option value="李四"></option></datalist><!--進(jìn)度條--><progress></progress><!--progress默認(rèn)最大值是1，可以設(shè)定自己想要的值--><progress class="my-progress" value="30" max="100"></progress><meter min="0" max="100" low="40" high="90" optimum="100" value="91">A+</meter></body>可以利用數(shù)據(jù)列表（data-list）做一個(gè)那種帶下拉框的輸入框，可以根據(jù)用戶輸入的內(nèi)容匹配下拉框的內(nèi)容（select2也可以實(shí)現(xiàn)這種需求，而且最低可以兼容到IE8，推薦用select2）,后面的progress和meter樣式不好控制，用的不太多。
2.自定義屬性（data-*）
在html5中可以自定義數(shù)據(jù)，以data開頭，利用這個(gè)自定義標(biāo)簽我們可以把屬性暫時(shí)存儲到頁面中，在js中可以使用，例子如下：
<html lang="en"><head> <meta charset="UTF-8"> <title>data屬性</title></head><body> <ul id="list"> </ul></body><script> // 鍵是ID 值是信息 var data={ 01: { name: "張三1", age: 18 }, 02: { name: "張三2", age: 19 }, 03: { name: "張三3", age: 20 } }; var list=document.getElementById("list"); for(var id in data){ var item=data[id]; var liem=document.createElement("li"); liem.innerHTML=item.name; //自定義data-*屬性 liem.setAttribute("data-name",item.name); liem.setAttribute("data-age",item.age); list.appendChild(liem); //點(diǎn)擊獲取dataset屬性 liem.addEventListener("click",function(){ //下面這兩種方式均可以，都不帶data- alert(this.dataset['name']); alert(this.dataset.name); }) }</script>下面這篇文章總結(jié)的很好，可以參考：http://blog.csdn.net/qq_31851435/article/details/53100691
3.新的表單提交方式
傳統(tǒng)的一共有9中表單提交方式，html5新增了幾種，目前只用在移動端，pc端兼容性有問題，而且在輸入的時(shí)候并沒有進(jìn)行驗(yàn)證，比如類型是email的，并沒有校驗(yàn)郵箱格式，還是需要我們自己手動寫正則表達(dá)式驗(yàn)證的，只是在手機(jī)端當(dāng)喚起輸入法的時(shí)候會自動切換到英文輸入法。
<head> <meta charset="UTF-8"> <title>新的表單提交方式</title></head><body><h3>傳統(tǒng)的表單提交方式（9種）</h3>用戶名：<input type="text"> <br>密碼：<input type="password"><br>性別：<input type="radio"><br>課程:<input type="checkbox"><br>隱藏：<input type="hidden">文件：<input type="file"><br>按鈕：<input type="button" value="按鈕"><br>表單:<input type="submit"><br>重置：<input type="reset"><br><hr><h3>新的表單提交方式（目前只用在移動端）</h3>顏色：<input type="color"><br>網(wǎng)址：<input type="url"><br>搜索：<input type="search" results="10" placeholder="Search..."><br>郵箱：<input type="email" pattern="^\*.com"><br>日期：<input type="date" min="2015-09-01" max="2018-09-01"><br>圖片：<input type="image"><br>范圍：<input type="range" min="0" max="50" value="10"><br>數(shù)字：<input type="number"></body>
4.新的選擇器
html5提供新的選擇器，querySelector選擇單個(gè)的元素，返回滿足條件的第一個(gè)元素，是一個(gè)dom元素，querySelectorAll選擇全部的元素，返回滿足條件的全部元素，是一個(gè)dom數(shù)組，里面可以是id，標(biāo)簽或class類。
<html lang="en"><head> <meta charset="UTF-8"> <title>新選擇器</title></head><body><h3>新選擇器</h3><ul> <li class="item">item1</li> <li class="item">item2</li> <li class="item">item3</li> <li class="item">item4</li> <li class="item">item5</li> <li class="item">item6</li> <li class="item">item7</li> <li class="item">item8</li> <li class="item">item9</li> <li class="item">item10</li></ul></body><script> //匿名函數(shù)，可以將作用域分隔開 (function(){ var liem=document.querySelector(".item"); //只選擇第一個(gè) console.log(liem.innerHTML); var lis=document.querySelectorAll("ul>li"); //選擇全部 for(var i=0;i<lis.length;i++){ console.log(lis[i]); lis[i].addEventListener("click",function(){ debugger; //可以調(diào)試代碼。類似于瀏覽器打斷點(diǎn) console.log(this.innerHTML); }) } })()</script>5.元素類列表（Element.classList）
新H5中DOM對象多了一個(gè)classList屬性，是一個(gè)數(shù)組:
add 添加一個(gè)新的類名
remove 刪除一個(gè)類名
contains 判斷是否包含一個(gè)指定的類名
toggle 切換一個(gè)類名。 element.toggle('class-name',[addorremove])，第一個(gè)參數(shù)是類名，第二個(gè)參數(shù)是布爾值，如果是true，則添加類名，如果是false,則去掉類名。示例：
<head> <meta charset="UTF-8"> <title>元素類列表</title> <link rel="stylesheet" href="css/bootstrap.css"></head><body><div class="container"> <div class="collapse navbar-collapse"> <nav class="navbar navbar-default"> <a class="navbar-brand" href="#">Brand</a> <ul class="nav navbar-nav"> <li><a href="#">Home</a></li> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> </ul> </nav> </div></div><script> //匿名函數(shù) (function(){ /** 點(diǎn)擊時(shí)添加和刪除類名**/ var lis=document.querySelectorAll(".nav li"); for(var i=0;i<lis.length;i++){ lis[i].addEventListener("click",function(e){ //去掉原先所有的樣式 for(var j=0;j<lis.length;j++){ lis[j].classList.remove("active"); } //添加點(diǎn)擊樣式 this.classList.add("active"); e.preventDefault(); //取消事件的默認(rèn)操作 }) } /** 點(diǎn)擊時(shí)存在類名則刪除，不存在類名則添加**/ var elem=document.querySelector(".navbar-brand"); //點(diǎn)擊時(shí)如果存在active這個(gè)屬性則去掉，如果不存在這個(gè)屬性則加上 elem.addEventListener("click",function(e){ //判斷是否包含active這個(gè)類名 var isExist=elem.classList.contains("active"); this.classList.toggle("active",!isExist); e.preventDefault(); }) })()</script></body>6.訪問歷史Api
在HTML5中可以通過window.history操作訪問歷史狀態(tài)，讓一個(gè)頁面可以有多個(gè)歷史狀態(tài)
window.history.forward(); // 前進(jìn)
window.history.back(); // 后退
window.history.go(); // 刷新
history.pushState(放入歷史中的狀態(tài)數(shù)據(jù), 設(shè)置title(現(xiàn)在瀏覽器不支持)， 改變歷史狀態(tài))，通過JS可以加入一個(gè)訪問狀態(tài)
<head> <meta charset="UTF-8"> <title>歷史記錄</title></head><body><input type="button" value="測試歷史記錄" onclick="addHistory()"></body><script> //添加歷史記錄 function addHistory(){ //判斷瀏覽器是否支持歷史記錄，畢竟是h5的新特性，低版本瀏覽器不支持 if(window.history && history.pushState){ //支持 history.pushState(new Date().toLocaleDateString(),"設(shè)置歷史記錄的標(biāo)簽，但是目前瀏覽器還不支持","?demo="+new Date().toLocaleTimeString()); }else{ console.log("抱歉，瀏覽器不支持歷史記錄") } } //下面這個(gè)事件是點(diǎn)擊瀏覽器中的前進(jìn)或后退時(shí)觸發(fā) window.addEventListener("popstate",function(e){ console.log("點(diǎn)擊了歷史按鈕"+e.state); })</script>7.全屏Api
H5中可以用requestFullScreen()方法實(shí)現(xiàn)指定元素的全屏顯示（類似于瀏覽器中按F11）。首先需要獲取需要全屏顯示的元素，然后判斷瀏覽器是屬于谷歌內(nèi)核還是火狐內(nèi)核或者其它瀏覽器，然后調(diào)用響應(yīng)方法即可。(注意：目前這個(gè)特性瀏覽器兼容性還比較差，谷歌和火狐可以)
var elem=需要全屏的元素;if (elem.webkitRequestFullScreen) { elem.webkitRequestFullScreen();} else if (elem.mozRequestFullScreen) { elem.mozRequestFullScreen();} else if (elem.requestFullScreen){ elem.requestFullScreen();}<head> <meta charset="UTF-8"> <title>全屏顯示</title></head><body><h3 style="cursor: pointer">點(diǎn)我全屏顯示</h3><p>測試全屏顯示測試全屏顯示測試全屏顯示測試全屏顯示測試全屏顯示測試全屏顯示 測試全屏顯示測試全屏顯示測試<br> 全屏顯示測試全屏顯示測試全屏顯示測試全屏顯示測試全屏顯示</p><script> //匿名函數(shù) (function () { //獲取事件源和要全屏顯示的元素 var elem=document.querySelector("p"); document.querySelector("h3").addEventListener("click",function(e){ //判斷瀏覽器是否支持全屏顯示 if (elem.webkitRequestFullScreen) { elem.webkitRequestFullScreen(); } else if (elem.mozRequestFullScreen) { elem.mozRequestFullScreen(); } else if (elem.requestFullScreen){ elem.requestFullScreen(); }else{ console.log("瀏覽器不支持全屏顯示") } }); })()</script></body>8.Application Cache離線訪問技術(shù)
在H5中可以利用Application Cache實(shí)現(xiàn)離線訪問技術(shù)，測試時(shí)可以通過谷歌瀏覽器——NetWork——No throttling(Disable cache后面的那個(gè)下拉框)——下拉選擇Offline(模擬未聯(lián)網(wǎng)的情形)。示例如下：
html代碼：<html lang="en" manifest="cache.manifest"><head> <meta charset="UTF-8"> <title>離線訪問</title> <link rel="stylesheet" href="style.css"></head><body><p>這是html頁面中的內(nèi)容</p><script src="script.js"></script></body>style.css文件代碼body::before{ content: "這是Css中引入的內(nèi)容"; font-size: 40px;}script.js文件代碼：document.write("這是js中引入的內(nèi)容")cache.manifest文件代碼：CACHE MANIFEST# version 1.0.1CACHE: 08離線訪問.html script.js style.cssNETWORK: *解釋：在html代碼中通過css的偽類和js的document.write函數(shù)分別輸出兩句話，模擬請求其它文件，然后在manifest（緩存清單）中定義了一個(gè)cache.manifest的緩存清單文件，文件里首先定義了當(dāng)前軟件的版本，下面的CACHE，代表斷網(wǎng)情況下，從下面定義的文件中讀取文件，NETWORK代表聯(lián)網(wǎng)時(shí)候要讀取的文件，星號代表全部。即斷網(wǎng)時(shí)從我定義的文件中讀取文件，聯(lián)網(wǎng)時(shí)，讀取全部文件，這樣便可實(shí)現(xiàn)離線訪問。
9.web網(wǎng)頁存儲
h5中提供sessionStorage和localStorage兩種數(shù)據(jù)存儲方式，前者存儲的內(nèi)容只在本次會話中存儲，瀏覽器關(guān)閉數(shù)據(jù)消失，后者是可以永久存儲在瀏覽器中，除非手動或通過程序刪除。這兩種存儲方式比cookie存儲的數(shù)據(jù)量大，而且可以存儲對象數(shù)據(jù)（cookie只能存儲字符串?dāng)?shù)據(jù)）。
<head> <meta charset="UTF-8"> <title>網(wǎng)頁存儲</title></head><body><textarea rows="5" cols="30" id="txt-data"></textarea><input type="button" value="設(shè)置數(shù)據(jù)" id="set-data"><input type="button" value="獲取數(shù)據(jù)" id="get-data"><script> (function(){ var txtValue=document.querySelector("#txt-data"); console.log(txtValue.value); //設(shè)置數(shù)據(jù) document.querySelector("#set-data").addEventListener("click",function (e) { //判斷是否支持存儲 if(window.sessionStorage){ sessionStorage.setItem("key",txtValue.value); }else{ console.log("還在用渣渣IE嗎？升級吧。。。") } }) //獲取數(shù)據(jù) document.querySelector("#get-data").addEventListener("click",function (e) { //判斷是否支持存儲 if(window.sessionStorage){ txtValue.value=sessionStorage.getItem("key"); }else{ console.log("還在用渣渣IE嗎？升級吧。。。") } }) })()</script></body>10.操作文件Api
通過file表單選擇文件，之后利用h5提供的文件api可以獲取文件名，大小，類型，最后修改時(shí)間等文件信息。
<html lang="en"><head> <meta charset="UTF-8"> <title>操作文件</title> <link rel="stylesheet" href="css/bootstrap.css"></head><body> <div class="container"> <form> <input type="file" class="form-control hidden" id="btn_file" multiple> <input type="button" value="選擇文件" class="btn btn-success" id="btn_select"> <div class="list-group" id="ul_list"> <!--待追加數(shù)據(jù)位置--> </div> </form> </div></body><script> (function(){ var btn_file=document.querySelector("#btn_file"); var btn_select=document.querySelector("#btn_select"); var ul_list=document.querySelector("#ul_list"); //利用“hidden”類將文件輸入框隱藏，當(dāng)點(diǎn)擊“選擇文件按鈕時(shí)”，調(diào)用選擇文件按鈕，選擇文件， // 因?yàn)閕nput type="file"這個(gè)無法修改樣式，把它隱藏，點(diǎn)擊其它按鈕時(shí)，在其它按鈕中調(diào)用點(diǎn)擊上傳文件 btn_select.addEventListener("click",function(){ btn_file.click(); }) //選擇文件完成后（即文件內(nèi)容發(fā)生改變后） btn_file.addEventListener("change",function(e){ var files=btn_file.files; //獲取所有文件，并遍歷 for(var i=0;i<files.length;i++){ console.log(files[i]); var liem=document.createElement("li"); liem.setAttribute("class","list-group-item"); liem.innerHTML=' <h4 class="list-group-item-heading">'+files[i].name+'</h4>'+ '<p class="list-group-item-text">'+files[i].lastModifiedDate.toLocaleTimeString()+' '+(files[i].size/1024).toFixed(2)+'kb</p>' ul_list.appendChild(liem); } }) })()</script>這里是用到了bootstrap的樣式，因?yàn)閒ile表單比較丑，而且無法改變樣式，所以我們可以把文件表單隱藏（用hidden隱藏樣式），提供一個(gè)按鈕，當(dāng)點(diǎn)擊這個(gè)按鈕時(shí)去雕砌選文件的彈框，multiple屬性支持一次選擇多個(gè)文件。
11.拖拽文件
拖拽文件時(shí)需要依次注冊以下事件：
dragenter 注冊拖拽進(jìn)入事件
dragleave 注冊拖拽離開事件
dragover 注冊滑動事件（在這里面阻止默認(rèn)事件）
drop 注冊松手落地事件。 在拖動松手落地事件中判斷拖進(jìn)來的是文件還是圖片地址還是文字，分別進(jìn)行處理。e.dataTransfer獲取拖動進(jìn)來的信息。
<head> <meta charset="UTF-8"> <title>拖拽文件</title> <link rel="stylesheet" href="css/bootstrap.css"> <style> #target{ height: 200px; border: 5px dashed #c0c0c0; color: #505050; padding: 20px; font-size: 40px; cursor: pointer; text-align: center; -webkit-user-select: none; } #target.actived{ border-color: #888; color: #080808; box-shadow: 0 0 80px #e0e0e0 inset; } </style></head><body><div class="container"> <div class="page-header"> <h3>拖拽文件</h3> </div> <div class="jumbotron"> <p>我們這里測試拖拽文件</p> <img src="test.png"> </div> <div id="target"> 拖拽文件進(jìn)來 <ul id="result" class="list-group"></ul> </div></div></body><script> (function(){ var target=document.querySelector("#target"); var fileList=document.querySelector('#result'); //注冊拖拽進(jìn)入事件 target.addEventListener("dragenter",function(){ this.classList.add("actived"); //添加樣式 }) //注冊拖拽文件離開事件 target.addEventListener("dragleave",function(){ this.classList.remove("actived"); //添加樣式 }) //注冊落地事件之前必須要先阻止默認(rèn)事件，這里在滑動里面阻止默認(rèn)事件 target.addEventListener("dragover",function(e){ e.preventDefault(); //阻止默認(rèn)事件 e.stopPropagation(); }) //注冊松手落地事件 target.addEventListener("drop",function(e){ //判斷拖入進(jìn)來的是文件，圖片還是文字，分別處理 if(e.dataTransfer.files.length){ //拖入的是文件 var files=e.dataTransfer.files; for (var i=0; i < files.length; i++) { var li=document.createElement('li'); li.setAttribute('class', 'list-group-item'); // 創(chuàng)建信息的子節(jié)點(diǎn) li.innerHTML='<h5 class="list-group-item-heading">' + files[i].name + '</h5><p class="list-group-item-text">' + files[i].lastModifiedDate.toLocaleDateString() + ' ' + files[i].lastModifiedDate.toLocaleTimeString() + ' ' + (files[i].size / 1024).toFixed(2) + 'KB</p>'; fileList.appendChild(li); } }else{ //不是文件 var data=e.dataTransfer.getData('text/plain'); //判斷拖入的是文本還是圖片 if(data){ //拖入的是文本,直接置換 target.innerHTML=data; }else{ //拖入的是圖片 var imgElem=document.createElement("img"); imgElem.src=data; target.appendChild(imgElem); } } }) })()</script>12.訪問設(shè)備信息
h5提供了許多可以訪問設(shè)備的Api，但是目前基本都應(yīng)用在手機(jī)端，pc端使用非常有限。
獲取網(wǎng)絡(luò)狀態(tài)。
// × 所有PC瀏覽器現(xiàn)在都不支持 只有手機(jī)端的Firefoxvar connectionInfo=navigator.connection;或者下面這個(gè)方法：if (navigator.onLine){ console.log('online');}else{ console.log('offline');}獲取重力感應(yīng)方向
window.addEventListener('deviceorientation', function(event) { var a=event.alpha; // Y軸 上下方向 var b=event.beta; // Z軸 東西方向 var g=event.gamma; // X軸 南北方向});加速度計(jì)
window.addEventListener('devicemotion', function(e) { // 獲取加速計(jì)數(shù)據(jù) {x,y,z} var acceleration=e.accelerationIncludingGravity;});地理坐標(biāo)
navigator.geolocation.getCurrentPosition(function(e) { // e.coords.longitude : 經(jīng)度, e.coords.latitude : 緯度 document.querySelector('#result').innerHTML=JSON.stringify(e.coords);}, function(e) { document.querySelector('#result').innerHTML=JSON.stringify(e);});navigator.geolocation.watchPosition(success, error);H5還有其它的一些特性，包括語義化標(biāo)簽，ARIA無障礙互聯(lián)網(wǎng)應(yīng)用，多媒體（包括音頻，視頻）等等，真正使用的時(shí)候再詳細(xì)研究。
*請認(rèn)真填寫需求信息，我們會在24小時(shí)內(nèi)與您取得聯(lián)系。
