如果您想訂閱本博客內(nèi)容，每天自動發(fā)到您的郵箱中， 請點這里

說到前端, 大家第一反應(yīng)是不是都是vue、react、webpack等這些大大小小的框架或者工具, 但其實這些都是和js相關(guān)的, 真正的樣式會被大家忽略。其實真正呈現(xiàn)給大家看到華麗的頁面, 都是樣式才讓他們多了那份色彩。那么大家覺得簡單的css樣式, 真的簡單么? 讓我們一起來看下, 開啟css的入坑之旅, 今天一起跟大家簡單聊聊盒模型的相關(guān)問題......

如果您想訂閱本博客內(nèi)容，每天自動發(fā)到您的郵箱中， 請點這里

一、Ajax的XMLHttpRrequest對象

Ajax的核心是XMLHttpRequest對象（發(fā)送異步請求、接受響應(yīng)及執(zhí)行回調(diào)），它是ajax實現(xiàn)的關(guān)鍵

XMLHttpRequest對象的open()方法與send()方法

請求類型，GET 還是 POST？

與 POST 相比，GET 更簡單也更快，并且在大部分情況下都能用。

然而，在以下情況中，請使用 POST 請求：

• 無法使用緩存文件（更新服務(wù)器上的文件或數(shù)據(jù)庫）
• 向服務(wù)器發(fā)送大量數(shù)據(jù)（POST 沒有數(shù)據(jù)量限制）
• 發(fā)送包含未知字符的用戶輸入時，POST 比 GET 更穩(wěn)定也更可靠

(1). GET請求

(2). POST請求

async參數(shù)設(shè)置

XMLHttpRequest對象如果要用于AJAX的話，其open()方法的async參數(shù)必須設(shè)置為true

通過 AJAX，JavaScript 無需等待服務(wù)器的響應(yīng)，而是：

• 在等待服務(wù)器響應(yīng)時執(zhí)行其他腳本
• 當(dāng)響應(yīng)就緒后對響應(yīng)進(jìn)行處理

(1). 當(dāng)使用 async=true 時，請規(guī)定在響應(yīng)處于 onreadystatechange 事件中的就緒狀態(tài)時執(zhí)行的函數(shù)：

(2). 當(dāng)您使用 async=false 時，請不要編寫 onreadystatechange 函數(shù) - 把代碼放到 send() 語句后面即可：

服務(wù)器響應(yīng)

使用 XMLHttpRequest 對象的 responseText 或 responseXML 屬性。

(1). 如果來自服務(wù)器的響應(yīng)并非 XML，請使用 responseText 屬性。

responseText 屬性返回字符串形式的響應(yīng)，因此您可以這樣使用：

document.getElementById("myDiv").innerHTML=xmlhttp.responseText;

(2). 如果來自服務(wù)器的響應(yīng)是 XML，而且需要作為 XML 對象進(jìn)行解析，請使用 responseXML 屬性

[javascript] view plain copy

1. xmlDoc=xmlhttp.responseXML;  
2. txt="";  
3. x=xmlDoc.getElementsByTagName("ARTIST");  
4. for (i=0;i<x.length;i++)  
5.   {  
6.   txt=txt + x[i].childNodes[0].nodeValue + "<br />";  
7.   }  
8. document.getElementById("myDiv").innerHTML=txt;  

onreadystatechange事件

當(dāng)請求被發(fā)送到服務(wù)器時，我們需要執(zhí)行一些基于響應(yīng)的任務(wù)。

每當(dāng) readyState 改變時，就會觸發(fā) onreadystatechange 事件。readyState 屬性存有 XMLHttpRequest 的狀態(tài)信息。

下面是 XMLHttpRequest 對象的三個重要的屬性：

Ajax()函數(shù)示例：

• 定義一個函數(shù)，用于異步獲取信息

[javascript] view plain copy

1. function Ajax(){  
2.     //code  
3. }  

• 聲明一個空對象來裝入XMLHttpRequest對象

[javascript] view plain copy

1. var xmlHttpReq = null;  

• 給XMLHttpRequest對象賦值

[javascript] view plain copy

1. if(window.ActiveXObject){  
2.     xmlHttpReq = new ActiveXObject("Microsoft.XMLHTTP");  
3. }else if(window.XMLHttpRequest){  
4.     xmlHttpReq = new XMLHttpRequest();  
5. }  

IE5、IE6是以ActiveXObject的方式引入XMLHttpRequest對象的，而其他瀏覽器的XMLHttpRequest對象是window的子對象。

• • 實例化后，使用open()方法初始化XMLHttpRequest對象，指定HTTP方法和要使用的服務(wù)器URL

[javascript] view plain copy

1. xmlHttpReq.open("GET","test.php",true);  

• 因為要做一個異步調(diào)用，所以需要注冊一個XMLHttpRequest對象將調(diào)用的回調(diào)事件處理器當(dāng)做它的readystate值改變時調(diào)用。當(dāng)readyState值改變時，會激發(fā)一個readystatechange事件，可以使用onreadystatechange屬性來注冊該回調(diào)事件處理器。

[javascript] view plain copy

1. xmlHttpReq.onreadystatechange = RequestCallBack;  

• 使用send()方法發(fā)送請求，因為這個請求使用的是HTTP的“GET”方式，所以可以在不指定參數(shù)或使用null參數(shù)的情況下調(diào)用send()方法

[javascript] view plain copy

1. xmlHttpReq.send(null);  

當(dāng)請求改變時，XMLHttpRequest對象調(diào)用onreadystatechange屬性注冊的事件處理器，因此在處理該響應(yīng)前，事件處理器首先應(yīng)該檢查readyState的值和HTTP的狀態(tài)。當(dāng)請求完成加載時（readyState==4）并且已經(jīng)響應(yīng)成功（status==200）時，就可以調(diào)用JavaScript函數(shù)來處理該響應(yīng)內(nèi)容。

[javascript] view plain copy

1. function RequestCallBack(){  
2.     if (xmlHttpReq.readyState == 4) {  
3.         if (xmlHttpReq.status == 200) {  
4.             //將xmlHttpReq.responText的值賦予id為resText的元素  
5.             document.getElementById('resText').innerHTML = xmlHttpReq.responText;  
6.         }  
7.     }  
8. }  

二、jQuery中的Ajax

jQuery對Ajax操作進(jìn)行了封裝，在jQuery中$.ajax()方法屬于最底層的方法，第2層是load()、$.get()、$.post()方法，第3層是$.getScript()、$.getJSON()方法

1、load()方法    通常用來從WEB服務(wù)器上獲取靜態(tài)的數(shù)據(jù)文件

最常用的Ajax方法，能載入遠(yuǎn)程HTML代碼并插入DOM中

load(url[,data][,callback]);

• url：String    請求HTML頁面的URL地址
• data：Object    發(fā)送至服務(wù)器的key/value數(shù)據(jù)
• callback：Function    請求完成時的回調(diào)函數(shù)，無論請求成功或失敗

[javascript] view plain copy

1. $(function(){  
2.     $("#send").click(function(){  
3.         $("#resText").load("test.html");  
4.     })  
5. })  

[javascript] view plain copy

1. <button type="button" id="send">ajax加載</button>  
2. <div class="comment">已有評論：</div>  
3. <div id="resText">替換內(nèi)容</div>  

test.html代碼為：

[javascript] view plain copy

