html基礎學習02

1. h5中的元素拖拽
在html5中,咱們可使用鼠標拖動頁面中的某個元素,可是在實現拖拽元素,而且使用拖拽來改變元素佈局的話,須要給頁面中相應的元素設置一些屬性:
1.1 實現元素能被拖拽
在須要拖拽的元素標籤中設置屬性:draggable,它只有兩個值true和flase,img標籤默認支持拖拽.
1.2 實現能夠拖拽至某個盒子中
默認狀況是沒法將元素拖拽至其餘地方,可是若是須要將元素拖拽至某個盒子中的話,須要給該盒子設置事件:
DOM.ondragover = function (event) {
 event.preventDefault();
}
可是這只是完成了能夠拖拽至這個盒子中,尚未完成將元素添加到盒子中.須要給盒子設置當元素放置於盒子中時的事件,在事件處理函數中書寫元素添加至盒子中的代碼.
DOM.ondrop = function(){}
2. h5中的全屏顯示
咱們在看視頻的時候都會有全屏顯示的按鈕,固然在其餘一些地方也能夠將元素全屏顯示.
而元素的全屏顯示功能的基礎代碼就是:DOM.requesetFullscreen();可是這個方法還未正式啓用,全部咱們須要對不一樣瀏覽器作能力檢測:
if (DOM.requestFullScreen) {
 DOM.requestFullScreen();
}else if(DOM.webkitRequestFullScreen){
 DOM.webkitRequestFullScreen();
}else if(DOM.mozRequestFullScreen){
 DOM.mozRequestFullScreen();
}
這裏的判斷語句是爲了檢測瀏覽器中元素是否存在該方法,若是有就調用.
3. h5中自定義播放器
以前咱們講到過html5中有默認的播放器標籤,可是在直接使用默認標籤中的屬性時並不能達到咱們的要求,全部html5給出了許多方法和屬性,方便咱們對標籤進行自定義設置.
3.1 play()
控制視頻的播放,配合pause()使用.
3.2 pause()
控制視頻的暫停,配合play()使用.
3.3 currentTime和duration
這兩個是標籤的屬性,能夠獲取視頻當前播放的時間和總時間,一樣也能夠來設置視頻須要開始播放的時間.
可使用這兩個屬性來自定義視頻的播放進度,並經過拖拽進度條來改變播放進度.
使用這些html5提供的屬性和方法,可使咱們頁面播放器更加美觀.
4. h5提供的定位
window.navigator.geolocation.getCurrentPosition(function (position) {})
調用這個方法的時候須要傳入一個回調-函數,在回調函數中經過position.coords.longitude獲取當前位置的經度,經過position.coords.latitude獲取當前位置的緯度.
可是隻是經過這個方法獲取經緯度,並無什麼做用,咱們須要配合網上的一些地圖服務器來進行定位,如百度地圖,谷歌地圖等.這樣就能夠完成一個我的位置定位的功能.
咱們能夠餐廳百度地圖中的設置來製做一個屬於本身的定位地圖.
5. 瀏覽器端保存數據
瀏覽器瀏覽頁面的時候會將一些信息自動保存在內存中,當頁面關閉後清除內存.
咱們也能夠手動將一些咱們須要的數據保存至瀏覽器端.
5.1 一次性保存
窗口未關閉前,將數據保存下來,窗口關閉後清除數據:
window.sessionStorage
5.2 永久保存
當數據進行保存後,直到清除瀏覽器瀏覽記錄或者代碼清除:
window.localStorage
5.3 兩種方式經常使用的方法
5.3.1 setItem('key','value');設置保存的數據,設置的格式是鍵值對,而且只能保存字符串.
5.3.2 getItem('key');獲取對應鍵的值.
5.3.3 一般使用情景
咱們能夠先獲取到用戶輸入的內容,將內容配合設置的鍵存儲在用戶的瀏覽器端,在下次訪問時能夠直接獲取這些數據,無需用戶重複輸入.
5.3.4 拓展
雖然經過setItem()只能存儲字符串,可是咱們能夠先將json數據轉換爲字符串存儲在瀏覽器端,在須要使用時,再經過字符串轉換爲json對象來獲取須要的數據.
對應的一組格式轉換的方法:
JSON.stringify(obj);將json對象轉換爲字符串,返回的是內容爲json對象的字符串.
JSON.parse(string);將內容爲json對象的字符串,轉換爲json對象,返回的是一個json對象.
6. 獲取上傳的文件
6.1 獲取須要上傳的文件的信息
在獲取上傳文件以前,須要知道如何獲取須要上傳的文件的信息.
<input type="file" >標籤擁有一個屬性,能夠獲取用戶選取的文件的信息.
dom.files;獲取到的是由選取的文件信息組成的數組,能夠經過dom.files[index];的方式來選擇須要獲取文件的信息.
而後須要建立文件讀取對象,經過這個對象的方法來獲取文件的信息.
var obj = new FileReader();//建立一個文件讀取對象.
obj.readAsDataURL(file);//經過該對象調用讀取文件的方法,傳入一個經過dom.files[index];獲取到的文件信息做爲參數.
obj.onload = function (argument) {//文字加載完畢後調用}
file.type:獲取文件的類型;
obj.result:獲取文件的路徑信息.
6.2 經過form表單獲取上傳的文件
6.2.1 form標籤中須要設置的內容
在上傳文件時表單元素必須是經過post的請求方式,服務器才能獲取到上傳的文件.
而且在form標籤中須要設置enctype='multipart/form-data'屬性及屬性值,爲了讓表單知道表單中有文件須要上傳.
6.2.2 php文件中須要設置的內容
在點擊提交按鈕後,上傳的文件會在php中保存在一個全局變量中,咱們能夠經過對應方式來獲取到上傳文件信息,如:$_GET,$_POST.
$_FILES['key'];獲取到的是由上傳文件信息組成的一個關係型數組,key爲上傳文件標籤的name屬性值.
move_uploaded_file()將指定的上傳文件移動到某個具體的位置,進行存儲.
這個方法有兩個參數:
參數1 移動的目標文件
參數2 但願保存的位置/但願保存的文件名
6.3 經過ajax獲取上傳的文件
6.3.1 ajax能夠直接讀取form表單中數據
在form表單沒有執行提交的狀況下,在經過ajax請求時,php中能夠直接獲取到form表單中的數據.可是須要在ajax.send()以前建立一個表單數據對象:new FormData(formDom),括號中傳入一個表單元素.
而後直接在php中使用$_POST或者$_GET獲取數據.
6.3.2 將選擇的文件進行上傳
1 html部分
在<input type="file" >中選擇的文件,經過.append()的方法上傳至php,.append()有兩個參數:
第一個參數:自定義key名;
第二個參數:經過dom.files[index];獲取選擇的文件.
2 php部分
php設置的與經過form表單獲取的過程一致.
3 .append()方法
還能夠經過這個方法來給form表單設置自定義屬性及屬性值,而且在php中同正常屬性同樣來獲取到設置的屬性值.
6.3.3 上傳文件的同時顯示上傳進度
ajax.upload.onprogress = function (event) {}
文件上傳的同時出發事件,能夠經過event.loaded獲取到已上傳文件的大小.以及event.total獲取到上傳文件的總大小,使用這兩個屬性來設置顯示上傳的進度.