先放上效果,平時看B站所以多加了幾個簡單的功能。
首先,跟著fcc提示的思路一步步實現。
第一步,思考HTML的結構,按照自己的想法盡快做出來即可
danmutext是邊框【其實沒有實際用處,只是有個邊框更美觀】
danmushow用來承載每一條彈幕,到時候每條都設置position:absolute彈幕就浮動在上面
然后是按鈕等其他結構
第二步,實現功能
發射,清屏的觸發事件,可以用console.log進行調試
第三步,連接野狗云
查看文檔,只要懂了添加和刪除,獲取所有內容怎么實現即可
然后應該嘗試把添加的所有彈幕能夠呈現在框里,沒發射一天框里就增加一條,清屏之后會全部消失
第四步,實現滾動的彈幕
這一部分對于我一個新手根本無從下手,然后就看fcc給的參考才會做
至此已經實現了fcc的要求,剛看到題目很蒙B,然后一定要把問題拆分,那實現一個project就會容易很多。個人認為一開始是可以多看fcc給的參考代碼,但是一定不要復制,要去學習參考代碼的結構和思路。
那么我檢測自己有沒有掌握就是去拓展它。
接下來就先實現隱藏底部和頂部的功能,然后速度和透明度都是比較簡單的。
附上鏈接
https://codepen.io/masaccioi/pen/XKVamz?editors=0010