1.file api
multiple 允许选择多个文件
File 对象
lastModified 最后一次修改时间（毫秒）
lastModifiedDate 最后一次修改日期
name 文件名
type 文件类型
size 文件大小
<input type="file" id="myFile" multiple>
var inp = document.querySelector("#myFile");
inp.onchange = function(){
console.log(this.files)
}
FileReader
1、构建FileReader 实例
2、选择要使用的读取方式，如readAsDataURL()，将文件对象传递给该方法
3、监听读取完成事件Onload，通过this.result 将得到读取结果
4、其他事件监听
读取方式
fr.readAsDataURL(file); 以地址读取 base64
fr.readAsText(file); 以文本读取
fr.readAsBinaryString(file); 以二进制读取
事件
onload 读取完成
onloadstart 开始读取
onloadend 结束读取 无论成功失败都会触发
onerror 错误触发
onabort 中断读取时触发
fr.abort() 中断读取
var inp = document.querySelector("#myFile");
inp.onchange = function(){
console.log(this.files)
for(var i=0;i<this.files.length;i++){
var file = this.files[i];
console.log(file);
var fr = new FileReader();
fr.readAsDataURL(file);
// fr.readAsText(file);
// fr.readAsBinaryString(file);
fr.onload = function(){
console.log(this.result);
// var img = new Image();
// img.src = this.result;
// document.body.appendChild(img);
}
}
}
2、drag (拖拽)
draggable 允许该元素被拖动（添加即为TRUE的属性： disabled checked selected multiple draggable
contenteditable：允许元素可被编辑内容IE8+，应用于表格）
<div class="box1">
<div class="box" draggable="true"></div>
</div>
<div class="box2"></div>
var box= document.querySelector(".box");//被拖拽元素
var target= document.querySelector(".box2");//目标元素
box.ondragstart = function(e){
console.log(1,"开始");
console.log(e.dataTransfer);
//在拖拽开始拿到拖拽元素的标识
e.dataTransfer.effectAllowed = "move";
e.dataTransfer.setData("text",e.target.className);
}
box.ondrag = function(){
console.log(2,"拖拽中")
}
box.ondragend = function(){
console.log(3,"拖拽结束")
}
target.ondragenter = function(){
// console.log(4,"拖拽进入目标元素")
}
target.ondragleave = function(){
// console.log(5,"拖拽离开目标元素")
}
//浏览器默认禁止在元素上drop（禁止将其他元素拖拽到目标元素上放手）
//需要在dragover时 阻止浏览器的默认事件才能触发ondrop
target.ondragover = function(e){
// console.log(6,"在目标元素上移动")
e.preventDefault();//阻止浏览器默认事件
e.dataTransfer.dropEffect = "move";
}
target.ondrop = function(){
console.log(7,"在目标元素放手");
// target.appendChild(box);
var eClass = e.dataTransfer.getData("text");
target.appendChild(document.querySelector("."+eClass));
}
dataTransfer 贯穿于整个拖拽生命周期的承载对象
dataTransfer.setData(format,content)
format : 数据格式，支持text URL 或其他MIME 类型
content : 要传递的内容
dataTransfer.getData(format) 获取通过setData设置的值
dataTransfer.effectAllowed 设置拖拽元素的鼠标效果
常见的有：copy link move none all copyLink...
当指定为none时，ondrop无法触发
e.dataTransfer.setdragImage(img,10,10)
只能在ondragstart 里设置
dataTransfer.dropEffect 设置在目标元素的鼠标效果(在dragover里面设置)
如果和effectAllowed 同时设定，则必须与affectAllowed 值相同，否则无法放置拖拽元素
3、fullScreen
<div id="box">这是全屏内容</div>
<button>全屏</button>
<button>退出全屏</button>
console.dir(document);
document.querySelector("button").onclick = function () {
// document.body.webkitRequestFullScreen(); document.querySelector("#box").webkitRequestFullScreen();
}
document.querySelectorAll("button")[1].onclick = function () {
document.webkitCancelFullScreen();
}
4、visibility页面可见性
console.log(document.visibilityState);
document.addEventListener("visibilitychange", function () {
console.log(document.visibilityState);
console.log(document.hidden);
})
5、storage
存储分为 本地存储 和 会话存储
在一定程度上解决了 cookie 的不便利性（4K，数据自动被传上服务器）
本地存储 ：localStorage
会话存储 ：sessionStorage
存储上限 ：5M
存储模式： 键值对(键值都要是字符串)
API：灵活
localStorage 除非手动清除，否则永久存在，没有超时时间
localStorage 和 sessionStorage 的用法相同。唯一不同的是，有效期不同。
sessionStorage 是只在会话期有效。localStorage 永久有效
console.log(localStorage)
localStorage.setItem("user","admin")//增加或修改存储内容
console.log(localStorage.getItem("user"))
var obj = {age:30,adress:"jing"}
localStorage.setItem("desc",JSON.stringify(obj))
console.log(JSON.parse(localStorage.getItem("desc")));
localStorage.removeItem("user");//移除指定的存储内容
console.log(localStorage);
localStorage.clear();
console.log(localStorage);//清空存储内容
6、location
geolocation 是有关用户隐私的API,需要得到用户的同意才能有效
为了安全限定，要求正式网站必须使用HTTPS协议
自行测试使用localhost 访问（注意：IP地址不可）
服务器不稳定
navigator.geolocation.getCurrentPosition(successCallback,err)
sucessCallback 成功回调函数，返回坐标信息
err 失败回调函数 返回失败信息
options 配置项
