html5網(wǎng)絡(luò)鏈接口：
<script>
/*1.ononline:網(wǎng)絡(luò)連通的時候觸發(fā)這個事件*/
window.addEventListener("online",function(){
alert("網(wǎng)絡(luò)連通了");
});
/*2.onoffline:網(wǎng)絡(luò)斷開時觸發(fā)*/
window.addEventListener("offline",function(){
alert("網(wǎng)絡(luò)斷開了");
})
</script>
全屏接口的使用：
全屏操作的主要方法和屬性
* 1.requestFullScreen():開啟全屏顯示
* 不同瀏覽器需要添加不同的前綴
* chrome:webkit firefox:moz ie:ms opera:o
* 2.cancelFullScreen():退出全屏顯示:也添加前綴，在不同的瀏覽器下.退出全屏只能使用document來實現(xiàn)
* 3.fullScreenElement:是否是全屏狀態(tài)抡四，也只能使用document進行判斷
window.onload=function(){
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.querySelector("#cancelFull").onclick=function(){
if(document.cancelFullScreen){
document.cancelFullScreen();
}
else if(document.webkitCancelFullScreen){
document.webkitCancelFullScreen();
}
else if(document.mozCancelFullScreen){
document.mozCancelFullScreen();
}
else if(document.msCancelFullScreen){
document.msCancelFullScreen();
}
}
/*判斷是否是全屏狀態(tài)*/
document.querySelector("#isFull").onclick=function(){
/*兩個細節(jié)：使用document判斷 能力測試*/
if(document.fullscreenElement || document.webkitFullscreenElement || document.mozFullScreenElement || document.msFullscreenElement){
alert(true);
}
else{
alert(false);
}
}
}
HTML5-FileReader的使用:
FileReader:讀取文件內(nèi)容
1.readAsText():讀取文本文件(可以使用Txt打開的文件)含衔，返回文本字符串普监，默認編碼是UTF-8
2.readAsBinaryString():讀取任意類型的文件滚澜。返回二進制字符串咖耘。這個方法不是用來讀取文件展示給用戶看迅箩，而是存儲文件馋劈。例如：讀取文件的內(nèi)容妹沙，獲取二進制數(shù)據(jù)偶洋，傳遞給后臺，后臺接收了數(shù)據(jù)之后距糖，再將數(shù)據(jù)存儲
3.readAsDataURL():讀取文件獲取一段以data開頭的字符串玄窝，這段字符串的本質(zhì)就是DataURL.DataURL是一種將文件(這個文件一般就是指圖像或者能夠嵌入到文檔的文件格式)嵌入到文檔的方案。DataURL是將資源轉(zhuǎn)換為base64編碼的字符串形式悍引，并且將這些內(nèi)容直接存儲在url中>>優(yōu)化網(wǎng)站的加載速度和執(zhí)行效率恩脂。
abort():中斷讀取
function getFileContent(){
/*1.創(chuàng)建文件讀取對象*/
var reader=new FileReader();
/*2.讀取文件，獲取DataURL
* 2.1.說明沒有任何的返回值:void：但是讀取完文件之后趣斤，它會將讀取的結(jié)果存儲在文件讀取對象的result中
* 2.2.需要傳遞一個參數(shù) binary large object:文件(圖片或者其它可以嵌入到文檔的類型)
* 2.3:文件存儲在file表單元素的files屬性中俩块，它是一個數(shù)組*/
var file=document.querySelector("#myFile").files;
reader.readAsDataURL(file[0]);
/*獲取數(shù)據(jù)*/
/*FileReader提供一個完整的事件模型，用來捕獲讀取文件時的狀態(tài)
* onabort:讀取文件中斷片時觸發(fā)
* onerror:讀取錯誤時觸發(fā)
* onload:文件讀取成功完成時觸發(fā)
* onloadend:讀取完成時觸發(fā)浓领，無論成功還是失敗
* onloadstart:開始讀取時觸發(fā)
* onprogress:讀取文件過程中持續(xù)觸發(fā)*/
reader.onload=function(){
//console.log(reader.result);
/*展示*/
document.querySelector("img").src=reader.result;
}
reader.onprogress=function(e){
var percent= e.loaded/ e.total*100+"%";
div.style.width=percent;
}
}
html5拖拽接口的使用：
在h5中玉凯，如果想拖拽元素，就必須為元素添加draggable="true".圖片和超鏈接默認就可以拖拽
- 應(yīng)用于被拖拽元素的事件
ondrag 應(yīng)用于拖拽元素镊逝，整個拖拽過程都會調(diào)用--持續(xù)
ondragstart 應(yīng)用于拖拽元素壮啊，當(dāng)拖拽開始時調(diào)用
ondragleave 應(yīng)用于拖拽元素，當(dāng)鼠標離開拖拽元素時調(diào)用
ondragend 應(yīng)用于拖拽元素撑蒜，當(dāng)拖拽結(jié)束時調(diào)用- 應(yīng)用于目標元素的事件
ondragenter 應(yīng)用于目標元素歹啼，當(dāng)拖拽元素進入時調(diào)用
ondragover 應(yīng)用于目標元素玄渗，當(dāng)停留在目標元素上時調(diào)用
ondrop 應(yīng)用于目標元素，當(dāng)在目標元素上松開鼠標時調(diào)用
ondragleave 應(yīng)用于目標元素狸眼，當(dāng)鼠標離開目標元素時調(diào)用
- 應(yīng)用于目標元素的事件
demo:
<style>
*{
margin: 0;
padding: 0;
}
.div1{
width: 200px;
height: 200px;
border: 1px solid red;
position: relative;
margin-left:20px;
float: left;
}
.div2{
width: 200px;
height: 200px;
border: 1px solid blue;
position: relative;
margin-left:20px;
float: left;
}
.div3{
width: 200px;
height: 200px;
border: 1px solid green;
position: relative;
margin-left:20px;
float: left;
}
p{
background-color: orange;
margin-top: 5px;
}
</style>
</head>
<body>
<div class="div1" id="div1">
<!--在h5中藤树，如果想拖拽元素，就必須為元素添加draggable="true". 圖片和超鏈接默認就可以拖拽-->
<p id="pe" draggable="true">試著把我拖過去</p>
<p id="pe1" draggable="true">試著也把我拖過去</p>
</div>
<div class="div2" id="div2"></div>
<div class="div3" id="div3"></div>
<script>
/*學(xué)習(xí)拖拽拓萌，主要就是學(xué)習(xí)拖拽事件*/
var obj=null;//當(dāng)前被拖拽的地元素
/*應(yīng)用于被拖拽元素的事件
*ondrag 應(yīng)用于拖拽元素岁钓，整個拖拽過程都會調(diào)用--持續(xù)
ondragstart 應(yīng)用于拖拽元素，當(dāng)拖拽開始時調(diào)用
ondragleave 應(yīng)用于拖拽元素微王，當(dāng)鼠標離開拖拽元素時調(diào)用
ondragend 應(yīng)用于拖拽元素屡限，當(dāng)拖拽結(jié)束時調(diào)用*/
document.ondragstart=function(e){
/*通過事件捕獲來獲取當(dāng)前被拖拽的子元素*/
e.target.style.opacity=0.5;
e.target.parentNode.style.borderWidth="5px";
obj= e.target;
/*通過dataTransfer來實現(xiàn)數(shù)據(jù)的存儲與獲取
* setData(format,data):
* format:數(shù)據(jù)的類型：text/html text/uri-list
* Data:數(shù)據(jù):一般來說是字符串值*/
e.dataTransfer.setData("text/html", e.target.id);
}
document.ondragend=function(e){
e.target.style.opacity=1;
e.target.parentNode.style.borderWidth="1px";
}
document.ondragleave=function(e){
}
document.ondrag=function(e){
}
/*應(yīng)用于目標元素的事件
*ondragenter 應(yīng)用于目標元素，當(dāng)拖拽元素進入時調(diào)用
ondragover 應(yīng)用于目標元素炕倘，當(dāng)停留在目標元素上時調(diào)用
ondrop 應(yīng)用于目標元素钧大，當(dāng)在目標元素上松開鼠標時調(diào)用
ondragleave 應(yīng)用于目標元素，當(dāng)鼠標離開目標元素時調(diào)用*/
document.ondragenter=function(e){
console.log(e.target);
}
document.ondragover=function(e){
/*如果想觸發(fā)ondrop事件罩旋，那么就必須在這個位置阻止瀏覽器的默認行為*/
e.preventDefault();
}
/*瀏覽器默認會阻止ondrop事件：我們必須在ondragover中阻止瀏覽器的默認行為*/
document.ondrop=function(e){
/*添加元素*/
//e.target.appendChild(obj);
/*通過e.dataTransfer.setData存儲的數(shù)據(jù)啊央，只能在drop事件中獲取*/
var id=e.dataTransfer.getData("text/html");
/*console.log("id="+id);*/
e.target.appendChild(document.getElementById(id));
}
document.ondragleave=function(e){
}
</script>
html5地理定位接口：
<script>
var x=document.getElementById("demo");
function getLocation()
{
/*能力測試*/
if (navigator.geolocation)
{
/*1.獲取地理信息成功之后的回調(diào)
* 2.獲取地理信息失敗之后的回調(diào)
* 3.調(diào)整獲取當(dāng)前地進信息的方式*/
//navigator.geolocation.getCurrentPosition(success,error,option);
/*option:可以設(shè)置獲取數(shù)據(jù)的方式
* enableHighAccuracy:true/false:是否使用高精度
* timeout:設(shè)置超時時間，單位ms
* maximumAge:可以設(shè)置瀏覽器重新獲取地理信息的時間間隔涨醋，單位是ms*/
navigator.geolocation.getCurrentPosition(showPosition,showError,{
/*enableHighAccuracy:true,
timeout:3000*/
});
}
else{
x.innerHTML="Geolocation is not supported by this browser.";
}
}
/*成功獲取定位之后的回調(diào)*/
/*如果獲取地理信息成功瓜饥，會將獲取到的地理信息傳遞給成功之后的回調(diào)*/
// position.coords.latitude 緯度
// position.coords.longitude 經(jīng)度
// position.coords.accuracy 精度
// position.coords.altitude 海拔高度
function showPosition(position)
{
x.innerHTML="Latitude: " + position.coords.latitude +
"<br />Longitude: " + position.coords.longitude;
}
/*獲取定位失敗之后的回調(diào)*/
function showError(error)
{
switch(error.code)
{
case error.PERMISSION_DENIED:
x.innerHTML="User denied the request for Geolocation."
break;
case error.POSITION_UNAVAILABLE:
x.innerHTML="Location information is unavailable."
break;
case error.TIMEOUT:
x.innerHTML="The request to get user location timed out."
break;
case error.UNKNOWN_ERROR:
x.innerHTML="An unknown error occurred."
break;
}
}
getLocation();
</script>
HTML5-sessionStorage的使用:
sessionStorage的使用：存儲數(shù)據(jù)到本地。存儲的容量5mb左右浴骂。
1.這個數(shù)據(jù)本質(zhì)是存儲在當(dāng)前頁面的內(nèi)存中-意味著其它頁面和瀏覽器無法獲取數(shù)據(jù)
2.它的生命周期為關(guān)閉當(dāng)前頁面乓土，關(guān)閉頁面，數(shù)據(jù)會自動清除
setItem(key,value):存儲數(shù)據(jù)溯警，以鍵值對的方式存儲
getItem(key):獲取數(shù)據(jù)帐我，通過指定名稱的key獲取對應(yīng)的value值
removeItem(key):刪除數(shù)據(jù)，通過指定名稱key刪除對應(yīng)的值
clear():清空所有存儲的內(nèi)容
script>
/*存儲數(shù)據(jù)*/
document.querySelector("#setData").onclick=function(){
/*獲取用戶名*/
var name=document.querySelector("#userName").value;
/*存儲數(shù)據(jù)*/
window.sessionStorage.setItem("userName",name);
}
/*獲取數(shù)據(jù)*/
document.querySelector("#getData").onclick=function(){
/*如果找不到對應(yīng)名稱的key,那么就會獲取null*/
var name=window.sessionStorage.getItem("userName");
alert(name);
}
/*刪除數(shù)據(jù)*/
document.querySelector("#removeData").onclick=function(){
/*在刪除的時候如果key值錯誤愧膀，不會報錯，但是也不會刪除數(shù)據(jù)*/
window.sessionStorage.removeItem("userName1");
}
</script>
HTML5-localStorage的使用:
<pre>
localStorage的使用：
1.存儲的內(nèi)容大概20mb
2.不同瀏覽器不能共享數(shù)據(jù)谣光。但是在同一個瀏覽器的不同窗口中可以共享數(shù)據(jù)
3.永久生效檩淋，它的數(shù)據(jù)是存儲在硬盤上，并不會隨著頁面或者瀏覽器的關(guān)閉而清除.如果想清除萄金，必須手動清除
setItem(key,value):存儲數(shù)據(jù)蟀悦，以鍵值對的方式存儲
getItem(key):獲取數(shù)據(jù)，通過指定名稱的key獲取對應(yīng)的value值
removeItem(key):刪除數(shù)據(jù)氧敢，通過指定名稱key刪除對應(yīng)的值
clear():清空所有存儲的內(nèi)容</pre>
<script>
document.querySelector("#setData").onclick=function(){
var name=document.querySelector("#userName").value;
/*使用localStorage存儲數(shù)據(jù)*/
window.localStorage.setItem("userName",name);
}
/*獲取數(shù)據(jù)*/
document.querySelector("#getData").onclick=function(){
var name=window.localStorage.getItem("userName");
alert(name);
}
/*清除數(shù)據(jù)*/
document.querySelector("#removeData").onclick=function(){
window.localStorage.removeItem("userName");
}
</script>
