H5筆記02
網路接口
- ononline:網絡連接的時候觸發這個事件
- onoffline:網絡斷開的時候觸發
window.addEventListener('online',function (ev) {
alert('網絡鏈接了');
});
window.addEventListener('offline',function (ev) {
alert('網絡斷開了');
})
全屏接口
- requestFullScreen():開啓全屏顯示
- cancelFullScreen():退出全屏
- fullScreenElement:是不是全屏狀態
不一樣的瀏覽器須要加上不一樣的前綴html
- chrome:webkit
- firefox::moz
- ie:ms 可是IE9不支持
- opera:o
<div>
<img src="../imgs/294.jpg" alt="">
<input type="button" id='full' value="全屏">
<input type="button" id="cancelFull" value="退出全屏">
<input type="button" id='isFull' value="是否全屏">
</div>
<script>
// - requestFullScreen():開啓全屏顯示
// - cancelFullScreen():退出全屏
// - fullscreenElement:是不是全屏狀態
window.onload=function () {
var div=document.querySelector('div')
document.querySelector("#full").onclick=function () {
// div.requestFullScreen();
// div.webkitRequestFullScreen();
// div.mozRequestFullScreen();
//兼容處理的方式
if(div.requestFullscreen)
{
div.requestFullscreen();
}
else if(div.webkitRequestFullScreen)
{
div.webkitRequestFullScreen();
}else if(div.mozRequestFullScreen)
{
div.mozRequestFullScreen();
}else if(div.msRequestFullScreen)
{
div.msRequestFullScreen();
}
}
//退出全屏 退出全屏必須使用document實現
document.q
document.querySelector('#ifFull').onclick=function () {
if(document.fullscreenElement||document.webkitFullscreenElement||document.mozFullScreenElement||document.msFullscreenElement)
{
alert(true);
}
else{
alert(false);
}
}
}
</script>
退出全名不是某個元素退出而是整個文檔，退出全屏必須使用document實現jquery
mozFullScreenElement這個名字和其餘的不同git
文件讀取 FileReader
- 1.readAsText():讀取文本文件
- 2.readAsBinaryString(): 讀取任意類型文件，返回給用戶看
- 3.readAsDataURL():讀取文檔獲取一段data開頭的字符穿，DataURL是一種將文件嵌入到文檔中的方案
- abort():中斷讀取
src請求資源會發送請求，佔用服務器資源
上傳頭像預覽功能實現
- onabort:讀取中斷觸發
- onerror:讀取錯誤時觸發
- onload:文件讀取完成時觸發
- onloadend:讀取完成時觸發，不管成功仍是失敗
- onloadstart:開始時觸發
- onloadgress:讀取文件過程當中持續觸發
文件讀取須要必定的時間web
<!--圖片展現 src請求資源會發送請求，佔用服務器資源-->
<img src="../imgs/295.jpg" alt="">
<p>上傳頭像的預覽功能</p>
<form action="">
文件：<input type="file" name="imgfile" id="imgfile"><br/>
<input type="submit" value="提交">
</form>
<script>
// - 1.readAsText():讀取文本文件
// - 2.readAsBinaryString(): 讀取任意類型文件，返回給用戶看
// - 3.readAsDataURL():讀取文檔獲取一段data開頭的字符穿，DataURL是一種將文件嵌入到文檔中的方案
// 預覽操做
document.getElementById('imgfile').onchange=function (ev) {
//1.建立讀取文件對象
var reader=new FileReader();
/* 2.讀取文件，獲取DataURL
1.沒有返回值,會將讀取的結果返回到文件對象中的result
2.須要傳遞參數 binary large object：文件（圖片）
3.文件存儲在file表單元素的files屬性中，他是一個數組
*/
var file=document.querySelector('#imgfile').files[0];//獲取第一張圖片
reader.readAsDataURL(file);
//文件讀取完畢後須要作的事情：數據是BASE64
reader.onload=function () {
document.querySelector('img').src=reader.result;
}
}
</script>
拖拽接口的使用
- 必須爲元素添加draggable="true",圖片和連接自己就支持
- 拖拽事件學習，被拖拽目標，目標原屬
拖拽事件 --被拖拽元素
- ondrag：這個歌拖拽過程都會調用
- ondrapstart:應用於拖拽元素，當拖拽開始的時候調用
- ondragleave:當鼠標來開拖拽元素時調用
- ondragen :當拖拽結束時調用
瀏覽器默認阻止ondrop事件，必須在ondragover中加入e.preventDefault()；阻止默認行爲chrome
拖拽事件 -- 目標元素
- ondragenter: 應用於目標元素，當拖拽元素進入時調用
- ondragover:當停留在目標元素上時調用
- ondrap: 當在目標元素上鬆開鼠標時調用
- ondragleve:當鼠標離開目標元素時調用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>H5中拖拽接口的使用</title>
<style>
.first,.second{
width: 200px;
height: 200px;
float: left;
margin-left: 20px;
padding: 2px 2px;
}
.first{
border: solid 1px blue;
}
.second{
border: solid 1px red;
}
p{
margin: 0 0;
background-color: #7d64ff;
}
</style>
</head>
<body>
<div class="first">
<p class="one" draggable="true">Hello!</p>
</div>
<div class="second">
</div>
<script>
//應用於拖拽元素
var p=document.querySelector('p');
// p.ondrag=function (ev) {
// console.log('ondrag');
// }
// p.ondragstart=function (ev) {
// console.log('ondragstart');
// }
// p.ondragend=function (ev) {
// console.log('ondragend');
// }
// p.ondragleave=function (ev) {
// console.log('ondragend');
// }
//應用於目標元素,
var div2= document.querySelector('.second');
div2.ondragover=function (e) {
e.preventDefault();
}
div2.ondrop=function () {
div2.appendChild(p);
}
</script>
</body>
</html>
任意元素拖拽至任意上的解決方案
- 經過事件來獲取當前被拖拽的元素
- 經過dataTransfer來實現數據的存儲與捕獲
- 經過ev.dataTransfer.setData存儲的數據。只能在drop事件中獲取:getData
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
width: 200px;
height:200px;
border:solid 1px red;
margin-left: 20px;
margin-top: 20px;
float:left
}
p{
background-color: greenyellow;
margin-top:1px;
}
</style>
</head>
<body>
<div id="one">
<p id="first" draggable="true">first</p>
<p id="second" draggable="true">second</p>
</div>
<div id="two">
</div>
<script>
var obj=null;//當前被拖拽的元素
document.ondragstart=function (ev) {
//經過事件來獲取當前被拖拽的元素
ev.target.style.opacity=0.5;
ev.target.parentNode.style.borderWidth="5px";
obj=ev.target;
// 經過dataTransfer來實現數據的存儲與捕獲
//setData(format,data):
//format:數據類型：text/html text/uri-list
//data:數據:通常來講時字符串值
ev.dataTransfer.setData('text/html',ev.target.id);
}
document.ondragover=function (ev) {
ev.preventDefault();
}
document.ondrop=function (ev) {
//經過ev.dataTransfer.setData存儲的數據。只能在drop事件中獲取:getData
var id=ev.dataTransfer.getData('text/html');
ev.target.appendChild(document.getElementById(id));
}
</script>
</body>
</html>
地理位置接口
定位在瀏覽器端是不被容許的，可是在手機端能夠apache
navigator.geolocation.getCurrentPosition(success,error,option) success:*成功以後的回調函數 error:* 失敗以後的回調函數 postion: 獲取當前位置信息的方式
success：獲取的地理信息會經過參數傳遞給回調函數數組
// position.coords.latitude 緯度 //position.coords.longitude 經度 //position.coords.accuracy 精度 // position.coords.altitude 海拔高度
error:出錯信息也會傳遞給回調函數瀏覽器
function showEerror(error)
{
switch (error.code)
{
case error.PERMISSION_DENIED:
x.innerHTML='User denined the request for Geolocation.'
break;
case error.POSITION_UNAVAILABLE:
x.innerHTML='Location infomation is unavailable.'
break;
case error.TIMEOUT:
x.innerHTML='The request to get user location timed!'
break;
case error.UNKNOWN_ERROR:
x.innerHTML='An unknown error occurred.'
break;
}
}
option參數緩存
enabeHigAccuracy:true/false 是否使用高精度 timeout:設置超時時間，單位ms maxmumAge:能夠設置瀏覽器從新獲取去地理位置的時間間隔，單位也是毫秒
demo
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>地理定位接口的使用</title>
<style>
</style>
</head>
<body>
<div class="demo" id="demo"></div>
<script>
var x= document.getElementById("demo");
function getLoction(){
if(navigator.geolocation)
{
/*
* getCurrentPosition三個參數：sucdess,error,option
*成功以後的回調函數
* 失敗以後的回調函數
* 獲取當前位置信息的方式
* */
navigator.geolocation.getCurrentPosition(showPosition,showError,{});
}
}
//獲取地理信息成功以後的回調函數，獲取的地理信息會經過參數傳遞給回調函數
// position.coords.latitude 緯度
//position.coords.longitude 經度
//position.coords.accuracy 精度
// position.coords.altitude 海拔高度
function showPosition(postion)
{
x.innerText="Latitude:"+postion.coords.latitude+'<br/>'+
'Longitude:'+position.coords.longitude;
}
//獲取失敗以後的回調,出錯信息也會傳遞給回調函數
function showEerror(error)
{
switch (error.code)
{
case error.PERMISSION_DENIED:
x.innerHTML='User denined the request for Geolocation.'
break;
case error.POSITION_UNAVAILABLE:
x.innerHTML='Location infomation is unavailable.'
break;
case error.TIMEOUT:
x.innerHTML='The request to get user location timed!'
break;
case error.UNKNOWN_ERROR:
x.innerHTML='An unknown error occurred.'
break;
}
}
getLoction()
</script>
</body>
</html>
若是真要獲取地理位置，可使用第三方接口來實現服務器
- 1.map.baidu.com
- 2.申請密鑰
- 3.選模板複製代碼
web存儲 sessionStorage | localStorage
sessionStorage
cookie存儲數據大小有限制4K
- 存儲數據到本地5mb
- setItem(key,value)經過鍵值對來存儲數據
- getItem(key)經過key來獲取數據的值，找不到就是空值
- removeItem(key)經過key來刪除數據，key不存在，不會報錯
- clear():清空全部內容
經過F12 -->applicatons中能夠查看到存儲的數據 存儲的數據跟頁面有關係，瀏覽器只要關閉也會清除
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h2>sessionStorage的使用：</h2>
- 存儲數據到本地5mb
- setItem(key,value)經過鍵值對來存儲數據
- getItem(key)經過key來獲取數據的值,找不到就是空值
- removeItem(key)經過key來刪除數據 ,key不存在，不會報錯
- clear():清空全部內容 <br>
<input type="text" id="name" value="設置數據">
<input type="button" id="setData" value="設置數據">
<input type="button" id="getData" value="獲取數據">
<input type="button" value="刪除數據" id="delData">
<script>
//數據存儲
document.querySelector('#setData').onclick=function () {
var name=document.querySelector('#name').value;
window.sessionStorage.setItem('username',name);
}
//獲取數據
document.querySelector('#getData').onclick=function () {
username=window.sessionStorage.getItem('username');
alert(username);
}
//刪除數據
document.querySelector('#getData').onclick=function () {
window.sessionStorage.removeItem('username');
}
</script>
</body>
</html>
localStorage
- 存儲數據到本地20mb
- setItem(key,value)經過鍵值對來存儲數據
- getItem(key)經過key來獲取數據的值,找不到就是空值
- removeItem(key)經過key來刪除數據 ,key不存在，不會報錯
- clear():清空全部內容
不一樣瀏覽器不能夠共享數據，同一瀏覽器能夠共享數據
瀏覽器關閉仍然存在，存在硬盤上的
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h2>localStorage的使用：</h2>
- 存儲數據到本地20mb <br>
- setItem(key,value)經過鍵值對來存儲數據 <br>
- getItem(key)經過key來獲取數據的值,找不到就是空值 <br>
- removeItem(key)經過key來刪除數據 ,key不存在，不會報錯<br>
- clear():清空全部內容 <br>
<p>不一樣瀏覽器不能夠共享數據，同一瀏覽器能夠共享數據</p>
<p>**瀏覽器關閉仍然存在，存在硬盤上的**</p>
<input type="text" id="name" value="設置數據">
<input type="button" id="setData" value="設置數據">
<input type="button" id="getData" value="獲取數據">
<input type="button" value="刪除數據" id="delData">
<script>
//數據存儲
document.querySelector('#setData').onclick=function () {
var name=document.querySelector('#name').value;
window.localStorage.setItem('username',name);
}
//獲取數據
document.querySelector('#getData').onclick=function () {
username=window.localStorage.getItem('username');
alert(username);
}
//刪除數據
document.querySelector('#getData').onclick=function () {
window.localStorage('username');
}
</script>
</body>
</html>
應用緩存
使用HTML5,經過cache manifest文件，能夠輕鬆的建立web離線版本
優點
- 根據須要配置須要緩存的資源
- 網絡無鏈接仍然可用
- 本地讀取緩存資源，提高訪問速度，增長用戶體驗
- 減小請求，下降服務器負擔
Cache Manifest基礎
- 在HTML標籤中指定文件路徑
- 文件擴展名最好是.appcache
- manifest文件的開頭第一句只能是CACHE MANIFEST,
- 註釋是使用
CACHE:指定煥春的文件清單
NETWORK:下面的配置每一次都許喲啊從新從服務器獲取文件清單列表
若是文件沒法獲取則使用指定的文件進行替代
FALLBACK:#若是文件找不到，指定默認的文件
若是想緩存全部文件能夠寫一個*
manifest文件結構
CACHE MANIFEST #CACHE:指定緩存文件路徑 #> 若是想緩存全部文件能夠寫一個* CACHE: ../imgs/297.jpg ../imgs.294.jpg #配置每一次都要從新從服務器獲取文件清單列 NETWORK: ../imgs.294.jpg #若是文件找不到，指定默認的文件 FALLBACK: ../imgs/294.jpg ../imgs/default.jpg #若是須要對找不到文件都使用上面的規則替換請指定下面的符號，去掉# #/:
IIS添加MIME-type類型,若是是apache就須要了
- win+R,輸入：inetmgr
- MIME類型，點擊添加
- 擴展名是.appcache
- MIME類型輸入：text/cache-manifest
音頻顯示統一化 -多媒體接口
必須使用原生js dom實現,若是使用jquery必須轉成dom
經常使用方法
- play() ：播放
- pause() ：暫替
- stop() ：中止
- paused:獲取當前的狀態是播放仍是暫停
- oncanplay:何時視頻能夠播放觸發的事件
- duration:屬性獲取視頻總時長，獲取的是有小數的秒
- currentTime:屬性，當前的播放的進度
播放暫停樣式切換
toggleClass('類1 類2')
相關文章
- 1. h5筆記
- 2. Django筆記02
- 3. SpringBoot筆記02
- 4. angular2.0 筆記 - 02
- 5. Struts2——筆記02
- 6. Hibernate——筆記02
- 7. Spark筆記02
- 8. Netfilter筆記-02
- 9. Java筆記02
- 10. H5瞭解-02
- 更多相關文章...
- • ASP.NET Razor - 標記 - ASP.NET 教程
- • ADO 添加記錄 - ADO 教程
- • Tomcat學習筆記（史上最全tomcat學習筆記）
- • YAML 入門教程
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
歡迎關注本站公眾號,獲取更多信息
相關文章
- 1. h5筆記
- 2. Django筆記02
- 3. SpringBoot筆記02
- 4. angular2.0 筆記 - 02
- 5. Struts2——筆記02
- 6. Hibernate——筆記02
- 7. Spark筆記02
- 8. Netfilter筆記-02
- 9. Java筆記02
- 10. H5瞭解-02