第一次的小项目音乐播放器

音乐播放器展示
没有老师的教程,我根本做不出来,第一,学了不一定会,JS的语义化其实很严重的,这是我学了越久越觉得的。其实,做个东西出来,思路方法更重要,因为有了思路方法,难题就可以语义化了,就可以方法了,方法也就是函数,唯一恶心的是方法只是理想化的,如果什么什么多好啊,但是,结果很不一样。因为单单解决一个问题其实并没有多么麻烦,麻烦的是,解决了这个问题,就会冲突到其他的设定,包括浏览器的一些机制,包括其他元素的设定,都会互相掺杂,恶心的,,,
刚开始做,只是震惊于老师的眼界,因为我真的很浅薄,不知道音乐API,不知道怎么活学活用,说到这,觉得跟学生时代刚好相反,学生时代,数学课,我有时候可以猜出老师下一步要说什么,经常可以预感到他要说什么话,举一反三,绝不死学,一通不能说百通,但自己课下不用复习的,不用预习的,,,哎,可惜我的大学都在走理学家的路了,,,嗯就是震惊平时学的还可以这样用,就解决了一些问题了??!!
震惊的其实就是思路了,还有就是查漏补缺,自己平时学的,到用的时候,其实都想不起来,说明很严重的问题哦哦。
在一些问题的处理上,我自己有的别出心裁,自己解决了,突然就想通了一些以前的知识点,知道这里用到了,也有一些是自己琢磨出来的,有些欣喜吧。老师提供了思路了,我就要自己试着语义化解决了。其实现在想想自己脸红,没有老师的思路方法,我基本写不出来效果的。而且老师的底蕴很深厚,他的思路很直接,代码层次,场景分析,都是不重不漏,这就厉害了。除了敬仰,我也感到不适合我,因为我想不到全局的,比如做登录框翻转,我刚开始搞不定,各种问题,老师是单独做登录框,我是把它做音乐盒里,第一个问题,居中。怎么都不行,无论是放body,放第二梯队,第三梯队,统统不行,想过另加一段页面,不行,,,,忙了快12个小时了,就是不懂,分析是它的父元素一直在页面顶,而且就是搞不定,,,算了,我想音乐盒都居中了,我让登录框靠右吧,,,搞定,而且还是顶端靠右,改不了。然后就是a链接了,它的好处就是对想要可以点击的节点可点击的视觉化,有指针或者小手嘛,可是我这里能不用就不用,因为加了后,突然发现,点哪个都跟点了音乐列表一样,会重新播放第一曲,,,时间关系,我直接丑点,把可以点击触发事件的加了hover变颜色。
还有,登录框的动画翻转,如果没有动画翻转,我分分钟搞定,有了动画翻转,按老师那种很巧的方法在我的页面上有bug,各种连锁反应,果断不用,但是老师的那个效果可以,用笨办法,加class,删。结果测试时又有毛病了,所以,我自己模拟了一套思路,先出来登录框,直接加了下边框,只给旁边的注册两字加了指向颜色变,注册框就反过来,这时候,想注册的,就点注册了,把登录框加动画隐藏并display:none,另一个就display:block,并定时器,取消那个动画的class。当点登录转换时再反过去操作,,,结果出问题了,点的次数多了,最后就点不出来了,,,我检查了,都显示display为none,,,难道需要点的多了取消定时器?嗯,我没敢想,因为取消定时器,我只学到,能听到懂,而且还是想一阵,,,因为当时迷糊那个初始值为null的函数,把我蒙了。
后来又设置定时器为0,跟取消定时器差不多,没问题了,但是,没翻转效果了,,,又试了几个思路,试了老师的方法跟我的结合,都有问题,最后,我也不知道问题是哪里,我就试,点击间隔大于定时器,果然完美,,,哎最后我偷个懒,把定时器设到300,动画设到500,嗯嗯,我疯狂的点,没毛病哈哈哈哈
还有一个bug ,有时候点完关闭窗口了,再点点不开了,然后刚开始瞎猜,怎么试都不成功,我就想调试运行,运行发现注册登录的切换没毛病,就是一边点击一边看旁边的调试窗口,一会就发现出的问题了,当我在注册状态下关闭窗口时,在点击打开,登录的class突然变成none了,我就奇怪了,试了一会,自己恍然大悟,,我自己定了登录逻辑,一打开就是登录框,而我没设置它display:block这个触发的执行,虽然不写none,也可以是显示的,结果操作起来莫名其妙出错了,其实我现在还不明白为什么,不过自己庆幸调试了,然后找到解决办法了,加了display:block的触发执行就可以了,心里还是很有高兴的,虽然蒙头蒙脑的感觉笨笨的,,,
还有,做歌单的时候,第一点,是点歌单,播放对应歌曲,我自己写了很多遍,forEach,if,等等,这里我就卡了整整7,8个小时,最后真的想不到哪里的问题,因为语义化很明确嘛,但是就是不行,而且还连锁反应,导致js运行死掉,,,终于向 权威屈服,看了老师的代码,越来有个判断,当时我调试的时候明白问题出在哪,因为我用innerText写入文本到li里,结果发现li 里自动生成了一个font标签,,,点击有时候是font这个节点,而我想要的是输出
li,哎恶心死我了,我怎么遍历,从li出手,都不行,只有老师的那个判断把点击的区域都划分了,大家点击我的歌单,点文字是没反应的,只有旁边的空白可以,反正就是恶心,,哎还是自己知识点不扎实,想当然。
还有一个点就是,当音乐播放时,歌单对应的歌名那边要不一样,互动嘛,结果我怎么遍历,不行,又恶心了我很长时间差不多六个小时,最后妥协,跟着党走。看权威。结果,这次神也救不了我了,,,因为我的整个代码只是模仿的,不知道哪个细节跟权威的起了冲突,勇敢地对我不理不睬,,,
我肝不动了,,,不这么搞了。直接给歌单加了定时器,让你们只能点歌时用它,,,,
哎,马上又要写一个音乐网站了,不是播放器,,,希望这次学到更多,,,
希望大家能帮我解读下我上面提到的问题,我现在要加班加点了。。。

推荐阅读更多精彩内容