彈幕是最近幾年流行起來的東西泌绣，現(xiàn)在基本上大的視頻網(wǎng)站都配備有彈幕的功能吗垮，比如bilibili着绷，優(yōu)酷等棚瘟，那么這種功能是怎么實現(xiàn)的呢殿怜？
首先彈幕的字色是隨機的怀浆，然后是有動畫效果移動的恬叹，并且出現(xiàn)的Y軸位置不一樣腹躁，考慮好這些特點后就可以開始制作了
今天就來做一個單機版的彈幕吧退个。
要看源碼的直接拉到最底下
第一步募壕、寫html和css，讓彈幕框初現(xiàn)原形
這一步需要有一個發(fā)射彈幕的按鈕和一個清理彈幕的按鈕语盈，當然一個彈幕框也是必不可少的舱馅，此外還需要一個輸入框，用來輸入彈幕的內(nèi)容刀荒；
第二步代嗤、獲取按鈕、輸入框和彈幕框的dom節(jié)點
第三步缠借、創(chuàng)建隨機色函數(shù)
大家都知道在css中干毅，顏色可以用十六位進制的#000000形式表示，也可以用英文單詞表示泼返，當然還有rgb形式表示硝逢。但是在創(chuàng)建隨機顏色這里，最簡單的是用rgb形式的顏色表達绅喉，原因是他的表示全是純數(shù)字渠鸽，并且范圍在，所以可以使用數(shù)學對象的Math.random()單獨為r霹疫、g拱绑、b各創(chuàng)建一個范圍在(0~255)內(nèi)的隨機整數(shù)，在返回出一個字符串丽蝎，方便后面添加猎拨；
第四步、創(chuàng)建隨機top的函數(shù)
在這步創(chuàng)建隨機top的函數(shù)屠阻，我們需要考慮彈幕框的高度红省，然后創(chuàng)建出在彈幕框高度以內(nèi)的一個整數(shù)隨機數(shù)，比如我的就是這樣設定的：
第五步国觉、創(chuàng)建一個返回animation屬性字符串的函數(shù)吧恃，用以備用
這一步需要先了解animation屬性，可以看看我的這一篇文章（CSS3中的animation動畫屬性簡介）
在這一步麻诀，因為我想要彈幕劃過屏幕的時間也是隨機的痕寓，單范圍不需要太大的傲醉，所以我制定了(15~25)秒這樣的時間范圍：
這一步還需要在css代碼中添加@keyframes動畫制定代碼
第六步、編寫邏輯結(jié)構(gòu)
- 發(fā)射彈幕
1.首先呻率，我們需要先給發(fā)射按鈕綁定click事件硬毕，然后讓它在點擊后創(chuàng)建一個p元素；
2.這里我們要獲取用戶在輸入框輸入的字符串礼仗，可以用node.value得到吐咳，再將該字符串插入到p元素中，可以用使用node.innerText插入元践，結(jié)合起來就是node.innerText = node.value：
3.使用node.style為新創(chuàng)建的p元素添加樣式韭脊，注意有中橫線鏈接的樣式名要改駝峰寫法：
4.點擊后去掉輸入框的字樣，并且將創(chuàng)建的彈幕p元素用node.appendChild()方法添加進彈幕框成為彈幕框的子元素：
-
這下子我們就可以發(fā)射彈幕了单旁，來看看整個事件是怎么樣的吧：
- 清理彈幕
清理彈幕實現(xiàn)原理就很簡單了沪羔，直接把彈幕框里面的HTML變遷全部清理掉就好了，這里使用了node.innerHTML = 空字符串的方法慎恒；
這里就是總體的效果還有源碼地址
效果圖：
文章著作權歸饑人谷_大春和饑人谷所有任内，轉(zhuǎn)載須說明來源
