FreeCodeCamp弹幕的一些随记

HTML

栅格水平居中

<div class="row justify-content-center"></div>

输入文本框

<input type="text" class="form-control" placeholder="说点什么？" id="text"></input>

按钮(onclick定义点击调用js函数)

<button class="btn btn-block btn-primary" id="fire" onclick="appendText()">发射</button>

---

CSS

overflow-x可以隐藏水平滚动条

body{
  padding-top:60px;
  overflow-x:hidden;
}

默认情况下，所有的 HTML 元素有一个静态的位置，且是不可移动的。 如果需要改变，我们需要将元素的 position 属性设置为 relative, fixed, 或 absolute!应用jquery的动画效果的元素必须改变元素的 position 默认属性；

.message{
  position:absolute;
}

JS

从文本框获取弹幕评论，并添加到数组中。数组方法unshift（）是把文本移入在数组头部。
扩展：

• shift() 移出第一个元素
• unshift() 移入第一个元素
• pop() 弹出最后一个元素
• push() 压入最后一个元素

var commentArray = new Array();

var appendText = function(){
  if($("#text").val()){
  var text1 = $("#text").val();
  commentArray.unshift(text1);
  $("#text").val('');
    }
}

jQuery CSS 操作函数offset()返回第一个匹配元素相对于文档的偏移位置，具有top、left两个属性；
jQuery CSS 操作函数css()设置或返回匹配元素的样式属性;

$(selector).animate({params},speed,callback);

• params 参数:必需的，定义形成动画的 CSS 属性。
• speed 参数：可选的 ，规定效果的时长。它可以取以值："slow"、"fast" 或毫秒。
• callback 参数：可选的 ，是动画完成后所执行的函数名称。

//滚动评论
var topMin = $(".barrage").offset().top;
var topMax = topMin + $(".barrage").height();
var _top = topMin;
var moveObj = function(obj){
  var _left = $(".barrage").width()-obj.width();
  obj.css({left:_left,top:_top,color:"red"});
  _top = (_top+50 > topMax )? topMin : _top + 50;
  obj.animate({left:"-"+ _left +"px"},20000,function(){obj.remove();});
}

append()函数实质是在DOM元素的内部的末尾（即</div>前）添加元素；添加的弹幕需要移动，所以加上 position 默认属性被更改了的类；
setTimeout（function_name,delay_time_ms）设置延迟执行;

var arrayLength = 0;
var getRun = function(){
  var index;
  var comment;
  if(commentArray.length > 0){
    if(arrayLength != commentArray.length){
    index = 0;
    arrayLength = commentArray.length;
    }else{
    index = Math.floor(arrayLength*Math.random());
    }
    comment = $("<div class=\"message\">"+commentArray[index]+"</div>");
    $(".barrage").append(comment);
    moveObj(comment);
  }
  setTimeout(getRun,5000);
}