学习记录：基于jQuery的简单弹幕墙

一个非常简单的弹幕墙，仅实现了弹幕显示，没有数据存储和后续播放。
实现原理是从输入框获得弹幕内容，经过修饰包装后以添加DOM的方式动态显示在弹幕区内。

弹幕显示的高度为显示区内的随机数，减去20是为了不会顶着顶部，如果考虑到不压着底下字幕，还需要加上适当的像素。

var spanH = Math.floor((Math.random())*(danmuH-20));

弹幕的移动动画效果

var spanstring = $("#content_display>span:last-child");
 //获取刚添加进DOM里面的弹幕，这个选择器的意思为选择#display元素下面的最后一个直接子元素span。
 spanstring.stop().animate({"left":danmuW},10000,"linear",function(){
      $(this).remove();
      });
//动画，注意到开始前先设置了一个停止方法然后才开始运行动画，并且运行完后调用一个回调函数将此对象移除。里面的参数{"left":danmuW}指的是动画末位置。

颜色设置实现为先自定义了7个颜色，然后弹幕生成时随机选择一个添加进样式，为什么不直接用所有颜色呢，主要是考虑到美观问题，随机生成所有颜色的话，白色，浅色等会难以识别。

var colorArr=["#cfaf12","#12af01","#981234","#adefsa","#db6be4","#f5264c","#d34a74"]; 
var colorra = Math.floor(Math.random()*7);
danmuspan.css({"top":spanH,"left":0,"font-size":20,"font-family":"Helvetica","color":colorArr[colorra]});

这个小项目是在freecodecamp上javascript的入门练习，虽然很简单，但是一开始完全摸不着头绪，搜索了好几种实现方法，最终才写出来，跟成熟的方案比删减了很多功能，比如定时循环播放，后台数据存储等，希望以后技术精进后可以再写一个更完善的出来。