1. <div class="comment">  
2.     <h6>張三：</h6>  
3.     <p class="para">沙發(fā)</p>  
4. </div>  
5. <div class="comment">  
6.     <h6>李四：</h6>  
7.     <p class="para">板凳</p>  
8. </div>  
9. <div class="comment">  
10.     <h6>王五：</h6>  
11.     <p class="para">地板</p>  
12. </div>  

篩選載入的HTML文檔

load()方法的URL參數(shù)的語法結(jié)構(gòu)為：“url selector”

[javascript] view plain copy

1. $("#resText").load("test.html .para");  

load()傳遞方式根據(jù)參數(shù)data自動指定，沒有參數(shù) --> GET，反之為POST   

[javascript] view plain copy

1. // 無參數(shù)傳遞 GET  
2. $("#resText").load("test.html",function(){  
3.     //code  
4. });  
5. // 有參數(shù)傳遞 POST  
6. $("#resText").load("test.html",{name:"rain",age:"22"},function(){  
7.     //code  
8. });  

回調(diào)函數(shù)：有三個參數(shù)，請求返回的內(nèi)容、請求狀態(tài)、XMLHttpRequest對象

[javascript] view plain copy

1. // 回調(diào)函數(shù)  
2. $("#resText").load("test.html",function(responseText,textStatus,XMLHttpRequest){  
3.     //responseText  請求返回的內(nèi)容  
4.     //textStatus    請求狀態(tài)：success、error、notmodified、timeout  
5.     //XMLHttpRequest    XMLHttpRequest對象  
6. });  

2、$.get()和$.post()方法    jQuery中的全局函數(shù)

2.1 $.get()    使用GET方式來進(jìn)行異步請求

[javascript] view plain copy

1. $.get(url[,data][,callback][,type]);  

• url：String    請求HTML頁面的URL地址
• data：Object    發(fā)送至服務(wù)器的key/value數(shù)據(jù)會作為QueryString附加到請求URL中
• callback：Function    載入成功時回調(diào)函數(shù)（只有當(dāng)response的返回狀態(tài)是success才調(diào)用該函數(shù)）自動將請求結(jié)果和狀態(tài)傳遞給該方法
• type：服務(wù)器返回內(nèi)容的格式，包括html、xml、script、json、text、_default

[javascript] view plain copy

1. $("#send").click(function(){  
2.     $.get("get1.php",{  
3.         username:$("#username").val(),  
4.         content:$("#comment").val()  
5.     },function(data,textStatus){  
6.         // data：返回的內(nèi)容  
7.         // textStatus：請求狀態(tài)，success、error、notmodified、timeout  
8.     })  
9. })  

數(shù)據(jù)格式：服務(wù)器返回的數(shù)據(jù)格式

（1）HTML片段    較少工作量

[javascript] view plain copy

1. $.get("get1.php",{  
2.     username:$("#username").val(),  
3.     content:$("#comment").val()  
4. },function(data,textStatus){  
5.     // data：返回的內(nèi)容  
6.     // textStatus：請求狀態(tài)，success、error、notmodified、timeout  
7.     $("#resText").html(data);   //將返回的數(shù)據(jù)添加到頁面上  
8. });  

（2） XML文檔    需要對返回的數(shù)據(jù)處理

方便使用

可以通過attr()、find()、filter()方法對數(shù)據(jù)進(jìn)行處理

[javascript] view plain copy

1. $("#send").click(function(){  
2.     $.get("get1.php", {   
3.         username :  $("#username").val() ,   
4.         content :  $("#content").val()    
5.     }, function (data, textStatus){  
6.         var username = $(data).find("comment").attr("username");  
7.         var content = $(data).find("comment content").text();  
8.         var txtHtml = "<div class='comment'><h6>"+username  
9.                     +":</h6><p class='para'>"+content+"</p></div>";  
10.         $("#resText").html(txtHtml); // 把返回的數(shù)據(jù)添加到頁面上  
11.     });  
12. })  

由于期待服務(wù)器返回的數(shù)據(jù)類型為XML文檔，因此需要在服務(wù)期端設(shè)置Content-Type類型

[javascript] view plain copy

1. header("Content-Type:text/html; charset=utf-8");  

（3）JSON文件    需要對返回的數(shù)據(jù)處理

JSON相對于XML比較簡潔

[javascript] view plain copy

1. $("#send").click(function(){  
2.     $.get("get3.php", {   
3.         username :  $("#username").val() ,   
4.         content :  $("#content").val()    
5.     }, function (data, textStatus){  
6.         var username = data.username;  
7.         var content = data.content;  
8.         var txtHtml = "<div class='comment'><h6>"+username  
9.                     +":</h6><p class='para'>"+content+"</p></div>";  
10.         $("#resText").html(txtHtml); // 把返回的數(shù)據(jù)添加到頁面上  
11.     },"json");  
12. })  

以上三種方法對比：

HTML返回數(shù)據(jù)最簡單，如果數(shù)據(jù)需要重用使用JSON（性能與文件大小方面有優(yōu)勢），當(dāng)遠(yuǎn)程程序未知時使用XML。

2.2 $.post()    通過 HTTP POST 請求從服務(wù)器上請求數(shù)據(jù)

[javascript] view plain copy

1. $.post(URL[,data][,callback]);  

• url：String    請求的URL地址
• data：Object    發(fā)送至服務(wù)器的key/value數(shù)據(jù)
• callback：Function    載入成功時的回調(diào)函數(shù)

由于POST和GET方式提交的所有數(shù)據(jù)都可以通過$_REQUEST[]來獲取，因此只需要改變jQuery函數(shù)，就可以將程序在GET請求和POST請求之間切換。

當(dāng)load()方法帶有參數(shù)傳遞時，會使用POST方式發(fā)送請求。因此也可以使用load()方法來完成同樣的功能。

$.post()與$.get()方法的區(qū)別：

• GET請求會將參數(shù)跟在URL后進(jìn)行傳遞，而POST請求則是作為HTTP消息的實體內(nèi)容發(fā)送給Web服務(wù)器。當(dāng)然，在Ajax請求中，這種區(qū)別對用戶是不可見的。
• GET方式對傳輸?shù)臄?shù)據(jù)有大小限制（通常不能大于2KB），而使用POST方式傳遞的數(shù)據(jù)量要比GET方式大得多（理論上不受限制）。
• GET方式請求的數(shù)據(jù)會被瀏覽器緩存起來，因此其他人就可以從瀏覽器的歷史記錄中讀取到這些數(shù)據(jù)，例如賬號和密碼等。在某種情況下，GET方式會帶來嚴(yán)重的安全性問題，而POST方式相對來說就可以避免這些問題。
• GET方式和POST方式傳遞的數(shù)據(jù)在服務(wù)器端的獲取也不相同。在PHP中，GET方式的數(shù)據(jù)可以用$_GET[]獲取，而POST方式可以用$_POST[]獲取。兩種方式都可以用$_REQUEST[]來獲取。

      上面使用load()、$.get()和$.post()方法完成了一些常規(guī)的Ajax程序，如果還需要編寫一些復(fù)雜的Ajax程序，那么就要用到j(luò)Query中的$.ajax()方法。$.ajax()方法不僅能實現(xiàn)與load()、$.get()和$.post()方法同樣的功能，而且還可以設(shè)定beforeSend（提交前回調(diào)函數(shù)）、error（請求失敗后處理）、success（請求成功后處理）以及complete（請求完成后處理）回調(diào)函數(shù)，通過這些回調(diào)函數(shù)，可以給用戶更多的Ajax提示信息。另外，還有一些參數(shù)，可以設(shè)置Ajax請求的超時時間或者頁面的“最后更改”狀態(tài)等。

