当前日期:2020年11月24日 星期二
Hi 你好,欢迎访问!登录
搜索 导航

豆芽笔记-电商运营、电商基础知识的独立个人博客!

当前位置:首页 - 学习进阶 - WEB前端 - 正文
阅读模式

前端练习案例之音乐播放列表

2018-03-04 | WEB前端 | 老贾 | 1072°c

  这个周末,朋友们都没空,去小蛮腰的计划泡汤了,索性就宅了两天,继昨天之后,今天又在瞎倒腾,练点前端知识。

html代码_副本.png

  今天试了下利用html、css、js来实现建议的音乐播放列表(之所以说是简易的播放列表,是因为他暂时还播放不了音乐,捂脸.jpg)。

完整播放列表_副本.png播放列表头部_副本.png


  相当于一个总结吧。

  实现过程中,有以下三个方面的问题需要注意下,也可以说是对初学者而言的三个难点:

  1、点击播放列表的头部部分,播放列表的内容部分实现展开和收缩;

js代码_副本.png

  简单的设置display属性后,第一次会出现展开的情况,但是再次点击,则无法收缩回来。

  此处巧妙的运用了取模运算,设定一个初始值,使得其%2后,正好跳过此操作,例如此处设置i的初始值为1,1%2=1,则跳过播放列表具体内容的none属性阶段,直接执行display:block;操作。在进行i++自加过后,则刚好进行收缩操作,则正好。

  注意:此处设置的i为全局变量,i++一定要写在函数体内,否则i不能实现自加运算,则无法实现不停地点击“播放列表”,根据点击进行相应的取模运算。

  2、“播放列表”后的▲▼如何进行切换?

  老贾在此处采用的是两个span标签将“▲▼”符号分别进行包裹,然后采用position定位的方式进行排列。这样可以使“▲▼”两个符号进行完美的重叠,从而省去了利用浮动和margin、padding的调整位置的麻烦的地方。

  接下来,通过js的函数代码控制“▲▼”的display属性分别进行展示或者隐藏。

  关于,上下三角的切换问题也得到了解决。

  PS:由于随着点击的进行,展开、收缩的次数不止一次,需要播放列表的详细内容的div的display属性多次在block和none之间进行切换,老贾刚开始则想到了for语句和while语句,然而最终都没能实现。因为这两种语句是进行多次运算,然后得出一个具体的结果的运算;在此处,选择变量i的自加,然后配合模2运算,则很巧妙的解决了执行多次的困扰。

  附件:完整的html、css、js代码        播放列表.rar

版权声明

凡注明为豆芽笔记原创文章,转载请注明出处,谢谢合作!如果文章中图片、文字侵犯到您的权益,请留言联系博主进行处理或者删除!

分享:
如果您觉得这篇文章对您有帮助,请分享到朋友圈或者添加到收藏夹哦!
QR:  前端练习案例之音乐播放列表

扫一扫,用手机打开吧

TAGS:

共1条评论

访客  2018-06-15 14:16:32 @Ta

不错不错

发表评论

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

用户登录×
用户名:
密    码: