斗鱼直播分享html代码,用纯javascript实现斗鱼直播弹幕效果，代码也才这么点-优酷弹幕怎么设置...

无聊时看了下斗鱼直播，突然灵感乍现，想做出这个弹幕效果，于是有了下文

这里还是要说一下我的前端学习群：594959296，从我一个到现在的都是看我每一篇文章来的，可以说都是我们大前端的学霸啊，不定期分享干货。想学到东西的都可以来，欢迎初学和进阶中的小伙伴

说明：弹幕分两种：

1、像优酷、爱奇艺等，记录用户发送弹幕时该视频播放的位置，其他人播放这个视频时到了这个点就显示弹幕。

2、像斗鱼、熊猫这样的直播网站，用户发送弹幕直接显示在屏幕上，以后不需要再显示了。

我们就来做第二种！！！

实现效果

项目分析

1、获取用户输入信息；

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

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

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

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

布局

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

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、然后就要思考怎么向页面添加弹幕了？

先得到用户输入的信息

然后在页面中创建一个

把得到的文本放进去

添加到 #dm这个盒子中：

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

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

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

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

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

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

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

然后应用给

即可：

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

动画

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

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

7、但是有几个问题：页面中有多少个弹幕()？因为页面中只有 弹幕 使用的是 标签，所以这样就可以获取所有 的 nodeList(类似数组但不是数组，可以使用下标索引访问)：

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

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

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

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

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

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

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

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

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

如果想看到更加系统的文章和学习方法经验可以关注我的微信公众号：‘web前端课程’关注后回复‘给我资料’可以领取一套完整的学习视频