3、$.getScript()和$.getJSON()方法

3.1 $.getScript()

有時候，在頁面初次加載時就取得所需的全部JavaScript文件是完全沒有必要的。雖然可以在需要哪個JavaScript文件時，動態(tài)地創(chuàng)建<script>標(biāo)簽

[javascript] view plain copy

1. $(document.createElement("script").attr("src","test.js")).appenChild("head");  
2. //或  
3. $("<script type='text/javscript' src='test.js'></script>").appendChild("head");  

上述方法不理想，jQuery又提供了$.getScript()方法

[javascript] view plain copy

1. $(function(){  
2.     $("#btn").click(function(){  
3.         $.getScript("test.js");  
4.     })  
5. })  

有回調(diào)函數(shù)

[javascript] view plain copy

1. $.getScript("test.js",function(){  
2.     $(element).click(function(){  
3.         $(element).animate({backgroundcolor:'pink'},1000)  
4.         .animate({backgroundcolor:'coral'},1000);  
5.     })  
6. });  

3.2 $.getJSON()方法    用于加載JSON文件，用法同$.getScript()方法

[javascript] view plain copy

1. $(function(){  
2.     $("#btn").click(function(){  
3.         $.getJSON("test.json");  
4.     })  
5. })  

上面函數(shù)雖然加載了JSON代碼，但是并沒有告訴JS對返回的數(shù)據(jù)如何處理，所以需要回調(diào)函數(shù)

[javascript] view plain copy

1. $(function(){  
2.     $("#btn").click(function(){  
3.         $.getJSON("test.json",function(){  
4.             //data：返回的數(shù)據(jù)  
5.         });  
6.     })  
7. })  

jQuery遍歷方法  -->  $.each()方法    遍歷對象和數(shù)組

$.each(data,callback)    // 為全局函數(shù)   不同于each()方法

• data：數(shù)組或?qū)ο?

• callback：回調(diào)函數(shù)，有兩個參數(shù)（對象的成員或數(shù)組的索引，對應(yīng)變量或內(nèi)容）

4、$.ajax()方法    jQuery最底層的Ajax實現(xiàn)

$.ajax(options);

前面用到的$.load()、$.get()、$.post()、$.getScript()和$.getJSON()這些方法，都是基于$.ajax()方法構(gòu)建的，$.ajax()方法是jQuery最底層的Ajax實現(xiàn)，因此可以用它來代替前面的所有方法。

[javascript] view plain copy

1. $(function(){  
2.     $("#btn").click(function(){  
3.         $.getScript("test.js");  
4.     })  
5. })  

可被替換為

[javascript] view plain copy

1. $(function(){  
2.     $("#btn").click(function(){  
3.         $.ajax({  
4.             type:"GET",  
5.             url:"test.js",  
6.             dataType:"script"  
7.         });  
8.     });  
9. })  

[javascript] view plain copy

1. $(function(){  
2.     $("#btn").click(function(){  
3.         $.getJSON("test.json",function(data){  
4.                 $("#resText").empty();  
5.                 var html = " ";  
6.                 $.each(data,function(commentIndex,comment){  
7.                     html+='<div class="comment"><h6>'+comment['username']  
8.                          +'</h6><p class="para">'+comment['content']  
9.                          +'</p></div>'  
10.                 })  
11.                 $("resText").html(html);  
12.             }  
13.         });  
14.     });  
15. })  

可被替換為

[javascript] view plain copy

1. $(function(){  
2.     $("#btn").click(function(){  
3.         $.ajax({  
4.             type:"GET",  
5.             url:"test.json",  
6.             dataType:"json",  
7.             success:function(data){  
8.                 $("#resText").empty();  
9.                 var html = " ";  
10.                 $.each(data,function(commentIndex,comment){  
11.                     html+='<div class="comment"><h6>'+comment['username']  
12.                          +'</h6><p class="para">'+comment['content']  
13.                          +'</p></div>'  
14.                 })  
15.                 $("resText").html(html);  

1. })

} }); });

三、序列化元素

1．serialize()方法

異步提交表單，并將服務(wù)器返回的數(shù)據(jù)顯示到當(dāng)前頁面中

[javascript] view plain copy

1. $.get("get1.php",{  
2.     username:$("#username").val(),  
3.     content:$("#comment").val()  
4. },function(data,textStatus){  
5.     // data：返回的內(nèi)容  
6.     // textStatus：請求狀態(tài)，success、error、notmodified、timeout  
7.     $("#resText").html(data);   //將返回的數(shù)據(jù)添加到頁面上  
8. });  

serialize()方法也是作用于一個jQuery對象，它能夠?qū)OM元素內(nèi)容序列化為字符串，用于Ajax請求?？蓪⑸鲜龃a簡化為：

[javascript] view plain copy

1. $.get("get1.php",$("#form1").serialize(),function(data,textStatus){  
2.     // data：返回的內(nèi)容  
3.     // textStatus：請求狀態(tài)，success、error、notmodified、timeout  
4.     $("#resText").html(data);   //將返回的數(shù)據(jù)添加到頁面上  
5. });  

serialize()方法作用于jQuery對象，所以不光只有表單能使用它，其他選擇器選取的元素也都能使用它，如以下jQuery代碼：

[javascript] view plain copy

1. $(":checkbox,:radio").serialize();  

把復(fù)選框和單選框的值序列化為字符串形式，只會將選中的值序列化。

2．serializeArray()方法

該方法不是返回字符串，而是將DOM元素序列化后，返回JSON格式的數(shù)據(jù)

3．$.param()方法

它是serialize()方法的核心，用來對一個數(shù)組或?qū)ο蟀凑誯ey/value進(jìn)行序列化。

比如將一個普通的對象序列化：

四、jQuery中的全局事件

jQuery簡化Ajax操作不僅體現(xiàn)在調(diào)用Ajax方法和處理響應(yīng)方面，而且還體現(xiàn)在對調(diào)用Ajax方法的過程中的HTTP請求的控制。通過jQuery提供的一些自定義全局函數(shù)，能夠為各種與Ajax相關(guān)的事件注冊回調(diào)函數(shù)。例如當(dāng)Ajax請求開始時，會觸發(fā)ajaxStart()方法的回調(diào)函數(shù)；當(dāng)Ajax請求結(jié)束時，會觸發(fā)ajaxStop()方法的回調(diào)函數(shù)。這些方法都是全局的方法，因此無論創(chuàng)建它們的代碼位于何處，只要有Ajax請求發(fā)生時，就會觸發(fā)它們。

有時，當(dāng)網(wǎng)頁加載過慢時，就需要為網(wǎng)頁添加一個提示信息，常用的提示信息是“加載中…”，代碼如下：

[javascript] view plain copy

1. <div class="loading">加載中...</div>  

然后通過CSS控制元素隱藏，當(dāng)Ajax請求開始的時候，將此元素顯示，用來提示用戶Ajax請求正在進(jìn)行。當(dāng)Ajax請求結(jié)束后，將此元素隱藏。

[javascript] view plain copy

1. $("$loading").ajaxStart(function(){  
2.     $(this).show();  
3. }).ajaxStop(function(){  
4.     $(this).hide();  
5. });  

jQuery的Ajax全局事件中還有幾個方法，也可以在使用Ajax方法的過程中為其帶來方便。

