斗鱼如何设置粉丝弹幕（代码也才这么点）

实现效果

项目分析

1、获取用户输入信息；

2、在页面中创建一个 <span></span>来放获取到的文本，并添加一些样式（字体大小、颜色等）；

3、给这个 span添加一个从右向左移动的动画；

4、动画结束后，移除这个 <span>。

思路很清楚了，就来动手实现一下。。

布局

页面中要有一个输入框让用户输入信息，还要一个盒子用来显示弹幕。为了美观，我多加了一些东西。

1、#dm 是显示弹幕的区域，input供用户输入信息（其中 placeholder 属性规定输入框中默认显示内容）。

2、其它元素都是为了美观和布局。

样式

跟以前一样，先给出代码然后再讲解。

1、首先还是格式化浏览器默认的 margin和 padding。overflow属性设置超出屏幕的部分隐藏，这样就不会出现下拉和水平的滚动条了。

2、#dm用来显示弹幕，我们把它的高度设置为 90vh。vh 是 CSS3 中新增的长度单位，表示相对于视口的高度。视口高度被均分为100单位的vh，90vh 就表示当前浏览器可视区域高度的 90%。（vw 就是视口宽度）

3、#dm span是每条弹幕的样式。你可以修改为你喜欢的样子，不过一定要设置 position
定位属性。

4、然后就是下面的输入部分了。使用了 flex布局 （也是CSS3 中新增的内容，太方便了）。只需要 align-items:center;justify-content:center; 这两句就可以使其中的子元素在水平和垂直方向居中。所以 #idDom 和 #content都使用了。

5、然后就是 输入框、按钮的样式了，没什么好说的，应该都能看懂。

JS部分

先看看代码吧。。

1、说明：向页面添加弹幕使用 addBarrage() 函数，添加动画用 move()函数。（把一种功能封装为一个函数是一个好习惯）

2、首先思考一下弹幕的触发事件。应该有两个：点击“发射”按钮、按下 Enter按键。所以分别监听点击 和 键盘事件。

3、然后就要思考怎么向页面添加弹幕了？

先得到用户输入的信息

然后在页面中创建一个

<span></span>

添加到 #dm这个盒子中：

• 这样就可以了吗？？ 当然不是的。。

4、每条弹幕应该有不同的颜色，这样才炫酷。思路就是把预先的颜色放进一个数组，使用的时候用随机的下标，这样就获得了随机颜色。（借鉴斗鱼的 7 中颜色）

这样每条弹幕就有不同的颜色了。

5、每条弹幕在页面上还要有不同的位置（高度），也就是不同的 top 值。我的想法是，虽然要有不同的 top ，但也不能太随意。就像下面这样：（一行是一行的）

我的思路是：先判断页面可以放多少行？

然后计算可以有的 top 值：（加 10 是为了不至于紧挨着屏幕顶部，最后的 -1 是为了不至于太靠下 ）

你可以自己理解一下我的这种计算方式。。

然后应用给

<span>

即可：

6、对了，弹幕应该添加到页面的什么位置呢？因为弹幕要从右往左移动，所以应该添加到屏幕的右侧，left 值为浏览器页面的宽度。这时候就知道为什么前面要设置 body 的 overflow: hidden;了吧！！

动画

弹幕（也就是<span>）被添加到页面中了，我们要让他动起来。思路就是写一个函数，减少 <span>

的 left 值。每隔几毫秒执行一次这个函数，我们看起来这个 <span>元素就动起来了。

7、但是有几个问题：

• 页面中有多少个弹幕（<span>）？因为页面中只有 弹幕 使用的是 <span> 标签，所以这样就可以获取所有 <span>的 nodeList（类似数组但不是数组，可以使用下标索引访问）：

怎样记录每条弹幕的 left 值？获取到所有的 <span>后，用一个 for 循环将每一个 <span> 的 left 值放进一个数组：

• 这样 arr[] 就保存了所有弹幕的 left 值。

8、接下来我们就逐个减少每条弹幕的 left 值：

9、最后判断如果弹幕已经移出了页面的左边，就把这条弹幕删除了吧。

我们可以在开发工具中看一下这个过程：

弹幕的 left 一直减小，移出页面后 #dm中就没有这个 <span>了。

10、最后处理一个小细节吧！当我们点击按钮或按回车后，输入框中的文字会保留，影响我们下次输入，所以只要获取到了用户输入的内容，就把输入框清空吧！

到此，弹幕就实现了。。。

学习javascript也是有门槛的，就是你的html和css至少还比较熟练，您不能连html这东东是干啥的都不知道就开始学javascript了，学乘除前，学好加减法总是有益无害的。