H5新增API

一. 全屏显示

<script>
 //判断浏览器是否正常兼容
// var img=document.querySelector("#imgs");
 var img=document.querySelector("div");
 var btn=document.querySelector(".big");
 btn.onclick=function(){
  if(img.requestFullScreen){
   img.requestFullScreen();
  }else if(img.mozRequestFullScreen){
   img.mozRequestFullScreen();
  }else if(img.msRequestFullScreen){
   img.msRequestFullscreen();
  }else if(img.webkitRequestFullScreen){
   img.webkitRequestFullScreen();
  }else if(img.oRequestFullScreen){
   img.oRequestFullScreen();
  }
  
 }
 document.querySelector(".cancel").onclick=function(){
  //取消全屏只和document有关
   document.webkitCancelFullScreen();
 }
 document.querySelector(".panduan").onclick=function(){
  alert(document.webkitIsFullScreen);//判断是否为全屏，返回结果为布尔型
 }
 </script>

或者用全屏伪类选择器
div：full-screen{ }
二.上传文件的读取
步骤：
1.文件域
2，选择需要的文件，读取fileReader
3.将读取的内容显示到页面

<script>
  var file=document.querySelector('input');
  var div=document.querySelector("div");
//  console.log(files);打印结果为input标签
  file.onchange=function(){
//   for(var k in file){遍历file，查看其有哪些属性
    console.log(file[k]);
//   }
//   console.log(this.files);file的files属性存放所选择文件的相关内容(FileList {0: File, length: 1}0: File {name: "笔记.txt", lastModified: 1564481637729, lastModifiedDate: Tue Jul 30 2019 18:13:57 GMT+0800 (中国标准时间), webkitRelativePath: "", size: 346, …}length: 1__proto__: FileList)
   var reader=new FileReader();
//   reader.readAsText(this.files[0]);//将内容村存储到result里面
   reader.readAsDataURL(this.files[0]);//读取的是files[0]里面的地址值
   console.log(this.files[0])
   reader.onload=function(){
//    div.innerHTML=this.result;
    div.innerHTML='<img src="'+this.result+'"></img>';
   }
  }
 </script>

三。图片的任意拖放

步骤及思路：
1.哪个元素需要拖放则给那个元素设置
文本类型的标签需要设置draggable=“true”；
而图片则不需要设置，因其本身就具有可拖动性
2.找到源文件，设置拖拽
ondragstart:开始拖拽；ondrag:拖拽中；ondragend拖拽结束

ondragenter:进入目标文件；ondragover:悬浮于目标文件上方
ondragleave:离开目标对象时触发；ondrop:在目标对象上方释放
3.找到目标文件设置释放
若要触发ondrop则需要在ondragover中阻止默认事件
方法一：

var img=document.querySelector("#imgs");
//  var p=document.querySelector("P");
//  var target=document.querySelector(".div2");
  //方法一：灵活性差
//  target.ondragover=function(event){
//   event.preventDefault();
//  }
//  target.ondrop=function(){
//   this.appendChild(img);
//   this.appendChild(p);
//  }

方法二：

//方法二缺点:全局变量太多
//  var obj=null;
//  document.ondragstart=function(event){
//   obj=event.target;//用全局变量obj存放当前事件对象
//  }
//  document.ondragover=function(event){
//   event.preventDefault();
//  }
//  document.ondrop=function(event){
//   event.target.appendChild(obj);
//  }

方法三：

//方法三
  document.ondragstart=function(event){
   event.dataTransfer.setData("text/html",event.target.id);
  }
  document.ondragover=function(event){
   event.preventDefault();
  }
  document.ondrop=function(event){
   var id=event.dataTransfer.getData("text/html");//获取存储的数据
   event.target.appendChild(document.getElementById(id));
  }

四.本地存储
1.localStorage:存储20M内容，数据永久性保留在浏览器中
2.sessionStorage:5M，关闭浏览器后数据消失

<script>
 //存入写死的数据
//   window.sessionStorage.setItem('age',23);
//   window.sessionStorage.setItem('pwd',123);
//   window.sessionStorage.setItem('name','张三');
   var username=document.querySelector('#username');
   document.querySelector('#setData').onclick=function(){
    // 点击之后 得到文本框中的值
    var val=username.value;
    // 存储数据
    window.sessionStorage.setItem('name',val);
   }
   
   document.querySelector('#getData').onclick=function(){
    alert(window.sessionStorage.getItem('name'));
   }
   document.querySelector('#delData').onclick=function(){
    // window.sessionStorage.removeItem('name');清除单条数据
    window.sessionStorage.clear();//清除所有的数据
   }
//   localStorage的写法如上，替换sessionStorage
 </script>