html5第二天

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.文档源：

截图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 属性是立即可用的。在视频的元数据已加载后，其他属性才可用。