方法名稱	說明
ajaxComplete(callback)	Ajax請求完成時執(zhí)行的函數(shù)
ajaxError(callback)	Ajax請求發(fā)生錯誤時執(zhí)行的函數(shù)，捕捉到的錯誤可以作為最后一個參數(shù)傳遞
ajaxSend(callback)	Ajax請求發(fā)送前執(zhí)行的函數(shù)
ajaxSuccess(callback)	Ajax請求成功時執(zhí)行的函數(shù)

注意：

1，如果想使某個Ajax請求不受全局方法的影響，那么可以在使用$.ajax(options)方法時，將參數(shù)中的global設(shè)置為false，jQuery代碼如下

[javascript] view plain copy

1. $.ajax({  
2.     url:"test.html",  
3.     global:false  
4. });  

2，在jQuery1.5版本之后，如果Ajax請求不觸發(fā)全局方法，那么可以設(shè)置：

[javascript] view plain copy

1. $.ajaxPrefilter(function(options){  
2.     options.global = true;  
3. })  

藍(lán)藍(lán)設(shè)計( www.yvirxh.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)

如果您想訂閱本博客內(nèi)容，每天自動發(fā)到您的郵箱中， 請點這里

<?php echo <<<_END <!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
    <title>點標(biāo)記</title>
    <link rel="stylesheet" />
    <style>
        .marker {
            color: #ff6600; padding: 4px 10px;
            border: 1px solid #fff; white-space: nowrap;
            font-size: 12px;
            font-family: "";
            background-color: #0066ff;  } </style>
    <script src="http://webapi.amap.com/maps?v=1.3&key=您申請的key值"></script>
    <script type="text/javascript" src="http://cache.amap.com/lbs/static/addToolbar.js"></script>
</head>
<body>
<div id="container"></div>
<script> var marker, map = new AMap.Map("container", {
        resizeEnable: true, center: [126.60580555556, 45.702363888889], zoom: 13 }); var getJSON = function(url) { return new Promise(function(resolve, reject) { var xhr = new XMLHttpRequest();
        xhr.open('get', url, true);
        xhr.responseType = 'json';
        xhr.onload = function() { var status = xhr.status; if (status == 200) {
            resolve(xhr.response);
          } else {
            reject(status);
          }
        };
        xhr.send();
      });
    };

    getJSON('http://web.cellpies.com/api/driving/getVehicleLocationPoints?vehicleDeviceId=0400000000030603&timeType=4&startTime=2017-03-17%2013:00:00&stopTime=2017-03-17%2014:00:00').then(function(jdata) { //alert('Your Json result is:  ' + jdata); //you can comment this, i used it to debug
        //alert(jdata.data[0].gpsx);
        //alert(jdata.data[0].gpsy); window.i=0; //addMarker(jdata.data[i].gpsx,jdata.data[i].gpsy); setInterval(function () { addMarker(jdata.data[window.i].gpsx,jdata.data[window.i].gpsy); },"1000");

    }, function(status) { //error detection.... alert('Something went wrong.');
    }); // 實例化點標(biāo)記 function addMarker(v1,v2) {

     window.i+=10;
        marker = new AMap.Marker({
            icon: "http://webapi.amap.com/theme/v1.3/markers/n/mark_b.png", position: [v1,v2]
        });
        marker.setMap(map);
    } </script>
</body>
</html>

</script>
</body>
</html> _END; ?>

<?php echo<<<_END <!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
    <title>點標(biāo)記</title>
    <link rel="stylesheet" />
    <style>
        .marker {
            color: #ff6600; padding: 4px 10px;
            border: 1px solid #fff; white-space: nowrap;
            font-size: 12px;
            font-family: "";
            background-color: #0066ff;  } </style>
    <script src="http://webapi.amap.com/maps?v=1.3&key=您申請的key值"></script>
    <script type="text/javascript" src="http://cache.amap.com/lbs/static/addToolbar.js"></script>
</head>
<body>
<div id="container"></div>
<script> var marker, map = new AMap.Map("container", {
        resizeEnable: true, center: [126.60580555556, 45.702363888889], zoom: 13 }); var getJSON = function(url) { return new Promise(function(resolve, reject) { var xhr = new XMLHttpRequest();
        xhr.open('get', url, true);
        xhr.responseType = 'json';
        xhr.onload = function() { var status = xhr.status; if (status == 200) {
            resolve(xhr.response);
          } else {
            reject(status);
          }
        };
        xhr.send();
      });
    };

    getJSON('http://web.cellpies.com/api/driving/getVehicleLocationPoints?vehicleDeviceId=0400000000030603&timeType=4&startTime=2017-03-17%2013:00:00&stopTime=2017-03-17%2014:00:00').then(function(jdata) {
        addMarker(jdata.data[0].gpsx,jdata.data[0].gpsy);
        window.i=1; //updateMarker(jdata.data[1].gpsx,jdata.data[1].gpsy); setInterval(function () { updateMarker(jdata.data[window.i].gpsx,jdata.data[window.i].gpsy); },"1000");

    }, function(status) { //error detection.... alert('Something went wrong.');
    }); // 實例化點標(biāo)記 function addMarker(v1,v2) {

        marker = new AMap.Marker({
            icon: "http://webapi.amap.com/theme/v1.3/markers/n/mark_b.png", position: [v1,v2]
        });
        marker.setMap(map);
    } function updateMarker(v1,v2) { //在地圖上更新標(biāo)記
        // 自定義點標(biāo)記內(nèi)容 window.i+=10; var markerContent = document.createElement("div"); // 點標(biāo)記中的圖標(biāo) var markerImg = document.createElement("img");
        markerImg.className = "markerlnglat";
        markerImg.src = "http://webapi.amap.com/theme/v1.3/markers/n/mark_r.png";
        markerContent.appendChild(markerImg); // 點標(biāo)記中的文本 var markerSpan = document.createElement("span");
        markerSpan.className = 'marker';
        markerSpan.innerHTML = "Hi，我換新裝備啦！";
        markerContent.appendChild(markerSpan);

        marker.setContent(markerContent); //更新點標(biāo)記內(nèi)容 marker.setPosition([v1,v2]); //更新點標(biāo)記位置  } </script>
</body>
</html>

</script>
</body>
</html> _END; ?>

如果您想訂閱本博客內(nèi)容，每天自動發(fā)到您的郵箱中， 請點這里

javascript部分

document.getElementsByName("inputName")(1) 改為 document.getElementsByName("inputName")[1]
    


        

            1
        

    

onMouseMove = "functionName(event)" function functionName (e) { e = e || window.event;
    ......
}
    


        

            1
        

        

            2
        

        

            3
        

        

            4
        

        

            5
        

    

window.top.document.getElementById("testFrame").src = 'xx.htm' window.top.frameName.location = 'xx.htm'
    


        

            1
        

        

            2
        

    

<form> <table> <input/> </table> </form>
    


        

            1
        

        

            2
        

        

            3
        

        

            4
        

        

            5
        

    

document.getElementById("frameName").(document.)elementName
window.frames["frameName"].elementName
    


        

            1
        

        

            2
        

    

window.frames["frameName"].contentWindow.document.elementName window.frames["frameName"].document.elementName
    


        

            1
        

        

            2
        

    

var source = e.target || e.srcElement; var target = e.relatedTarget || e.toElement;
    


        

            1
        

        

            2
        

    

IE: obj.onselectstart = function() {return false;}
FF: -moz-user-select:none;
    


        

            1
        

        

            2
        

    

IE: obj.setCapture(); obj.releaseCapture(); FF: window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP); window.releaseEvents(Event.MOUSEMOVE|Event.MOUSEUP); if (!window.captureEvents) {
           o.setCapture(); }else {
           window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP); }
    if (!window.captureEvents) {
           o.releaseCapture(); }else {
           window.releaseEvents(Event.MOUSEMOVE|Event.MOUSEUP); }
    


        

            1
        

        

            2
        

        

            3
        

        

            4
        

        

            5
        

        

            6
        

        

            7
        

        

            8
        

        

            9
        

        

            10
        

        

            11
        

        

            12
        

        

            13
        

        

            14
        

        

            15
        

        

            16
        

    

