先放上效果,平时看B站所以多加了几个简单的功能。
首先,跟着fcc提示的思路一步步实现。
第一步,思考HTML的结构,按照自己的想法尽快做出来即可
danmutext是边框【其实没有实际用处,只是有个边框更美观】
danmushow用来承载每一条弹幕,到时候每条都设置position:absolute弹幕就浮动在上面
然后是按钮等其他结构
第二步,实现功能
发射,清屏的触发事件,可以用console.log进行调试
第三步,连接野狗云
查看文档,只要懂了添加和删除,获取所有内容怎么实现即可
然后应该尝试把添加的所有弹幕能够呈现在框里,没发射一天框里就增加一条,清屏之后会全部消失
第四步,实现滚动的弹幕
这一部分对于我一个新手根本无从下手,然后就看fcc给的参考才会做
至此已经实现了fcc的要求,刚看到题目很蒙B,然后一定要把问题拆分,那实现一个project就会容易很多。个人认为一开始是可以多看fcc给的参考代码,但是一定不要复制,要去学习参考代码的结构和思路。
那么我检测自己有没有掌握就是去拓展它。
接下来就先实现隐藏底部和顶部的功能,然后速度和透明度都是比较简单的。
附上链接
https://codepen.io/masaccioi/pen/XKVamz?editors=0010