
先放上效果,平時(shí)看B站所以多加了幾個(gè)簡(jiǎn)單的功能。

首先,跟著fcc提示的思路一步步實(shí)現(xiàn)。
第一步,思考HTML的結(jié)構(gòu),按照自己的想法盡快做出來(lái)即可
danmutext是邊框【其實(shí)沒(méi)有實(shí)際用處,只是有個(gè)邊框更美觀】
danmushow用來(lái)承載每一條彈幕,到時(shí)候每條都設(shè)置position:absolute彈幕就浮動(dòng)在上面
然后是按鈕等其他結(jié)構(gòu)

第二步,實(shí)現(xiàn)功能
發(fā)射,清屏的觸發(fā)事件,可以用console.log進(jìn)行調(diào)試
第三步,連接野狗云
查看文檔,只要懂了添加和刪除,獲取所有內(nèi)容怎么實(shí)現(xiàn)即可
然后應(yīng)該嘗試把添加的所有彈幕能夠呈現(xiàn)在框里,沒(méi)發(fā)射一天框里就增加一條,清屏之后會(huì)全部消失
第四步,實(shí)現(xiàn)滾動(dòng)的彈幕
這一部分對(duì)于我一個(gè)新手根本無(wú)從下手,然后就看fcc給的參考才會(huì)做
至此已經(jīng)實(shí)現(xiàn)了fcc的要求,剛看到題目很蒙B,然后一定要把問(wèn)題拆分,那實(shí)現(xiàn)一個(gè)project就會(huì)容易很多。個(gè)人認(rèn)為一開(kāi)始是可以多看fcc給的參考代碼,但是一定不要復(fù)制,要去學(xué)習(xí)參考代碼的結(jié)構(gòu)和思路。
那么我檢測(cè)自己有沒(méi)有掌握就是去拓展它。
接下來(lái)就先實(shí)現(xiàn)隱藏底部和頂部的功能,然后速度和透明度都是比較簡(jiǎn)單的。
附上鏈接
https://codepen.io/masaccioi/pen/XKVamz?editors=0010