.float_bottom { clear:both; font-size:0px; margin:0; line-height:0px; }
    


        

            1
        

        

            2
        

        

            3
        

        

            4
        

        

            5
        

        

            6
        

    

#box { float:left; width:100px; margin:0 0 0 100px; //這種情況之下IE會產(chǎn)生200px的距離 display:inline; //使浮動忽略 }
    


        

            1
        

        

            2
        

        

            3
        

        

            4
        

        

            5
        

        

            6
        

    

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml">
    


        

            1
        

        

            2
        

    

IE: filter: progid: DXImageTransform.Microsoft.Alpha(style=0,opacity=60); IE: filter: alpha(opacity=10); FF: opacity:0.6; FF: -moz-opacity:0.10;
    


        

            1
        

        

            2
        

        

            3
        

        

            4
        

    

//向table追加一個空行：
var   row   =   otable.insertRow(-1); var   cell   =   document.createElement("td"); cell.innerHTML = "   ";  cell.className = "XXXX";  row.appendChild(cell);
    


        

            1
        

        

            2
        

        

            3
        

        

            4
        

        

            5
        

        

            6
        

    

FF： -moz-border-radius:4px，或者-moz-border-radius-topleft:4px;-moz-border- radius-topright:4px;-moz-border-radius-bottomleft:4px;-moz-border-radius- bottomright:4px;。
    


        

            1
        

    

IE：border:2px   outset;。 
FF： -moz-border-top-colors: #d4d0c8 white;-moz-border-left-colors: #d4d0c8 white;-moz-border-right-colors:#404040 #808080;-moz-border-bottom-colors:#404040 #808080;
    


        

            1
        

        

            2
        

    

//mf if (window.XMLHttpRequest)  //mf {
    xmlhttp=new XMLHttpRequest()
    xmlhttp.onreadystatechange=xmlhttpChange
    xmlhttp.open("GET",url,true)
    xmlhttp.send(null)
    } //ie else if (window.ActiveXObject)  //   code   for   IE {
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP") if (xmlhttp)
        {
        xmlhttp.onreadystatechange=xmlhttpChange
        xmlhttp.open("GET",url,true)
        xmlhttp.send()
        }
    }
} 
    


        

            1
        

        

            2
        

        

            3
        

        

            4
        

        

            5
        

        

            6
        

        

            7
        

        

            8
        

        

            9
        

        

            10
        

        

            11
        

        

            12
        

        

            13
        

        

            14
        

        

            15
        

        

            16
        

        

            17
        

        

            18
        

        

            19
        

        

            20
        

        

            21
        

    

<style> div{ background:green; /* for FireFox */ *background:red; /* for IE7 */ _background:blue; /* for IE6 */ } </style>
    


        

            1
        

        

            2
        

        

            3
        

        

            4
        

        

            5
        

        

            6
        

        

            7
        

    

<!--其他瀏覽器 --> <link rel="stylesheet" type="text/css" href="css.css" /> <!--[if IE 7]> 
<!-- 適合于IE7 --> <link rel="stylesheet" type="text/css" href="ie7.css" /> <![endif]--> <!--[if lte IE 6]> 
<!-- 適合于IE6及一下 --> <link rel="stylesheet" type="text/css" href="ie.css" /> <![endif]-->
    


        

            1
        

        

            2
        

        

            3
        

        

            4
        

        

            5
        

        

            6
        

        

            7
        

        

            8
        

        

            9
        

        

            10
        

        

            11
        

        

            12
        

    

如果您想訂閱本博客內(nèi)容，每天自動發(fā)到您的郵箱中， 請點這里

如何優(yōu)化網(wǎng)站的內(nèi)部結(jié)構(gòu)？網(wǎng)站內(nèi)部結(jié)構(gòu)優(yōu)化是網(wǎng)站SEO過程中不可缺少的環(huán)節(jié)，在網(wǎng)站建設(shè)的初期就要做好設(shè)置工作。網(wǎng)站內(nèi)部結(jié)構(gòu)的優(yōu)化主要包括：網(wǎng)站結(jié)構(gòu)、頁面元素、后期優(yōu)化等，下面就從這幾個方面為大家講解，希望能給一些不了解的朋友提供實質(zhì)性的指導(dǎo)作用。

      1、結(jié)構(gòu)目錄

目錄的設(shè)計是網(wǎng)站建設(shè)中很關(guān)鍵的環(huán)節(jié)，是一個網(wǎng)站的骨架，所以網(wǎng)站目錄直接關(guān)系到用戶的體驗。建議：目錄的組織結(jié)構(gòu)從首頁到內(nèi)容頁點擊不超過三次，也就是三級：首頁-欄目頁-內(nèi)容頁。目錄名可采用網(wǎng)站的一些核心產(chǎn)品詞。

2、鏈接

我們說一個網(wǎng)站的優(yōu)化最重要的兩點是什么？對，是鏈接和關(guān)鍵詞。如果說目錄是一個網(wǎng)站的骨架，那么鏈接就是網(wǎng)站的血液。建議：網(wǎng)站鏈接的設(shè)置以英文形式展現(xiàn)，簡短易懂，使用靜態(tài)化URL，迎合搜索引擎的喜好，更好的服務(wù)于網(wǎng)站優(yōu)化。

3、robots協(xié)議

robots.txt相當(dāng)于網(wǎng)站的一張臉，一張接客的臉，接的搜索引擎的蜘蛛（或機(jī)器人、爬蟲）。它是一種抓取協(xié)議文件，用于告訴搜索引擎spider，此網(wǎng)站中的哪些內(nèi)容是不應(yīng)被搜索引擎的索引，哪些是可以被索引的。

現(xiàn)在很多地方都有自動生成工具，百度站長工具，或者一些插件等，根據(jù)自己的喜好選擇使用。這里有一個小技巧，將網(wǎng)站的地圖鏈接放置在robots內(nèi)，對網(wǎng)站的收錄絕對是不小的幫助。具體方法：在最后一行增加 Sitemap：http://www.example.com/sitemap.xml。

4、Sitemaps

Sitemaps就是一個管家，總結(jié)統(tǒng)計網(wǎng)站的數(shù)據(jù)鏈接，將匯總的結(jié)果更好的展現(xiàn)給網(wǎng)站的客人-搜索引擎spider。

Sitemaps一般有html與XML兩種格式。目前百度、Google、雅虎、微軟等搜索引擎都支持Sitemaps，Sitemaps的提交可以通過各個搜索引擎的站長平臺提交，也可以將其地址放在robots.txt文件里，上面已經(jīng)說過了。

