彈幕是最近幾年流行起來的東西，現在基本上大的視頻網站都配備有彈幕的功能，比如bilibili，優酷等，那么這種功能是怎么實現的呢？
首先彈幕的字色是隨機的，然后是有動畫效果移動的，并且出現的Y軸位置不一樣，考慮好這些特點后就可以開始制作了
今天就來做一個單機版的彈幕吧。
要看源碼的直接拉到最底下
第一步、寫html和css，讓彈幕框初現原形
這一步需要有一個發射彈幕的按鈕和一個清理彈幕的按鈕，當然一個彈幕框也是必不可少的，此外還需要一個輸入框，用來輸入彈幕的內容；
第二步、獲取按鈕、輸入框和彈幕框的dom節點
第三步、創建隨機色函數
大家都知道在css中，顏色可以用十六位進制的#000000形式表示，也可以用英文單詞表示，當然還有rgb形式表示。但是在創建隨機顏色這里，最簡單的是用rgb形式的顏色表達，原因是他的表示全是純數字，并且范圍在，所以可以使用數學對象的Math.random()單獨為r、g、b各創建一個范圍在(0~255)內的隨機整數，在返回出一個字符串，方便后面添加；
第四步、創建隨機top的函數
在這步創建隨機top的函數，我們需要考慮彈幕框的高度，然后創建出在彈幕框高度以內的一個整數隨機數，比如我的就是這樣設定的：
第五步、創建一個返回animation屬性字符串的函數，用以備用
這一步需要先了解animation屬性，可以看看我的這一篇文章（CSS3中的animation動畫屬性簡介）
在這一步，因為我想要彈幕劃過屏幕的時間也是隨機的，單范圍不需要太大的，所以我制定了(15~25)秒這樣的時間范圍：
這一步還需要在css代碼中添加@keyframes動畫制定代碼
第六步、編寫邏輯結構
- 發射彈幕
1.首先，我們需要先給發射按鈕綁定click事件，然后讓它在點擊后創建一個p元素；
2.這里我們要獲取用戶在輸入框輸入的字符串，可以用node.value得到，再將該字符串插入到p元素中，可以用使用node.innerText插入，結合起來就是node.innerText = node.value：
3.使用node.style為新創建的p元素添加樣式，注意有中橫線鏈接的樣式名要改駝峰寫法：
4.點擊后去掉輸入框的字樣，并且將創建的彈幕p元素用node.appendChild()方法添加進彈幕框成為彈幕框的子元素：
-
這下子我們就可以發射彈幕了，來看看整個事件是怎么樣的吧：
- 清理彈幕
清理彈幕實現原理就很簡單了，直接把彈幕框里面的HTML變遷全部清理掉就好了，這里使用了node.innerHTML = 空字符串的方法；
這里就是總體的效果還有源碼地址
效果圖：
文章著作權歸饑人谷_大春和饑人谷所有，轉載須說明來源
