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

音乐播放器展示
没有老师的教程,我根本做不出来,第一,学了不一定会,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出手,都不行,只有老师的那个判断把点击的区域都划分了,大家点击我的歌单,点文字是没反应的,只有旁边的空白可以,反正就是恶心,,哎还是自己知识点不扎实,想当然。
还有一个点就是,当音乐播放时,歌单对应的歌名那边要不一样,互动嘛,结果我怎么遍历,不行,又恶心了我很长时间差不多六个小时,最后妥协,跟着党走。看权威。结果,这次神也救不了我了,,,因为我的整个代码只是模仿的,不知道哪个细节跟权威的起了冲突,勇敢地对我不理不睬,,,
我肝不动了,,,不这么搞了。直接给歌单加了定时器,让你们只能点歌时用它,,,,
哎,马上又要写一个音乐网站了,不是播放器,,,希望这次学到更多,,,
希望大家能帮我解读下我上面提到的问题,我现在要加班加点了。。。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 213,099评论 6 492
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,828评论 3 387
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 158,540评论 0 348
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,848评论 1 285
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,971评论 6 385
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,132评论 1 291
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,193评论 3 412
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,934评论 0 268
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,376评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,687评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,846评论 1 341
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,537评论 4 335
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,175评论 3 317
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,887评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,134评论 1 267
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,674评论 2 362
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,741评论 2 351

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 171,892评论 25 707
  • 发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 12,067评论 4 62
  • 首先来看一下我们在Java中最常见的操作,new一个对象,在内存中是如何进行的,来看一下我画的草图: 1. new...
    JxYoung阅读 1,884评论 4 9
  • 那天,城城跟我讲了他家小姨的故事。 小姨没念几年书就去工厂打工,后来在厂里认识她小姨丈,两人情投意合。小姨丈是个外...
    白椿耳阅读 285评论 0 0
  • 第四个故事: 这个暑假,幸得他人赏识有了兼职。恰巧和专业也有一点点关系,人民教师一个看起来平凡却又神圣的职...
    收件人阅读 461评论 0 0