H5新API

2017-07-17 本文已影响0人 LorenaLu

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 配置项