1.全屏（requestFullscreen）
注意： 存在兼容性问题
<body>
<input type="button" value='进入全屏幕'/>
</body>
<script type="text/javascript">
// query方法 支持 CSS3中的选择器
document.querySelector('input[type=button]').onclick = function (e){
// 标准的语法 就是下面这个
// ie11 以下 都不支持
// 由于兼容性问题 以及 浏览器自带了全屏 实际开发中 使用频率 较低
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可以实现，在实际开发中用的十分少。
2.文件读取 （FileReader）##
1. 创建文件读取对象
var reader = new FileReader();
2.通过当前的file标签 获取选择的文件
console.log(this.files);
3.调用该对象的方法读取文件 文件
4.读取文件是一个耗时操作 不一定什么时候读取完毕
reader.readAsDataURL(this.files[0]);
// 添加事件 5.耗时操作 通过事件的方式进行注册 并且回调
reader.onload = function (){ 6.使用读取完毕的文件
console.log(reader.result);
7.使用返回的结果 即可
document.querySelector('.iconBox').style.background = 'url('+ reader.result+') no-repeat center/cover';
}
- 实现加载率
//onprogress * 当浏览器正在获取媒介数据时运行的脚本。
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');
// 创建文件读取对象
var reader = new FileReader();
// 通过当前的file标签 获取选择的文件
console.log(this.files);
// 调用该对象的方法读取文件 文件
// 读取文件是一个耗时操作 不一定什么时候读取完毕
reader.readAsDataURL(this.files[0]);
// 添加事件
// 耗时操作 通过事件的方式进行注册 并且回调
reader.onload = function (){
// 使用读取完毕的文件
console.log(reader.result);
//使用返回的结果 即可
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 | 在拖动操作末端运行的脚本。（结束移动元素）
目标元素（移动到的区域成为目标元素）事件：
ondragenter | 当元素元素已被拖动到有效拖放区域时运行的脚本。（进入目标元素）
ondragleave | 当元素离开有效拖放目标时运行的脚本。（离开目标元素）
ondragover | 当元素在有效拖放目标上正在被拖动时运行的脚本。（在目标元素内移动）
ondrop | 当被拖元素正在被拖放时运行的脚本。(在目标元素内放下)
注意：
- 如果使用ondrop事件，必须在前面先定义使用ondragover事件，否则事件ondrop会无效。
4.本地存储（localStorage）和（sessionStorage）
1.文档源：
图片：
注意：在使用本地存储的时候，只能在同源下使用，不能跨域使用
（跨域的意思是在文档源中 协议，主机名和端口任意一个不同）
2.本地存储api
//查找数据
localStorage.key(i);
sessionStorage.key(i);
//存储数据
localStorage.setItem(key,value);
sessionStorage.setItem(key,value);
//得到数据
localStorage.getItem(key);
sessionStorage.getItem(key);
//删除数据
localStorage.removeItem(key);
sessionStorage.removeItem(key);
localStorage.clear();
sessionStorage.clear();
//存储json数据
var obj={name:'hellow'};
JSON.stringify( obj ); //转化成json字符串
var str=JSON.stringify( obj );
JSON.parse( str ); //转化成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('经度:'+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 |
| width |
注释：在所有属性中，只有 videoWidth 和 videoHeight 属性是立即可用的。在视频的元数据已加载后，其他属性才可用。
网友评论