每日前端签到（第八十八天）

第八十八天（2018-10-31）

• [html] HTML5标准提供了哪些新的API？你有用过哪些？
• [css] 当一个元素被设置为浮动后，它的display值变为什么呢？
• [js] 分别写出数组的交集、并集、差集、补集这四个方法
• [软技能] 你知道什么是图片防盗链吗？防盗链怎么实现呢？说说你的方法

题目一：
两个选择器API
document.querySelector()
document.querySelectAll()
地理定位API
getCurrrentPosition()
多媒体API
<video></video>
<audio></audio>
拖放
<div ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div draggable="true" ondragstart="drag(event)"></div>
文件
window.requestFileSystem()
XHR2
var xhr = new XMLHttpRequest();
xhr.open("POST", "@Url.Action("Upload")")
本地存储API
localStorage
sessionStorage
canvas
<canvas id="myCanvas" width="200" height="100">
svg
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red" />
</svg>
题目二：
一个元素被设为绝对定位或者浮动后，其display计算值就变为了block，尽管其表现形式和inline-block类似——包裹内部元素且不超出包含块的特性。按照如下方式在控制台尝试可验证：
var span = document.createElement('span');
document.body.appendChild(span);
console.log('1.' + window.getComputedStyle(span).display);
span.style.float = 'left';
console.log('2.' + window.getComputedStyle(span).display);
输出：
1.inline
2.block
题目三：
const intersect = (a, b) => a.filter(i => b.includes(i)) // 交
const exclude = (a, b) => a.filter(i => !b.includes(i)) // 差
const union = (a, b) => exclude(a, b).concat(b) // 并
const unionAll = (a, b) => a.concat(b) // 重复并
const xor = (a, b) => exclude(a, b).concat(exclude(b, a)) // 补
题目四：
token