freecodecamp projects-Design a danmu app

先放上效果,平时看B站所以多加了几个简单的功能。

首先,跟着fcc提示的思路一步步实现。

第一步,思考HTML的结构,按照自己的想法尽快做出来即可

danmutext是边框【其实没有实际用处,只是有个边框更美观】

danmushow用来承载每一条弹幕,到时候每条都设置position:absolute弹幕就浮动在上面

然后是按钮等其他结构

第二步,实现功能

发射,清屏的触发事件,可以用console.log进行调试

第三步,连接野狗云

查看文档,只要懂了添加和删除,获取所有内容怎么实现即可

然后应该尝试把添加的所有弹幕能够呈现在框里,没发射一天框里就增加一条,清屏之后会全部消失

第四步,实现滚动的弹幕

这一部分对于我一个新手根本无从下手,然后就看fcc给的参考才会做

至此已经实现了fcc的要求,刚看到题目很蒙B,然后一定要把问题拆分,那实现一个project就会容易很多。个人认为一开始是可以多看fcc给的参考代码,但是一定不要复制,要去学习参考代码的结构和思路。

那么我检测自己有没有掌握就是去拓展它。

接下来就先实现隐藏底部和顶部的功能,然后速度和透明度都是比较简单的。

附上链接

https://codepen.io/masaccioi/pen/XKVamz?editors=0010

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 173,794评论 25 709
  • 发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 12,262评论 4 61
  • 文/冬月之恋 “喂,大家动作都利索点,加紧干啊!”老板看着阴云密布的天空,不住地催促。 天气有些闷热,一场大雨即将...
    冬月之恋阅读 274评论 3 14
  • 我小时候总是问姐姐青春是什么,姐姐想了想笑着对我说:“小灵,青春就是你的第二个起点,是你从单纯走向成熟,到处都充满...
    血心阅读 301评论 0 0