前端之简易弹幕实现

实现效果：

打开网页，直接显示一遍本地存储的弹幕（本地存储的主要用于效果查看，可删）；
编辑新的弹幕，点击发送，首先显示最新弹幕，再依次显示一遍所有弹幕；
点击清屏，当前显示框div下的所有子元素全部，但已进入发送队列的会继续显示（可认为是bug，但也可以认为不是，毕竟只是清理当前屏幕而已，又不是关闭弹幕 > v <）

实现思路：

1. html布局：中间一个div显示框，用于装填弹幕消息；下面两个button，一个用于发送新消息，一个用于清屏。
2. js逻辑：
   a. 发送按钮事件：获取input输入框中的值val，将其传入senddanmu()方法中，同时将val加入消息list队列。
   b. 清屏按钮事件：获取显示框div，用empty()方法清空其下的所有子元素。
   c. senddanmu(val)方法：
   首先，创建一个新的div标签，将传入的弹幕消息val加入进去，主要设置好标签的position(由于要给div标签添加动画，故只能为absolute或fixed或relative)，top、right或者left(即确定好div的初始位置)。
   然后，将新创建的div标签加入显示框div中。然后通过访问显示框div新加入的子元素获得新创建的div标签，接着对其添加动画效果。
   d. danmu()方法：每间隔一定时间，依次发送消息队列中的消息。可以用setTimeout()或者setInterval()实现时间间隔，由于它们均是异步操作，并且原理各有不同，有坑，仔细~
   e. randomColor()方法：随机生成六位十六进制rgb颜色，用于给弹幕消息设置不同的颜色。

实现代码

html：

<div class="container-fluid" style="display:flex;flex-direction:column;align-items:center;">       
  <div class="screen" style="position:relative;width:80%;height:400px;border:1px solid #999999;margin-top:30px;">
  //插入弹幕消息
  </div>
  <div style="margin-top:20px;">
  	<input type="text" style="width:400px;height:30px;" placeholder='说点什么...'id="something" autocomplete="off">
  </div>
  <div style="margin-top:10px;">
  	<button style="color:orange;font-size:20px;margin-right:20px;" onClick="saySomething()">发射</button>
	<button style="color:purple;font-size:20px;margin-left:20px" onClick="doClear()">清屏</button>
  </div>
</div>

js：

var t=0;
var list=['1','2','3','4','5','6','7','8'];
var diff=40