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');
        }
    }