freecodecamp弹幕实现

HTML:

<div class='dm'>
  <div class='dm_screen'>
       
  </div>
  <div class='send'>
    <p>
      <input placeholder='说点什么？' class='s_txt'>
    </p>
    <p>
      <input type='button' class='s_sub' value='发射'>
      <input type='button' class='s_del' value="清屏">
    </p>
  </div>
</div>

CSS:

 .s_txt{
    width:388px;
    height:34px;
    border:1px solid rgb(204,204,204);
    border-radius:3px;
    padding-left:10px;
    text-align:center;
  }
  .s_sub{
    border:1px solid rgb(230,80,30);
    color:rgb(230,80,0);
    border-radius:3px;
    text-align:center;
    height:35px;
    line-height:35px;
    font-size:14px;
    width:159px;
    background-color:white;
    text-align:center;
  }
  .s_del{
    border:1px solid rgb(176,168,165);
    color:rgb(176,168,165);
    border-radius:3px;
    text-align:center;
    height:35px;
    line-height:35px;
    font-size:14px;
    width:159px;
    background-color:white;
    text-align:center;
  }
  .dm{
    margin:20px;
    
  }
  .send{
    text-align:center;
  }
  .dm_screen{
    border:1px solid rgb(229,229,229);
    width:100%;
    height:380px;
    position:relative;
  }

  
 div .text{
  position:absolute;
  right:20px;
  font-size:15px;
  
 } 

JS:

$(document).ready(function(){
    var height=$('.dm_screen').height();
    var width=$('.dm_screen').width();
    var send=function(){
      var content=$('.s_txt').val();
      $('.s_txt').val('');
      var $neirong=$('<div class="text">'+content+'</div>');
      var topp=Math.random()*(height-20);
      var getRandomColor=function(){
         return '#'+((Math.random() * 0x1000000 << 0).toString(16))
      }
      $neirong.css({
         top:topp,
         color:getRandomColor(),
      })
      $('.dm_screen').append($neirong);
      $neirong.animate({left:'20px'},10000,function(){
       $(this).remove();  
      })
    }

    $('.s_txt').keypress(function(event){
      if (event.keyCode=='13'){
        $('.s_sub').trigger('click');
      }
    })

    $('.s_sub').click(function(){
      send();
    });

    $('.s_del').click(function(){
      $('.dm_screen').empty();
    })
 })

CodePen的链接:https://codepen.io/dirty-squid/pen/zbjead