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

html5第二天_第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 属性是立即可用的。在视频的元数据已加载后,其他属性才可用。

你可能感兴趣的:(html5第二天)