5、404頁面

  404頁面是客戶端在瀏覽網(wǎng)頁時，服務(wù)器無法正常提供信息，或是服務(wù)器無法回應(yīng)，且不知道原因所返回的頁面。據(jù)說在第三次科技革命之前，互聯(lián)網(wǎng)的形態(tài)就是一個大型的中央數(shù)據(jù)庫，這個數(shù)據(jù)庫就設(shè)置在404房間里面。那時候所有的請求都是由人工手動完成的，如果在數(shù)據(jù)庫中沒有找到請求者所需要的文件，或者由于請求者寫錯了文件編號，用戶就會得到一個返回信息:room 404 : file not found。404錯誤信息通常是在目標(biāo)頁面被更改或移除，或客戶端輸入頁面地址錯誤后顯示的頁面，人們也就習(xí)慣了用404作為服務(wù)器未找到文件的錯誤代碼了。當(dāng)然實際考證傳說中的room 404是不存在的，在http請求3位的返回碼中，4開頭的代表客戶錯誤，5開頭代表服務(wù)器端錯誤。

6、nofollow標(biāo)簽

nofollow標(biāo)簽是盡量減少垃圾鏈接對搜索引擎的影響，當(dāng)超鏈接中出現(xiàn)nofollow標(biāo)簽后，搜索引擎會不考慮這些鏈接的權(quán)重，也不用使用這些鏈接用于排名。

nofollow標(biāo)簽通常有兩種使用方法：一種方法是將"nofollow"寫在網(wǎng)頁上的meta標(biāo)簽上，例如：。另一種方法是將"nofollow"放在超鏈接中，例如： 。

需要注意的是，如果一個網(wǎng)站鏈向了某些被搜索引擎認(rèn)為是垃圾網(wǎng)站的地址，那么這個網(wǎng)站的權(quán)重也會受到影響。因此對于一個網(wǎng)站來說，nofollow標(biāo)簽的使用十分必要。

7、統(tǒng)計代碼

網(wǎng)站統(tǒng)計分析工具應(yīng)該是每一位站長都了解的，現(xiàn)在常用的就是百度統(tǒng)計、cnzz、谷歌分析、51等，具體的就不做介紹了。網(wǎng)站統(tǒng)計代碼添加時，為了不 影響網(wǎng)站的加載速度，最好放在網(wǎng)站底部。

      相關(guān)拓展：關(guān)鍵詞的爬行和抓取

       搜索引擎派出一個能夠在網(wǎng)上發(fā)現(xiàn)新網(wǎng)頁并抓文件的程序，這個程序通常稱之為蜘蛛。搜索引擎從已知的數(shù)據(jù)庫出發(fā)，就像正常用戶的瀏覽器一樣訪問這些網(wǎng)頁并抓取文件。搜索引擎會跟蹤網(wǎng)頁中的鏈接，訪問更多的網(wǎng)頁，這個過程就叫爬行。這些新的網(wǎng)址會被存入數(shù)據(jù)庫等待抓取。所以跟蹤網(wǎng)頁鏈接是搜索引擎蜘蛛發(fā)現(xiàn)新網(wǎng)址的最基本的方法，所以反向鏈接成為搜索引擎優(yōu)化的最基本因素之一。沒有反向鏈接，搜索引擎連頁面都發(fā)現(xiàn)不了，就更談不上排名了。

       搜索引擎抓取的頁面文件與用戶瀏覽器得到的完全一樣，抓取的文件存入數(shù)據(jù)庫。

藍(lán)藍(lán)設(shè)計( www.yvirxh.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)

如果您想訂閱本博客內(nèi)容，每天自動發(fā)到您的郵箱中， 請點這里

編者按：作為今年大熱的設(shè)計趨勢，響應(yīng)式已然是設(shè)計師的標(biāo)配技能。今天阿里的同學(xué)從響應(yīng)式設(shè)計的布局類型、布局實現(xiàn)兩方面深入講解，有哪些實現(xiàn)布局的方式，該采用何種方式，都有相當(dāng)專業(yè)細(xì)致的解答，不多說，來收 >>>

如果您想訂閱本博客內(nèi)容，每天自動發(fā)到您的郵箱中， 請點這里

介紹Promise

promise的概念和實現(xiàn)最初來源于社區(qū)，用于解決異步編程的回調(diào)嵌套問題，即將多級的嵌套改良成順序的代碼行。ES6將其寫入了語言標(biāo)準(zhǔn)，統(tǒng)一了用法，提供了原生的Promise。

Promise是一個構(gòu)造函數(shù)，用于生成一個Promise實例。Promise實例代表一次異步操作。 它只可能有3種轉(zhuǎn)態(tài)，分別是Pending(未決議), Resolved(完成) 和 Rejected(出錯) 。

創(chuàng)建一個Promise實例時，其處于Pending狀態(tài)，當(dāng)異步操作完成，執(zhí)行回調(diào)函數(shù)的時候，根據(jù)回調(diào)函數(shù)中的err的值，如果err 為空則異步操作成功，否則異步操作失敗。此后，Promise實例的狀態(tài)將不再改變。

Promise實例

var pro = function () { return new Promise(function(resolve, reject) { fs.readdir(_dirname, function(err, data) { if (err) {
                reject(err); //失敗則將Promise對象置為rejected狀態(tài) } else {
                resolve(data); //成功則將Promise對象置為resolved轉(zhuǎn)態(tài) }
        });
    });
} /*pro是一個函數(shù)
 調(diào)用該函數(shù)返回一個Promise實例
*/ var promiseObject = pro(); /*then方法執(zhí)行Resolved和Rejected狀態(tài)的回調(diào)函數(shù)*/ promiseObject
.then(doneCallbacks, failCallbacks)
.catch(function(err) { console.log(err);
}); var doneCallbacks = function(data) { console.log(data);
}; var failCallbacks = function(err) { console.log(err)
};
    


        

            1
        

        

            2
        

        

            3
        

        

            4
        

        

            5
        

        

            6
        

        

            7
        

        

            8
        

        

            9
        

        

            10
        

        

            11
        

        

            12
        

        

            13
        

        

            14
        

        

            15
        

        

            16
        

        

            17
        

        

            18
        

        

            19
        

        

            20
        

        

            21
        

        

            22
        

        

            23
        

        

            24
        

        

            25
        

        

            26
        

        

            27
        

        

            28
        

        

            29
        

    

catch是then的一個語法糖，相當(dāng)于

promiseObject.then(undefined, function(err) {
    console.log(err)
});
    


        

            1
        

        

            2
        

        

            3
        

    

Promise對象的錯誤具有向后傳遞的性質(zhì)，因此，如果在調(diào)用過程拋出異常，則異?？偰鼙蛔詈笠粋€catch捕獲。這也是為什么我們習(xí)慣在then的調(diào)用后跟隨一個catch調(diào)用。

then的鏈?zhǔn)綄懛?

then 方法是定義在構(gòu)造函數(shù)Promise 的原型對象上的。這個方法為Promise實例添加狀態(tài)改變時的回調(diào)函數(shù)。then方法返回一個新的Promise實例，因此then方法后面可以調(diào)用then（）方法。傳給then()方法的函數(shù)，可返回三類值，分別如下：

• 一個Promise實例
• 一個普通值
• 拋出一個異常

如果返回的是一個新的Promise對象，則下一級的then接收函數(shù)在這個Promise實例 狀態(tài)發(fā)生改變時被觸發(fā)執(zhí)行。因此，then的鏈?zhǔn)綄懛?，可以按順序?zhí)行一系列的異步操作，并且后一個異步操作在前一個完成之后開始。如下代碼實例所示：

