弹幕是最近几年流行起来的东西，现在基本上大的视频网站都配备有弹幕的功能，比如bilibili，优酷等，那么这种功能是怎么实现的呢？
首先弹幕的字色是随机的，然后是有动画效果移动的，并且出现的Y轴位置不一样，考虑好这些特点后就可以开始制作了
今天就来做一个单机版的弹幕吧。
要看源码的直接拉到最底下
第一步、写html和css，让弹幕框初现原形
这一步需要有一个发射弹幕的按钮和一个清理弹幕的按钮，当然一个弹幕框也是必不可少的，此外还需要一个输入框，用来输入弹幕的内容；
写html和css
第二步、获取按钮、输入框和弹幕框的dom节点
获取节点
第三步、创建随机色函数
大家都知道在css中，颜色可以用十六位进制的#000000形式表示，也可以用英文单词表示，当然还有rgb形式表示。但是在创建随机颜色这里，最简单的是用rgb形式的颜色表达，原因是他的表示全是纯数字，并且范围在，所以可以使用数学对象的Math.random()单独为r、g、b各创建一个范围在(0~255)内的随机整数，在返回出一个字符串，方便后面添加；
创建随机色函数
第四步、创建随机top的函数
在这步创建随机top的函数，我们需要考虑弹幕框的高度，然后创建出在弹幕框高度以内的一个整数随机数，比如我的就是这样设定的：
创建随机top
第五步、创建一个返回animation属性字符串的函数，用以备用
这一步需要先了解animation属性，可以看看我的这一篇文章（CSS3中的animation动画属性简介）
在这一步，因为我想要弹幕划过屏幕的时间也是随机的，单范围不需要太大的，所以我制定了(15~25)秒这样的时间范围：
制定animation属性函数
这一步还需要在css代码中添加@keyframes动画制定代码
第六步、编写逻辑结构
- 发射弹幕
1.首先，我们需要先给发射按钮绑定click事件，然后让它在点击后创建一个p元素；
2.这里我们要获取用户在输入框输入的字符串，可以用node.value得到，再将该字符串插入到p元素中，可以用使用node.innerText插入，结合起来就是node.innerText = node.value：
3.使用node.style为新创建的p元素添加样式，注意有中横线链接的样式名要改驼峰写法：
为弹幕元素p添加样式
4.点击后去掉输入框的字样，并且将创建的弹幕p元素用node.appendChild()方法添加进弹幕框成为弹幕框的子元素：
-
这下子我们就可以发射弹幕了，来看看整个事件是怎么样的吧：
- 清理弹幕
清理弹幕实现原理就很简单了，直接把弹幕框里面的HTML变迁全部清理掉就好了，这里使用了node.innerHTML = 空字符串的方法；
清理弹幕
这里就是总体的效果还有源码地址
效果图：
弹幕效果
文章著作权归饥人谷_大春和饥人谷所有，转载须说明来源
网友评论