html5第二天

1.全屏（requestFullscreen）

注意： 存在兼容性问题

解释：此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);

代码演示：

    
        
        
        
    
    
        
请选择您的头像
        

            
            

        
        

    

3.拖拽事件

鼠标控制元素 ，事件：

    ondragstart    |     在拖动操作开端运行的脚本。（开始移动元素） 
    ondrag         |     元素被拖动时运行的脚本。 （移动元素移动时）
    ondragend      |     在拖动操作末端运行的脚本。（结束移动元素） 

目标元素（移动到的区域成为目标元素）事件：

ondragenter    |     当元素元素已被拖动到有效拖放区域时运行的脚本。（进入目标元素） 
ondragleave    |     当元素离开有效拖放目标时运行的脚本。（离开目标元素） 
ondragover     |     当元素在有效拖放目标上正在被拖动时运行的脚本。（在目标元素内移动） 
ondrop         |     当被拖元素正在被拖放时运行的脚本。(在目标元素内放下) 

注意：

1. 如果使用ondrop事件，必须在前面先定义使用ondragover事件，否则事件ondrop会无效。

4.本地存储（localStorage）和（sessionStorage）

1.文档源：

截图20170207161320.png

注意：在使用本地存储的时候，只能在同源下使用，不能跨域使用

（跨域的意思是在文档源中 协议，主机名和端口任意一个不同）

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 | null |
| | width | null |

注释：在所有属性中，只有 videoWidth 和 videoHeight 属性是立即可用的。在视频的元数据已加载后，其他属性才可用。