var fs = require('fs'); var pro = function () { return new Promise(function(resolve, reject) { fs.readdir(_dirname, function(err, data) { if (err) {
                reject(err); //失敗則將Promise對象置為rejected狀態(tài) } else {
                resolve(data); //成功則將Promise對象置為resolved轉(zhuǎn)態(tài) }
        });
    });
} var newPro = function(data) { return new Promise(function(resolve, reject) { setTimeout(function(){ resolve(data);
        },2000);
    });
}; /*pro是一個函數(shù)
 調(diào)用該函數(shù)返回一個Promise實例
*/ var promiseObject = pro(); /*then方法執(zhí)行Resolved和Rejected狀態(tài)的回調(diào)函數(shù)*/ promiseObject
    .then(function(data){ console.log("fisrt sync op");
        console.log(data); return newPro(data);//返回一個新的Promise對象 })
    .then(function(data) { console.log("second sync op");
        console.log(data);//兩秒鐘后才會被執(zhí)行 })
    .catch(function(err) { console.log(err);
    });

promiseObject.then(undefined, function(err) { console.log(err)
}); var doneCallbacks = function(data) { console.log(data);
}; var failCallbacks = function(err) { console.log(err)
}; 
    


        

            1
        

        

            2
        

        

            3
        

        

            4
        

        

            5
        

        

            6
        

        

            7
        

        

            8
        

        

            9
        

        

            10
        

        

            11
        

        

            12
        

        

            13
        

        

            14
        

        

            15
        

        

            16
        

        

            17
        

        

            18
        

        

            19
        

        

            20
        

        

            21
        

        

            22
        

        

            23
        

        

            24
        

        

            25
        

        

            26
        

        

            27
        

        

            28
        

        

            29
        

        

            30
        

        

            31
        

        

            32
        

        

            33
        

        

            34
        

        

            35
        

        

            36
        

        

            37
        

        

            38
        

        

            39
        

        

            40
        

        

            41
        

        

            42
        

        

            43
        

        

            44
        

        

            45
        

        

            46
        

        

            47
        

        

            48
        

        

            49
        

        

            50
        

        

            51
        

        

            52
        

        

            53
        

    

把上一級異步調(diào)用的結(jié)果返回給下一級調(diào)用，then這樣的鏈?zhǔn)綄懛?，解決了回調(diào)函數(shù)的多層嵌套調(diào)用。

解決異步嵌套回調(diào)的更多方案

“回調(diào)金字塔”

多層嵌套

bluebird庫 + Generator

如果您想訂閱本博客內(nèi)容，每天自動發(fā)到您的郵箱中， 請點這里

隨著越來越的的app使用沉浸式狀態(tài)欄，有必要對沉浸式狀態(tài)欄學(xué)習(xí)一下，查看了很多資料，沉浸式狀態(tài)欄重要的無法三點：1.實現(xiàn)全屏 （Android4.4跟5.0全屏處理方式有別需分開處理 ）2.設(shè)置全屏之后為了保證自己寫的布局不與狀態(tài)欄重疊，需要在跟xml的跟布局設(shè)置android:fitsSystemWindows=”true” ?；谶@幾點處理方式可能很多，但是為了便于項目中工具類封裝，本編實現(xiàn)方式均已代碼方式呈現(xiàn)，xml設(shè)置方式可以自行查閱相關(guān)資料 3.改變狀態(tài)欄顏色

—1.全屏設(shè)置 
對于4.4以上系統(tǒng)，因4.4以上系統(tǒng)是可以設(shè)置全屏，代碼如下：

window.addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS); window.addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_NAVIGATION); 


    

        1
    

    

        2
    

對于5.0系統(tǒng) 具體代碼

window.clearFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS|WindowManager.LayoutParams.FLAG_TRANSLUCENT_NAVIGATION); window.getDecorView().setSystemUiVisibility(View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN|View.SYSTEM_UI_FLAG_LAYOUT_STABLE|View.SYSTEM_UI_FLAG_LAYOUT_HIDE_NAVIGATION); window.addFlags(WindowManager.LayoutParams.FLAG_DRAWS_SYSTEM_BAR_BACKGROUNDS); 


    

        1
    

    

        2
    

    

        3
    

    

        4
    

    

        5
    

僅僅做全屏處理，我們會發(fā)現(xiàn)不管是在4.4系統(tǒng)上還是在5.0系統(tǒng)上，我們的布局內(nèi)容會與狀態(tài)欄內(nèi)容出現(xiàn)重疊。

下圖為4.4系統(tǒng) 

下圖為8.0系統(tǒng) 

為了解決全屏設(shè)置重疊狀態(tài)欄，我們需要在全屏之上預(yù)留狀態(tài)欄的高度以便正常顯示狀態(tài)欄，而處理方式也很簡單 activity layout根目錄添加下面代碼 
android:fitsSystemWindows=”true” 而此處我建議用代碼設(shè)置,因為通常我們項目中會提取BaseActivity基類抽出一些共性，這種方式比在每個xml中設(shè)置屬性更方便 
rootView.setFitsSystemWindows(true) 此處的rootView指的就是activity對應(yīng)的跟布局； 
進(jìn)行以上處理之后我們會發(fā)現(xiàn)現(xiàn)在狀態(tài)欄跟我們的布局內(nèi)容不再重疊了，接下來我們就只需要處理狀態(tài)欄的顏色問題了。具體代碼如下

ViewGroup content= (ViewGroup) findViewById(android.R.id.content); ViewGroup childView= (ViewGroup) content.getChildAt(0); if(childView!=null){
                childView.setFitsSystemWindows(true); } 


    

        1
    

    

        2
    

    

        3
    

    

        4
    

    

        5
    

對于4.4系統(tǒng)因為沒有改變狀態(tài)欄顏色的api，我們可以通過添加一個與狀態(tài)欄等高的View到根布局的父容器中，而根布局的父容器就是一個ID為android.R.id.content的幀布局被裝飾的容器中，這樣只需要設(shè)置View的顏色即可。對于5.0及以上系統(tǒng)，因已提供設(shè)置狀態(tài)欄和導(dǎo)航欄顏色的api，直接設(shè)置即可； 
對于4.4以上5.0一下系統(tǒng)

View view=new View(this); view.setLayoutParams(new ViewGroup.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT,getStatusHeight())); view.setBackgroundColor(Color.RED); content.addView(view); 


    

        1
    

    

        2
    

    

        3
    

    

        4
    

對于5.0及以上系統(tǒng)

window.setStatusBarColor(Color.RED); 


    

        1
    

獲取狀態(tài)欄高度

 private int getStatusHeight() { int statusHeight=-1; int resourceId=getResources().getIdentifier("status_bar_height","dimen","android"); if(resourceId>0){ return getResources().getDimensionPixelSize(resourceId);
        } return 0;
    } 


    

        1
    

    

        2
    

    

        3
    

    

        4
    

    

        5
    

    

        6
    

    

        7
    

    

        8
    

以上就是實現(xiàn)沉浸式狀態(tài)欄的具體過程。整體代碼如下：

