溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點(diǎn)擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

JavaScript中怎么實(shí)現(xiàn)彈幕效果

發(fā)布時間：2021-08-09 17:29:01 來源：億速云 閱讀：264 作者：Leah 欄目：開發(fā)技術(shù)

JavaScript中怎么實(shí)現(xiàn)彈幕效果，很多新手對此不是很清楚，為了幫助大家解決這個難題，下面小編將為大家詳細(xì)講解，有這方面需求的人可以來學(xué)習(xí)下，希望你能有所收獲。

　　js實(shí)現(xiàn)彈幕效果

　　彈幕肯定盡量不能重疊在一起，所以我把整個彈幕出現(xiàn)的背景劃分為幾塊。

　　什么意思呢？就是這里有5條彈道，彈幕就是出現(xiàn)在這5條彈道之間的一條。具體劃多少條彈道，每條彈道的寬度要看你的背景和你自己的設(shè)計了。

　　好了，彈道有了，怎么創(chuàng)建彈幕呢？這里我們用到了appendChild方法，每個彈幕的內(nèi)容都是隨機(jī)的。然后我固定了彈幕的數(shù)量，并且加了定時器，

　　當(dāng)彈幕到達(dá)左邊時，彈幕內(nèi)容再次隨機(jī)，輸入框發(fā)送的彈幕出現(xiàn)一次后，將內(nèi)容加入到預(yù)備詞庫中，并將此彈幕刪除。防止彈幕過多報錯。

　　同時每個彈幕出現(xiàn)的時機(jī)肯定不能相同，所以我在每個彈幕最開始出現(xiàn)時加了延遲。

　　大概的設(shè)計就是這樣了，這里還是總結(jié)一下存在的問題：

　　1.彈幕有時會出現(xiàn)同時出現(xiàn)在同一個彈道上，甚至重疊，暫時還沒找到原因。

　　2.當(dāng)輸入框連續(xù)多次發(fā)送彈幕時，可能會因為彈道不夠出現(xiàn)意外的情況。

　　3.與真正的彈幕相比，只是簡易版的，功能單一。

　　js實(shí)現(xiàn)彈幕效果代碼

　　<!doctypehtml>
　　<htmllang="en">
　　<head>
　　<metacharset="UTF-8">
　　<metaname="Generator"content="EditPlus?">
　　<metaname="Author"content="natural_live">
　　<metaname="Keywords"content="barrage">
　　<metaname="Description"content="">
　　<title>彈幕</title>

看完上述內(nèi)容是否對您有幫助呢？如果還想對相關(guān)知識有進(jìn)一步的了解或閱讀更多相關(guān)文章，請關(guān)注億速云行業(yè)資訊頻道，感謝您對億速云的支持。

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手