整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
作為程序員經常會被業務人員問一些技術相關的熱門詞，比如：“H5頁面是什么？” ， 我的回答是：“符合 HTML5 標準實現的頁面，大家為了方便，簡稱 H5“。 真的是這樣的嗎？ 當連續有人問相關的問題，并詳細了解一些業務以后，慢慢的發現 H5 已經不單單是一個技術相關的詞。
之前被我們產品人員也問到一個類似的問題：“怎么通過技術手段來判斷一個網站是H5的頁面，還是普通頁面？”，聽到這個問題我懵了，按照我前面的解釋 “符合 HTML5 標準實現的頁面就是 H5頁面”，那當前互聯網上看到的網站基本上都在采用了 HTML5 標準。詳細了解業務以后才知道，他的要求是把微信里面那種好友之間，或者朋友圈分享的那種帶有主題性質的宣傳頁面（實在是不知道怎么描述）和我們平時電腦上訪問的頁面通過技術區分識別出來。這個功能能不能實現，具體怎么實現這里不討論，但是可以看出在業務人員和一些客戶眼里，在微信上分享的那種炫酷的頁面就是H5頁面。 那這里的 H5 還是 HTML5 嗎？ 從這種應用上來說已經不是了。
另外一個案例，被一個剛開始學習前端的學生問到一個問題：“React 制作的頁面都是 SPA（single page web application，單頁應用程序） 的，那 HTML5 可以實現 SPA 嗎？”，當被問到這個問題的時候我一下子也不知道怎么回答，只是讓他先去學習一下 HTML5 ，以及 SPA 到底是什么？要搞清楚。 HTML是超文本標記語言，是一種規范，一種標準，“5” 是HTML第五次重大修改，可以理解為第五個版本，包含了很多功能特性。 SPA 是通過 HTML 與 Javscript 實現的單頁應用程序，就是在一個頁面上展示所有數據，通過 Javascript 去動態更新程序。所以 SPA 的實現和是不是 HTML5 沒有大的關系。這位同學問出這樣的問題，我的猜想是這樣的，我們在前面提到的那種在微信上分享的那種頁面大多數都是一個單頁面，然后通過手指向下滾動來瀏覽一張張炫酷的動畫。導致他認為這樣的頁面就是所謂的 SPA 頁面，再加上多數人都認為這種頁面都 HTML5 實現的頁面，所有他才會問出 HTML5 和 SPA 扯在一起。
我相信現在大多數人認為的 H5 頁面，就是在手機微信分享的那種炫酷的網頁。 HTML5，作為技術人員都知道是一種標準，一種規范。
如果 H5 不等于 HTML5 了，那 H5 到底是什么呢？ 維基百科沒有定義，百度百科也沒有定義，知乎上也沒有人說清楚。沒有一個標準的定義，只在大家口口相傳，出現各種理解扭曲。H5 真的是一個詭異的詞。
出現現在這樣個狀況，我的猜想是這樣的，HTML5 在 2013 年左右就發布，在 2014 年底宣布標準制定完成，但是市面的瀏覽器的支持主要還是在手機上，電腦上主要有 IE 的存在導致標準普及緩慢，所以開始有開發者在手機上做很多酷炫的頁面，當這些酷炫的效果在業務人員看到了以后，開始加以有效的利用，特別是在活動宣傳和廣告方面，為了宣傳業務人員會問技術人員：“這種炫酷的效果是怎么實現的？”，技術人員說:“我用的是HTML5的技術”。業務人員的宣傳營銷能力那是相當厲害，在客戶面前大量的宣傳：“我們用到了一個牛逼技術，讓你的手機網頁非常炫酷好看”，慢慢的客戶都知道了有一種技術可以把頁面在手機上做的非常好看，非常炫酷，然后客戶又開始對其他人說：“我們的這個網頁用了現在最新的技術，叫什么什么5頁面，對H5頁面”。然后客戶之間口口相傳，當以后遇到同樣的業務需求的時候，找另外一家供應商說：“我要一個H5頁面，要長的類似什么..一樣的網頁”，然后這一家做網站的公司開始也把這種網站也開始叫著H5頁面。最后鋪天蓋地的“H5頁面”就出來了。（這里只是我的一個猜想，具體是什么個情況還有待驗證）
隨后，在一些招聘崗位出現了“H5開發工程師”。
書籍出現了 《H5營銷…》。
社會上的培訓機構出現了H5技術培訓，“0基礎學習H5…”，“H5速成班”。
出現了很多專門做H5網站的公司，就連百度都有一個叫做 “百度H5”的產品。
這是一種健康的現象嗎？
我開始有點好奇那些培訓機構和相關書籍是怎么定義 H5 這個詞的。
值得高興的一件事情是，由于市場業務的推動，讓移動互聯網等到了快速的發展。甚至提高了前端開發在市場中的主要性。但是，還是存在一些問題。
培訓機構宣傳的那種 “0基礎120天速成H5工程師” … ，學員學習的應該還是的前端知識，所以這里的 H5 應該是 HTML5 標準相關體系的技術棧的培訓。市場業務把一個以活動推廣（營銷）為導向的手機上炫酷的頁面理解為 H5 頁面。這是存在一個信息不對稱的問題，這個問題也經常讓技術人員與業務人員難以溝通。
用詞不嚴謹，在國內沒有一家機構對 “H5”這個詞有合理的解釋，估計也是不好解釋。像百度這樣的 H5 產品，感覺他們把 H5 理解為創意，還有人理解為微場景，還有人理解為手機上的PPT。
把 HTML5 理解為一種技術也是不合理的，它應該是一種規范，一種標準（多次強調）。
如果 HTML6 標準發布以后怎么辦？ 是不是這些所有的名稱需要換一遍，“H5網站”，“H6開發工程師”，“H6營銷寶典”，“請問你們公司做H6嗎？” …
回頭我們再來看一下，我們看到的那些手機炫酷的網站真的全是 HTML5 新特征實現的嗎？不一定。那是不是只用 HTML5 的新特性就能夠寫出這樣的網站呢？不一定，它有時候還需要CSS3 做動畫，用JavaScript去控制行為 。
在 2012 左右，那時候還沒有發布 HTML5，不過看到了移動互聯網的苗頭，我和朋友一起開始做手機建站，主要面向一些中小型企業，客戶的需求很簡單，就是通過手機可以打開自己的官方網站，同時可以把網站上的產品隨時隨地分享給他們的客戶看（這種需求后來被響應式相關技術滿足了）。那時候人們理解這種網站就是手機網站。到現在客戶需求還是很明確，就是需要在手機上做一些博取眼球的營銷頁面，通常都是一些活動頁面。在國際上有個詞叫做 Minisite ，它的解釋是：“知名企業為了配合企業的市場運作活動，會推出一些小型網站也就是MiniSite進行線上營銷”。所以我認為當前市場上客戶所說的 H5 頁面，應該是一種移動端的 MiniSite (Mobile MiniSite)。或者把它叫做 “移動營銷頁面”，簡稱 MMP (Mobile Marketing Page) 。
不過 H5 這個詞已經很難改掉了，如果我現在繼續給客戶說，H5 是符合 HTML5 的簡稱，HTML5 是一種標準，一種規范，那我們討論的東西肯定不是同一個東西。
但是我希望，作為開發者，在一些技術解釋上不應該誤導業務人員。作為業務人員，在對外宣傳的時候也不應該誤導客戶。命名這種事情我們應該嚴謹。
本文摘自：HYPERS前端團隊博客
移動應用開發不存在’one-size-fits-all’（萬全之策）的解決方案。無論是采用混合、HTML5還是原生，許多開發者在項目的中期總會發現他們最開始采用的方法并不是最佳方案
Web和混合(Hybrid)應用正在成為熱門趨勢
Web平臺（HTML5 & JavaScript）是創建跨平臺應用的首選
一直以來，人們在將HTML5和原生SDK進行比較時，一般認為HTML5在這兩個方面處于劣勢：
APIs對手機功能和服務的訪問有限
性能這個一直是被一些開發者詬病的問題，UI響應度和數據加載速度都沒有原生應用給力
但是我們也可以看到，HTML5這兩年在這些劣勢上與原生應用的差距也在越來越小。Kendo UI團隊近日開發了兩款HTML5/Hybrid應用，然后將他們呈現給其他開發人員，讓他們判斷哪款是原生應用，哪款是混合應用。結果沒有一個開發者判斷正確，沒有一個人否定兩款應用其實都不是原生應用。
這個調查表明HTML5/Hybrid/Native三者之間的差距在越來越小，界限越來越模糊。這不僅僅體現在應用的用戶體驗上，還體現在開發過程中：越來越多的開發者在項目中期意識到要實現目標可以有其他可替代的方式，而絕不是一條道走到黑。
那么這對于大多數移動開發者來說，這意味著什么呢？這意味著開發人員需要拋棄過去對三者孰優孰劣的狹隘觀念了，擦亮你的雙眼，真正弄清楚它們各自的優勢，然后不斷的在混合、HTML5和原生開發中嘗試，只有這樣才能準確判斷哪一種方式是最佳的方案。
原生開發雖然具有性能高、可訪問手機所有功能、可線下使用等先天優勢。但在開發階段卻是困難重重，比如開發周期長、支持設備有限、上線時間不確定等問題。在今年的調查中可以看到，越來越多的開發者選擇純HTML5開發跨平臺應用，而純原生應用越來越少：
在被問到開發原生應用的中途是否又換成了HTML5應用開發，40%的人回答了”Yes”。而將這個問題反過來，31%的人回答了”Yes”。這個比例不相上下，證明其實無論是HTML5還是原生，只要適合自己的項目需求，它就是好方法。
選擇HTML5、混合和原生開發的比率在越來越均衡，但HTML5在企業級開發中的地位上升也是非常明顯的，當被問及預測HTML5何時適合進行企業級開發時，31%的人回答是”Immediately”，26%的人認為是在未來的一年之內。
當問及到2014中期你計劃用HTML5開發多少應用時，大多數開發人員（占34%）的回答是2-3個，而24%的人回答是11個以上。
你使用HTML5開發哪些類型的移動應用？超半數的被調查者選擇Business apps，占57%，Finance和Productivity應用各占21%，另外，教育、社交、醫療等應用也占較高比例。
那么在商務應用中，開發者們又具體開發了哪些應用呢？64%的人選擇了公共B2C應用，排第二的是B2E應用，占49%。
隨著越來越多的用戶從桌面/Web轉移到移動端，53%的人選擇采用HTML5創建跨平臺應用，可見HTML5已經成為跨平臺移動開發的首選。
調查顯示，35%的開發者用HTML5&JavaScript開發Web應用，而混合應用和原生應用均各占16%。
除了易用性以外，成本也是開發人員必須考慮的一大重要因素，當問及與原生應用 相比，你認為混合應用開發可以節省的時間和人力成本時，50%的受訪者認為可節省40%-70%的成本。
事實勝于雄辯，HTML5/Hybrid確實正在成為越來越多移動開發者的選擇，但絕不是未來唯一的選擇。我們應該認清，HTML5、混合及原生技術都有各自的優勢，不能單純的認為HTML5好或者原生好。而我們應該做的是根據自己的需求、定位和預算，去選擇最佳的解決方案。
.應用程序標簽
DataList(數據列表)
Progress(進度條)
Meter(數值顯示器) 示例:
<html lang="en"><head> <meta charset="UTF-8"> <title>應用程序標簽</title> <style> .my-progress{ -webkit-appearance: none; } </style></head><body><!--數據列表，呈現需要載體--><input type="text" list="data-list"><datalist id="data-list"> <option value="張三"></option> <option value="李四"></option></datalist><!--進度條--><progress></progress><!--progress默認最大值是1，可以設定自己想要的值--><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>可以利用數據列表（data-list）做一個那種帶下拉框的輸入框，可以根據用戶輸入的內容匹配下拉框的內容（select2也可以實現這種需求，而且最低可以兼容到IE8，推薦用select2）,后面的progress和meter樣式不好控制，用的不太多。
2.自定義屬性（data-*）
在html5中可以自定義數據，以data開頭，利用這個自定義標簽我們可以把屬性暫時存儲到頁面中，在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); //點擊獲取dataset屬性 liem.addEventListener("click",function(){ //下面這兩種方式均可以，都不帶data- alert(this.dataset['name']); alert(this.dataset.name); }) }</script>下面這篇文章總結的很好，可以參考：http://blog.csdn.net/qq_31851435/article/details/53100691
3.新的表單提交方式
傳統的一共有9中表單提交方式，html5新增了幾種，目前只用在移動端，pc端兼容性有問題，而且在輸入的時候并沒有進行驗證，比如類型是email的，并沒有校驗郵箱格式，還是需要我們自己手動寫正則表達式驗證的，只是在手機端當喚起輸入法的時候會自動切換到英文輸入法。
<head> <meta charset="UTF-8"> <title>新的表單提交方式</title></head><body><h3>傳統的表單提交方式（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>網址：<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>數字：<input type="number"></body>
4.新的選擇器
html5提供新的選擇器，querySelector選擇單個的元素，返回滿足條件的第一個元素，是一個dom元素，querySelectorAll選擇全部的元素，返回滿足條件的全部元素，是一個dom數組，里面可以是id，標簽或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> //匿名函數，可以將作用域分隔開 (function(){ var liem=document.querySelector(".item"); //只選擇第一個 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; //可以調試代碼。類似于瀏覽器打斷點 console.log(this.innerHTML); }) } })()</script>5.元素類列表（Element.classList）
新H5中DOM對象多了一個classList屬性，是一個數組:
add 添加一個新的類名
remove 刪除一個類名
contains 判斷是否包含一個指定的類名
toggle 切換一個類名。 element.toggle('class-name',[addorremove])，第一個參數是類名，第二個參數是布爾值，如果是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> //匿名函數 (function(){ /** 點擊時添加和刪除類名**/ 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"); } //添加點擊樣式 this.classList.add("active"); e.preventDefault(); //取消事件的默認操作 }) } /** 點擊時存在類名則刪除，不存在類名則添加**/ var elem=document.querySelector(".navbar-brand"); //點擊時如果存在active這個屬性則去掉，如果不存在這個屬性則加上 elem.addEventListener("click",function(e){ //判斷是否包含active這個類名 var isExist=elem.classList.contains("active"); this.classList.toggle("active",!isExist); e.preventDefault(); }) })()</script></body>6.訪問歷史Api
在HTML5中可以通過window.history操作訪問歷史狀態，讓一個頁面可以有多個歷史狀態
window.history.forward(); // 前進
window.history.back(); // 后退
window.history.go(); // 刷新
history.pushState(放入歷史中的狀態數據, 設置title(現在瀏覽器不支持)， 改變歷史狀態)，通過JS可以加入一個訪問狀態
<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(),"設置歷史記錄的標簽，但是目前瀏覽器還不支持","?demo="+new Date().toLocaleTimeString()); }else{ console.log("抱歉，瀏覽器不支持歷史記錄") } } //下面這個事件是點擊瀏覽器中的前進或后退時觸發 window.addEventListener("popstate",function(e){ console.log("點擊了歷史按鈕"+e.state); })</script>7.全屏Api
H5中可以用requestFullScreen()方法實現指定元素的全屏顯示（類似于瀏覽器中按F11）。首先需要獲取需要全屏顯示的元素，然后判斷瀏覽器是屬于谷歌內核還是火狐內核或者其它瀏覽器，然后調用響應方法即可。(注意：目前這個特性瀏覽器兼容性還比較差，谷歌和火狐可以)
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">點我全屏顯示</h3><p>測試全屏顯示測試全屏顯示測試全屏顯示測試全屏顯示測試全屏顯示測試全屏顯示 測試全屏顯示測試全屏顯示測試<br> 全屏顯示測試全屏顯示測試全屏顯示測試全屏顯示測試全屏顯示</p><script> //匿名函數 (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離線訪問技術
在H5中可以利用Application Cache實現離線訪問技術，測試時可以通過谷歌瀏覽器——NetWork——No throttling(Disable cache后面的那個下拉框)——下拉選擇Offline(模擬未聯網的情形)。示例如下：
html代碼：<html lang="en" manifest="cache.manifest"><head> <meta charset="UTF-8"> <title>離線訪問</title> <link rel="stylesheet" href="style.css"></head><body><p>這是html頁面中的內容</p><script src="script.js"></script></body>style.css文件代碼body::before{ content: "這是Css中引入的內容"; font-size: 40px;}script.js文件代碼：document.write("這是js中引入的內容")cache.manifest文件代碼：CACHE MANIFEST# version 1.0.1CACHE: 08離線訪問.html script.js style.cssNETWORK: *解釋：在html代碼中通過css的偽類和js的document.write函數分別輸出兩句話，模擬請求其它文件，然后在manifest（緩存清單）中定義了一個cache.manifest的緩存清單文件，文件里首先定義了當前軟件的版本，下面的CACHE，代表斷網情況下，從下面定義的文件中讀取文件，NETWORK代表聯網時候要讀取的文件，星號代表全部。即斷網時從我定義的文件中讀取文件，聯網時，讀取全部文件，這樣便可實現離線訪問。
9.web網頁存儲
h5中提供sessionStorage和localStorage兩種數據存儲方式，前者存儲的內容只在本次會話中存儲，瀏覽器關閉數據消失，后者是可以永久存儲在瀏覽器中，除非手動或通過程序刪除。這兩種存儲方式比cookie存儲的數據量大，而且可以存儲對象數據（cookie只能存儲字符串數據）。
<head> <meta charset="UTF-8"> <title>網頁存儲</title></head><body><textarea rows="5" cols="30" id="txt-data"></textarea><input type="button" value="設置數據" id="set-data"><input type="button" value="獲取數據" id="get-data"><script> (function(){ var txtValue=document.querySelector("#txt-data"); console.log(txtValue.value); //設置數據 document.querySelector("#set-data").addEventListener("click",function (e) { //判斷是否支持存儲 if(window.sessionStorage){ sessionStorage.setItem("key",txtValue.value); }else{ console.log("還在用渣渣IE嗎？升級吧。。。") } }) //獲取數據 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可以獲取文件名，大小，類型，最后修改時間等文件信息。
<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"> <!--待追加數據位置--> </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”類將文件輸入框隱藏，當點擊“選擇文件按鈕時”，調用選擇文件按鈕，選擇文件， // 因為input type="file"這個無法修改樣式，把它隱藏，點擊其它按鈕時，在其它按鈕中調用點擊上傳文件 btn_select.addEventListener("click",function(){ btn_file.click(); }) //選擇文件完成后（即文件內容發生改變后） 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的樣式，因為file表單比較丑，而且無法改變樣式，所以我們可以把文件表單隱藏（用hidden隱藏樣式），提供一個按鈕，當點擊這個按鈕時去雕砌選文件的彈框，multiple屬性支持一次選擇多個文件。
11.拖拽文件
拖拽文件時需要依次注冊以下事件：
dragenter 注冊拖拽進入事件
dragleave 注冊拖拽離開事件
dragover 注冊滑動事件（在這里面阻止默認事件）
drop 注冊松手落地事件。 在拖動松手落地事件中判斷拖進來的是文件還是圖片地址還是文字，分別進行處理。e.dataTransfer獲取拖動進來的信息。
<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"> 拖拽文件進來 <ul id="result" class="list-group"></ul> </div></div></body><script> (function(){ var target=document.querySelector("#target"); var fileList=document.querySelector('#result'); //注冊拖拽進入事件 target.addEventListener("dragenter",function(){ this.classList.add("actived"); //添加樣式 }) //注冊拖拽文件離開事件 target.addEventListener("dragleave",function(){ this.classList.remove("actived"); //添加樣式 }) //注冊落地事件之前必須要先阻止默認事件，這里在滑動里面阻止默認事件 target.addEventListener("dragover",function(e){ e.preventDefault(); //阻止默認事件 e.stopPropagation(); }) //注冊松手落地事件 target.addEventListener("drop",function(e){ //判斷拖入進來的是文件，圖片還是文字，分別處理 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'); // 創建信息的子節點 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.訪問設備信息
h5提供了許多可以訪問設備的Api，但是目前基本都應用在手機端，pc端使用非常有限。
獲取網絡狀態。
// × 所有PC瀏覽器現在都不支持 只有手機端的Firefoxvar connectionInfo=navigator.connection;或者下面這個方法：if (navigator.onLine){ console.log('online');}else{ console.log('offline');}獲取重力感應方向
window.addEventListener('deviceorientation', function(event) { var a=event.alpha; // Y軸 上下方向 var b=event.beta; // Z軸 東西方向 var g=event.gamma; // X軸 南北方向});加速度計
window.addEventListener('devicemotion', function(e) { // 獲取加速計數據 {x,y,z} var acceleration=e.accelerationIncludingGravity;});地理坐標
navigator.geolocation.getCurrentPosition(function(e) { // e.coords.longitude : 經度, 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還有其它的一些特性，包括語義化標簽，ARIA無障礙互聯網應用，多媒體（包括音頻，視頻）等等，真正使用的時候再詳細研究。
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