package com.example.administrator.myjavadeamo.activity; import android.graphics.Color; import android.os.Build; import android.support.v7.app.AppCompatActivity; import android.os.Bundle; import android.view.View; import android.view.ViewGroup; import android.view.Window; import android.view.WindowManager; import com.example.administrator.myjavadeamo.R; public class StatusBarActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState); supportRequestWindowFeature(Window.FEATURE_NO_TITLE);//隱藏標(biāo)題欄 setContentView(R.layout.activity_status_bar); initWindow(); }

    private void initWindow() {
        Window window=getWindow(); if(Build.VERSION.SDK_INT>=Build.VERSION_CODES.LOLLIPOP){
            //5.0以上的手機(jī)
            window.clearFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS|WindowManager.LayoutParams.FLAG_TRANSLUCENT_NAVIGATION); window.getDecorView().setSystemUiVisibility(View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN|View.SYSTEM_UI_FLAG_LAYOUT_STABLE|View.SYSTEM_UI_FLAG_LAYOUT_HIDE_NAVIGATION); window.addFlags(WindowManager.LayoutParams.FLAG_DRAWS_SYSTEM_BAR_BACKGROUNDS); ViewGroup content= (ViewGroup) findViewById(android.R.id.content); ViewGroup childView= (ViewGroup) content.getChildAt(0); if(childView!=null){
                childView.setFitsSystemWindows(true); }
            window.setStatusBarColor(Color.GREEN); }else if(Build.VERSION.SDK_INT>=Build.VERSION_CODES.KITKAT){
            //4.4以上5.0一下的手機(jī)
            window.addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS); window.addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_NAVIGATION); ViewGroup content= (ViewGroup) findViewById(android.R.id.content); ViewGroup childView= (ViewGroup) content.getChildAt(0); if(childView!=null){
                childView.setFitsSystemWindows(true); }

            View view=new View(this); view.setLayoutParams(new ViewGroup.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT,getStatusHeight())); view.setBackgroundColor(Color.GREEN); content.addView(view); }
    } /**
     * 獲取狀態(tài)欄高度
     * @return
     */ private int getStatusHeight() {
        int statusHeight=-1; int resourceId=getResources().getIdentifier("status_bar_height","dimen","android"); if(resourceId>0){
           return getResources().getDimensionPixelSize(resourceId); }
        return 0; }
}  


    

        1
    

    

        2
    

    

        3
    

    

        4
    

    

        5
    

    

        6
    

    

        7
    

    

        8
    

    

        9
    

    

        10
    

    

        11
    

    

        12
    

    

        13
    

    

        14
    

    

        15
    

    

        16
    

    

        17
    

    

        18
    

    

        19
    

    

        20
    

    

        21
    

    

        22
    

    

        23
    

    

        24
    

    

        25
    

    

        26
    

    

        27
    

    

        28
    

    

        29
    

    

        30
    

    

        31
    

    

        32
    

    

        33
    

    

        34
    

    

        35
    

    

        36
    

    

        37
    

    

        38
    

    

        39
    

    

        40
    

    

        41
    

    

        42
    

    

        43
    

    

        44
    

    

        45
    

    

        46
    

    

        47
    

    

        48
    

    

        49
    

    

        50
    

    

        51
    

    

        52
    

    

        53
    

    

        54
    

    

        55
    

    

        56
    

    

        57
    

    

        58
    

    

        59
    

    

        60
    

    

        61
    

    

        62
    

    

        63
    

    

        64
    

    

        65
    

    

        66
    

    

        67
    

最終實現(xiàn)結(jié)果：

4.4系統(tǒng) 
 
8.0系統(tǒng)

藍(lán)藍(lán)設(shè)計( www.yvirxh.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)

JavaScript 創(chuàng)建動態(tài)頁面。事件是可以被 JavaScript 偵測到的行為。 網(wǎng)頁中的每個元素都可以產(chǎn)生某些可以觸發(fā) JavaScript 函數(shù)或程序的事件。比如說，當(dāng)用戶單擊按鈕或者提交表單數(shù)據(jù)時，就發(fā)生一個鼠標(biāo)單擊（onclick）事件，需要瀏覽器做出處理，返回給用戶一個結(jié)果。主要事件表總結(jié)如下： 

如果您想訂閱本博客內(nèi)容，每天自動發(fā)到您的郵箱中， 請點這里

1. <view class='header1'>  
2.   <view class='header'>  
3.     <view class='header_con flex_between'>  
4.       <view class='left'>  
5.         共計{{items.length}}件商品  
6.       </view>  
7.       <view class='right flex_end'>  
8.         <view wx:if="{{!management_good}}" class='flex_center' bindtap='management'>  
9.           管理  
10.         </view>  
11.         <view wx:if="{{management_good}}" class='flex_center' bindtap='finish_management'>  
12.           完成  
13.         </view>  
14.       </view>  
15.     </view>  
16.   </view>  
17. </view>  
18. <view class='header2'>  
19.   <view class='header'>  
20.     <view class='header_con flex_between'>  
21.       <input value='類目一' disabled='{{title_disabled}}' focus="{{!title_disabled}}">  
22.       </input>  
23.       <view class='right flex_end'>  
24.         <block wx-if="{{title_disabled}}">  
25.           <image src='../../../image/hotel/delete.png' bindtap='change_classname'></image>  
26.         </block>  
27.         <block wx-if="{{!title_disabled}}">  
28.           <view class='flex_center' bindtap='finish_classname'>  
29.             完成  
30.           </view>  
31.         </block>  
32.       </view>  
33.     </view>  
34.   </view>  
35. </view>  
36. <view class='onlinechoose'>  
37.   <view class='hotel_list flex_center' wx:for="{{items}}" wx:key="items" wx:for-item="i" data-id="{{index}}" bindtap='select'>  
38.     <view class='list_cons flex_start'>  
39.       <view wx:if="{{management_good}}" class='lefts'>  
40.         <block wx-if="{{!i.checked}}">  
41.           <view class='icon_none'></view>  
42.         </block>  
43.         <block wx-if="{{i.checked}}">  
44.           <icon type="success" size="30" color="red" />  
45.         </block>  
46.       </view>  
47.       <image src='../../../image/hotel/demoimg.jpg'></image>  
48.       <view class='right'>  
49.         <view class='name'>  
50.           {{i.name}}  
51.         </view>  
52.         <view class='list1 flex_between'>  
53.           <view class='left'>  
54.             <view class='condition1'>  
55.               16㎡|雙人床|含早  
56.             </view>  
57.             <view class='condition2'>  
58.               <block>  
59.                 間數(shù)：10  
60.               </block>  
61.               <block>  
62.                 間數(shù)：2  
63.               </block>  
64.             </view>  
65.           </view>  
66.         </view>  
67.         <view class='list1 flex_between'>  
68.           <view class='left'>  
69.             <view class='condition2'>  
70.               類目一  
71.             </view>  
72.           </view>  
73.         </view>  
74.       </view>  
75.     </view>  
76.   </view>  
77. </view>  
78. <view class='bottom flex_between' wx:if="{{management_good}}">  
79.   <view class='left flex_start'>  
80.     <block wx:if="{{select_all}}">  
81.       <view bindtap='select_none' class='flex_start'>  
82.         <icon type="success" size="30" color="red" />  
83.         <view>  
84.           取消全選  
85.         </view>  
86.       </view>  
87.     </block>  
88.     <block wx:if="{{!select_all}}">  
89.       <view bindtap='select_all' class='flex_start'>  
90.         <view class='select_none'>  
91.         </view>  
92.         <view>  
93.           全選  
94.         </view>  
95.       </view>  
96.     </block>  
97.   </view>  
98.   <view class='right flex_end'>  
99.     <view style='text-align:right'>  
100.       <view class='all'>  
101.         共選中{{middlearr.length}}件商品  
102.       </view>  
103.     </view>  
104.     <view bindtap='deleteitem' class='sure'>  
105.       刪除  
106.     </view>  
107.   </view>  
108. </view>