前端之简易弹幕实现

实现效果：

打开网页，直接显示一遍本地存储的弹幕（本地存储的主要用于效果查看，可删）；
编辑新的弹幕，点击发送，首先显示最新弹幕，再依次显示一遍所有弹幕；
点击清屏，当前显示框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：

       
  

  //插入弹幕消息
  
  

  	
  
  

  	发射
	清屏
  

js：

var t=0;
var list=['1','2','3','4','5','6','7','8'];
var diff=40;  //相邻弹幕高度差
var _height=10;  //弹幕初始高度
function saySomething(){    //发送button的绑定事件
  var something = document.getElementById("something").value;
  document.getElementById("something").value = "";
  list.push("'"+something+"'");
  senddanmu(something);
  setTimeout("danmu()",1000);
}

function doClear(){       //清屏button的绑定事件
  console.log("clear");
  $(".screen").empty();
}

$(document).ready(function(){
  danmu();//发默认弹幕
});

function senddanmu(val){     //发送单条弹幕
  var item_t = "
"+val+"
";
      $(".screen").append($(item_t));
      var item = $(".screen").children()[$(".screen").children().length - 1];
      $(item).animate({left:'10px'},10000,function(){
        $(this).remove();
      });
      //console.log(item);
      _height = _height + diff;
      // console.log($(".screen").height());
      // console.log(_height);
      if(_height > $(".screen").height()){
        _height = 20;
      } 
}
function danmu(){     //发送弹幕列表list
  //使用setTimeout实现时间间隔
  if(list){
    for(var i = 0; i<list.length;i++){
      console.log(list.length);
      t = setTimeout("senddanmu("+list[i]+")",i*1000);
    } 
  }
  //使用setInterval实现时间间隔
  // var i = 0;
  // t = setInterval(function(){
  //   senddanmu(list[i]);
  //   i++;
  //   if(i > list.length - 1){
  //     clearInterval(t);
  //   }
  // },2000);
}

function randomColor(){      //随机生产字体颜色
  var color='#';
  for(var i = 0;i<6;i++){
    var temp = Math.floor(Math.random()*15)+1;
    color = color+ temp.toString(16);
  }
  // console.log(color);
  return color;
}