每日前端签到（第117天）

第117天（2018-11-29）

• [html] HTML5规范将元素分为哪几个大类？分别说说它们的特点
• [css] 举例说明伪类:nth-child、:first-child与:first-of-type这三者有什么不同？
• [js] 如何实现文件拖动上传？
• [软技能] 你有开发过弹幕吗？知道它的原理吗？说说看

题目一：

image.png

题目二：
三个伪类分别表示第几个孩子，第一个孩子，类型是该属性的第一个元素
题目三：

const dragUpload = document.getElementById('dragUpload');
dragUpload.addEventListener('dragover', (e) => {
  e.preventDefault();
  // 必须要有 dragover 同时需要 preventDefault，否则不会触发 drop 事件
});

dragUpload.addEventListener('drop', (e) => {
  e.preventDefault();
  // 获取到拖拽进来的文件
  const {dataTransfer:{files = {}} = {}} = e || {};
  // console.log(e.dataTransfer.files);
  console.log('dropped: ', files);
  // 获取到文件后就可以做上传的操作了
});

题目四：
没有开发过，如果要我来开发的话我会这样做：

在video上方设置一个弹幕container，设置相对定位。子元素都是绝对定位并设置z-index。
生成一个dom将弹幕内容填充进去，在container中append
设置dom的animation动画，从右到左划过整个video
将带有时间戳信息的弹幕内容通过规定好的格式发送给后端
PS：

顺序可以调换，一般是确定后台接收到数据了再生成dom
没了解过如何实现弹幕防挡。