html5笔记02

一，Hbulider编辑器安装使用。
二，html5新增全屏幕效果
this.requestFullScreen();

/*querySelector()方法支持css3中的选择器*/ document.querySelector('input[type=button]').onclick=function () {    //标准的语法就是    //ie11以下都不支持    //由于兼容性问题以及浏览器自带了全屏，实际开发中很少用到全屏方法。    if (this.requestFullScreen) {      this.requestFullScreen();    } else if(this.webkitRequestFullScreen){      this.webkitRequestFullScreen();    }else if(this.msRequestFullScreen){       //ie浏览器    this.msRequestFullScreen();    }else if( this.mozRequestFullScreen){     //火狐    this.mozRequestFullScreen();  }}

二，文件读取：
onchange , readAsDataURL(this.files[0]) , reader.onload

用户点击头像实现实时预览的效果

 document.querySelector('input[type=file]').onchange=function () {    //创建文件读取对象    var reader=new FileReader();    //通过当前的file标签获取选择的文件    console.log(this.files);//值为一个数组形式    //调用该对象的方法读取文件    //读取文件是一个耗时操作不一定什么时候读取完毕，可以用onload添加事件    reader.readAsDataURL(this.files[0]);    reader.onload=function(){      // 使用读取完毕的文件      console.log(reader.result);      //使用返回的结果即可,cover缩放到跟屏幕一样大      document.querySelector('.iconBox').style.background='url('+reader.result+') no-repeat center/cover';    }}

三，文件拖拽布局：day02

/*定义全局变量保存拖放元素:*/var moveDom;  //让元素能够被拖拽的内容 丢进去  document.querySelector('.showBox').ondragover=function(e) { /* 1,先组织showbox的默认行为:为函数添加一个事件参数,调用事件参数e.*/    e.preventDefault();//让元素能够拖拽到框框中    } //拖拽元素 丢到容器内 会触发ondrop事件（如果没有在ondragover中阻止默认行为，是不可以拖拽事件触发的）  document.querySelector('.showBox').ondrop=function(e) {    /*获取moveDom的src属性并赋值给盒子*/    this.style.background='url('+moveDom.src+') no-repeat center/cover'    moveDom=this;}  //开始拖拽元素的时候会触发ondragstart事件。  /*获取所有img标签绑定拖拽事件*/ var imgs=document.querySelectorAll('img'); for(var i=0;i<imgs.length;i++){    imgs[i].ondragstart=function(){        moveDom=this;    } } }  /*document.querySelector('img').ondragstart=function(e) {    moveDom=this;  }

四，文件拖拽读取，

/*4，文件拖拽读取*//*触发ondragover事件*/ document.querySelector('.rd').ondragover=function(e){    e.preventDefault(); }/* 阻止ondrop事件默认跳转行为*/ document.querySelector('.rd').ondrop=function(e){    /*console.log('123');*/    e.preventDefault();    console.log(e.dataTransfer.files[0]);/* 创建文件读取对象*/ var reader= new FileReader();/* 调用文件读取对象*/reader.readAsDataURL(e.dataTransfer.files[0]);/*文件读取完毕后获取结果:*/reader.onload=function(){    document.querySelector('.rd').style.background='URL('+reader.result+') no-repeat center/cover'    } }}

js中文件读取：

 function jsReadFiles(files) {         if (files.length) {             var file = files[0];             //创建文件读取对象            var reader = new FileReader();             if (/text+/.test(file.type)) {//判断文件类型是否为text类型               reader.onload = function() {                    $('body').append('<pre>' + this.result + '</pre>');               }                reader.readAsText(file);            } else if(/image+/.test(file.type)) {//判断是否为imgage类型               reader.onload = function() {                   $('body').append('<img src="' + this.result + '"/>');                }                 reader.readAsDataURL(file);           }       }    }

五，web存储，保存换肤
localStorage保存的值 关闭浏览器之后 还是存在的
sessionStorage保存的值关闭浏览器之后是不存在的,
但是不能用localStorage做保存私密信息.

/*先获取三个div*/var colorDivs=document.querySelectorAll('.container>div');for (var i=0; i<colorDivs.length;i++) {    colorDivs[i].onclick=function(){        //获取自身的style 设置给body        document.body.style.backgroundColor=getComputedStyle(this).backgroundColor;    }}//保存数据，document.querySelector('input[value=保存]').onclick=function(){    //只能保存字符串，这里保存的是body的背景颜色    window.localStorage.setItem("myColor",getComputedStyle(document.body).backgroundColor)    alert("保存成功");}//读取数据，传入key就可document.querySelector('input[value=读取]').onclick=function(){    var result=window.localStorage.getItem("myColor");    document.body.style.backgroundColor=result;    alert("读取成功");}//删除数据，指定删除某一个键对应的值document.querySelector('input[value=清除]').onclick=function(){    window.localStorage.removeItem("myColor");/*  如果我们只想删除某一个的话,使用removeItem()*/    /*window.localStorage.clear();//全部清除*/    alert("清除成功");}/*打开浏览器,如果保存了颜色,那么直接加载该颜色*/window.onload=function(){    var color=window.localStorage.getItem('myColor');    if(color=!null){        document.body.style.backgroundColor=color;    }else{        alert("没有保存颜色哦");    }}

6，地图定位基本语法：
谷歌浏览器服务器在国外，定位读取非常耗时，可以借助工具和谐上网。
h5的定位只有一个经纬度，如果需要有图形界面，需要借助第三方的地图软件，调用里边的api实现地图显示。
定位两步：1，获取地理位置信息，2，如何显示到地图上边。
搜索百度地图api进行辅助显示地图样式
电脑是基于信号基站进行定位的，所以可能定位不是很准确。
（在您的秘钥里边修改秘钥后使用。）

<script type="text/javascript">    window.navigator.geolocation.getCurrentPosition(function(position){        console.log('位置获取成功');        console.log(position.coords.longitude);        console.log(position.coords.latitude);    // 百度地图API功能/*  通过div的id设置为地图*/    var map = new BMap.Map("allmap");    //设置地图 标注点的位置    var point = new BMap.Point(position.coords.longitude, position.coords.latitude);    map.centerAndZoom(point, 15);    var marker = new BMap.Marker(point);  // 创建标注    map.addOverlay(marker);               // 将标注添加到地图中    marker.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画    })

7，自定义播放器-布局页面

/*先获取video*/var videoDom=document.querySelector('video');    document.querySelector('#play').onclick=function(){        if(this.classList.contains('icon-pause')){            /*暂停播放*/            videoDom.pause();            /*移除暂停class*/            this.classList.remove('icon-pause');        }else{            videoDom.play();            this.classList.add('icon-pause');        }    }