1.全屏（requestFullscreen）
注意： 存在兼容性問題
<body>
<input type="button" value='進入全屏幕'/>
</body>
<script type="text/javascript">
// query方法 支持 CSS3中的選擇器
document.querySelector('input[type=button]').onclick = function (e){
// 標準的語法 就是下面這個
// ie11 以下 都不支持
// 由于兼容性問題 以及 瀏覽器自帶了全屏 實際開發(fā)中 使用頻率 較低
if(this.requestFullscreen){
this.requestFullscreen();
}else if(this.webkitRequestFullScreen){
this.webkitRequestFullScreen()
}else if(this.msRequestFullscreen){
this.msRequestFullscreen();
}else if(this.mozRequestFullScreen){
this.mozRequestFullScreen();
}
}
</script>
解釋：此api有快捷鍵F11可以實現(xiàn)，在實際開發(fā)中用的十分少用。
2.文件讀取 （FileReader）##
1. 創(chuàng)建文件讀取對象
var reader = new FileReader();
2.通過當前的file標簽 獲取選擇的文件
console.log(this.files);
3.調(diào)用該對象的方法讀取文件 文件
4.讀取文件是一個耗時操作 不一定什么時候讀取完畢
reader.readAsDataURL(this.files[0]);
// 添加事件
5.耗時操作 通過事件的方式進行注冊 并且回調(diào)
reader.onload = function (){
6.使用讀取完畢的文件
console.log(reader.result);
7.使用返回的結(jié)果 即可
document.querySelector('.iconBox').style.background = 'url('+ reader.result+') no-repeat center/cover';
}
- 實現(xiàn)加載率
//onprogress * 當瀏覽器正在獲取媒介數(shù)據(jù)時運行的腳本帕识。
reader.onprogress=function(evt){
var precent=evt.loaded/evt.total;
// precent=precent.toFixed(4);
precent=(precent*100).toFixed(2);
console.log(precent);
//讀取了多少（加載當前）
console.log(evt.loaded);
//一共需要加載多少
console.log(evt.total);
document.querySelector("h2").innerHTML=precent+'%';
}
在onprogress（evt）事件中
//讀取了多少（加載當前）
console.log(evt.loaded);//一共需要加載多少
console.log(evt.total);
代碼演示：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.iconBox{
width: 200px;
height: 200px;
border:5px dashed red;
}
.container{
display: flex;
}
</style>
</head>
<body>
<h1>請選擇您的頭像</h1>
<div class='container'>
<input type="file" id="selectFile" />
<div class='iconBox'></div>
</div>
<h2></h2>
</body>
</html>
<script type="text/javascript">
document.querySelector('input[type=file]').onchange = function (){
// console.log('123');
// 創(chuàng)建文件讀取對象
var reader = new FileReader();
// 通過當前的file標簽 獲取選擇的文件
console.log(this.files);
// 調(diào)用該對象的方法讀取文件 文件
// 讀取文件是一個耗時操作 不一定什么時候讀取完畢
reader.readAsDataURL(this.files[0]);
// 添加事件
// 耗時操作 通過事件的方式進行注冊 并且回調(diào)
reader.onload = function (){
// 使用讀取完畢的文件
console.log(reader.result);
//使用返回的結(jié)果 即可
document.querySelector('.iconBox').style.background = 'url('+ reader.result+') no-repeat center/cover';
}
reader.onprogress=function(evt){
var precent=evt.loaded/evt.total;
// precent=precent.toFixed(4);
precent=(precent*100).toFixed(2);
console.log(precent);
console.log(evt.loaded);//讀取了多少
console.log(evt.total);//一共多少
document.querySelector("h2").innerHTML=precent+'%';
}
}
</script>
3.拖拽事件
鼠標控制元素 ，事件：
ondragstart | 在拖動操作開端運行的腳本。（開始移動元素）
ondrag | 元素被拖動時運行的腳本缭黔。 （移動元素移動時）
ondragend | 在拖動操作末端運行的腳本。（結(jié)束移動元素）
目標元素（移動到的區(qū)域成為目標元素）事件：
ondragenter | 當元素元素已被拖動到有效拖放區(qū)域時運行的腳本芽突。（進入目標元素）
ondragleave | 當元素離開有效拖放目標時運行的腳本试浙。（離開目標元素）
ondragover | 當元素在有效拖放目標上正在被拖動時運行的腳本。（在目標元素內(nèi)移動）
ondrop | 當被拖元素正在被拖放時運行的腳本寞蚌。(在目標元素內(nèi)放下)
注意：
- 如果使用ondrop事件田巴，必須在前面先定義使用ondragover事件，否則事件ondrop會無效挟秤。
4.本地存儲（localStorage）和（sessionStorage）
1.文檔源：
注意：在使用本地存儲的時候壹哺，只能在同源下使用，不能跨域使用
（跨域的意思是在文檔源中 協(xié)議艘刚，主機名和端口任意一個不同）
2.本地存儲api
//查找數(shù)據(jù)
localStorage.key(i);
sessionStorage.key(i);
//存儲數(shù)據(jù)
localStorage.setItem(key,value);
sessionStorage.setItem(key,value);
//得到數(shù)據(jù)
localStorage.getItem(key);
sessionStorage.getItem(key);
//刪除數(shù)據(jù)
localStorage.removeItem(key);
sessionStorage.removeItem(key);
localStorage.clear();
sessionStorage.clear();
//存儲json數(shù)據(jù)
var obj={name:'hellow'};
JSON.stringify( obj ); //轉(zhuǎn)化成json字符串
var str=JSON.stringify( obj );
JSON.parse( str ); //轉(zhuǎn)化成json對像
存儲json對象的代碼演示：
var obj={name:'hp'};
var o=JSON.stringify( obj );
// console.log(o);
window.localStorage.setItem('myColor',o);
console.log(JSON.parse(window.localStorage.getItem('myColor',obj) ));
5.地理定位（navigator.geolocation）
window.navigator.geolocation.getCurrentPosition(function(position){
})
使用案例：
window.navigator.geolocation.getCurrentPosition(function(position){
//console.log(position);
console.log('位置獲取成功');
console.log('經(jīng)度:'+position.coords.longitude);
console.log('緯度:'+position.coords.latitude);
})
6.視頻api(video)
| 方法 | 屬性 | 事件 |
|---|-----|
| play() | currentSrc | play
|pause() | currentTime | pause
|load() | videoWidth | progress
|canPlayType | videoHeight | error
| | duration | timeupdate
| | ended | ended
| | error | abort
| | paused | empty
| | muted | emptied
| | seeking | waiting
| | volume | loadedmetadata
| | height | null |
| | width | null |
注釋：在所有屬性中管宵，只有 videoWidth 和 videoHeight 屬性是立即可用的。在視頻的元數(shù)據(jù)已加載后攀甚，其他屬性才可用箩朴。
