HTML5新增API

2019-04-24

meter仪表元素

用于表示一个已知最大值和最小值的记数仪表，比如电池的剩余电量、速度表等。
标签：<meter>

属性	值	描述
high	number	指定仪表正常范围的最大值。该值必须小于等于max属性。
low	number	指定仪表正常范围的最小值。该值必须大于等于min属性。
max	number	定义最大值。默认值是 1。
min	number	定义最小值。默认值是 0。
optimum	number	定义什么样的度量值是最佳的值。如果该值高于 "high" 属性，则意味着值越高越好。如果该值低于 "low" 属性的值，则意味着值越低越好。
value	number	定义度量的默认值，默认为0。

progress进度条元素

标签：<progress>

属性	值	描述
max	number	定义完成的值。
value	number	定义进程的当前值。

拖放元素

在HTML5中，元素只要设置了draggable属性为true就可以实现拖动效果。

事件	事件源	描述
ondrag	被拖动的元素	拖动过程中不断触发
ondragend	被拖动的元素	拖动结束时触发
ondragenter	拖动时鼠标经过的元素	被拖动的元素进入本元素的范围内时触发
ondragleave	拖动时鼠标经过的元素	被拖动的元素离开本元素时触发
ondragover	拖动时鼠标经过的元素	被拖动的元素进入本元素的范围内拖动时会不断触发
ondragstart	被拖动的元素	开始拖动操作时触发
ondrop	拖动时鼠标经过的元素	其他元素被放置到了本元素中时触发

示例：

<div id="d1" draggable="true" style="width:80px;height:80px;
                             background-color:#bbb;position:absolute;">
</div>
<script type="text/javascript">
    window.onload=function(){
        var d1 = document.getElementById("d1");
        document.ondragover = function(){
           /*拖动元素时会显示禁止标志，这是因为document对象默认阻止了拖动事件。
           可以为document的ondragover事件指定监听器，返回false即可。*/
           return false;
        }
        document.ondrop = function(){
            d1.style.left = event.clientX + "px";
            d1.style.top = event.clientY + "px";
        }
    }
</script>

文件上传验证

HTML5为type="file"的input元素增加了两个属性：

accept:控制上传文件的类型，其值为一个或多个MIME类型的字符串，多个字符串之间用逗号分隔。

multiple:设置是否允许选择多个文件。

可以通过files属性访问type="file"的input元素内的所有文件。该属性返回数组对象，每个数组元素都是个File对象。

File对象可使用如下属性获取文件信息：

name:文件名，不含文件路径 type:文件的MIME类型字符串 size:文件大小

<body>
    上传照片：<input id="photo" type="file" multiple accept="image/*"/>
    <input type="button" value="显示上传文件详情" onclick="showDetails();"/>
    <script type="text/javascript">
        function showDetails(){
        // 获取文件上传域内输入的多个文件
        var arr = document.getElementById("photo").files;
        // 遍历每个文件
        for(let i = 0 ; i < arr.length ; i ++){
             pNode = document.createElement("p");
            pNode.innerHTML = "文件名：" + arr[i].name + "，文件类型：" + arr[i].type
        　　　                 + "，文件大小：" + arr[i].size;
            document.body.appendChild(pNode);
            }
        }
     </script>
</body>

FileReader对象

使用FileReader对象可以在客户端读取文件上传域所选择的文件内容。

result属性：用于获取已读取的文件内容

主要方法：

方法	描述
readAsText(file,encoding)	以文本文件方式读取文件。encoding指定读取文件的字符集，默认为UTF-8。
readAsBinaryString(file)	以二进制方式读取文件。
readAsDataURL(file)	以DataURL方式读取文件。
abort()	停止读取。

主要事件：监听文件读取过程

事件	描述
onloadstart	开始读取数据时触发。
onprogress	正在读取数据时触发。
onload	成功读取数据后触发。
onloadend	读取数据完成后，无论成功或失败都将触发。
onerror	读取失败时触发。

Web存储

使用HTML5可以在本地存储用户的浏览数据。相对于Cookie更加安全快速。

本地存储数据的两个对象为：

localStorage - 用于长久保存整个网站的数据，保存的数据没有过期时间，直到手动去除。

sessionStorage - 用于临时保存同一窗口(或标签页)的数据，在关闭窗口或标签页之后将会删除这些数据。

不管是 localStorage，还是 sessionStorage，可使用的API都相同，常用的有如下几个（以localStorage为例）：

保存数据：localStorage.setItem(key,value);

读取数据：localStorage.getItem(key);

删除单个数据：localStorage.removeItem(key);

删除所有数据：localStorage.clear();

得到某个索引的key：localStorage.key(index);