LI 开发日记

3.6

失败的作品-freeUI

因为其有太多复杂结构让人难以编写下去。而且类名,函数,结构均混乱,等待以后的重构。不过幸好还是留下了一些有用的经验与API。
新项目:暂时还没想好,不过应该和HTML5有关。

ok!

19:00 已经确认已「网易云」做模板,取名为「LI云音乐」。还有一张不宽的图片愣是被我拉长好多哈哈哈

效果预览

背景

20:30(我猜应该是这个时候)P图做完背景之后的效果,有3张壁纸可选
欢迎来到LI云音乐!.png

22:49 终于弄好导航栏了


主界面

3.7

10:56 LI云音乐初稿完成(滑稽)


LI云音乐初稿.png

13:34
1.主界面拖动
2.一些动画效果以及思考轮播图中

14:58
复稿完成(调整了一下色调,让其更鲜艳)


LI云音乐复稿.png

16:20
真的能放歌了,(HTML5 <audio>)不过目前只能放JJ的「醉赤壁」,没办法,测试歌曲

18:42
轮播图(顺便吃了个饭回来,有点累了)


轮播.png

19:54
电脑死机一次。。。
音乐播放、暂停音量渐变,可以获得丝滑的听觉体验哦!

20:13
再次死机,无更新

21:00
进度条以及歌曲时间(js秒化分)


进度条.png

23:00
梦游了两个小时。。。
完整的播放组件,两张新的轮播图,加了音量组件,但是还没调整好

3.8

9:43
刚吃完早饭回来,还是有点饿呃...开工

12:50
修复一些播放策略(音量阈值以及渐变),音量组件,花了大量时间在如何改变滑块颜色,未果


音量.png

12:55
中饭时间。。。顺便该换首歌了,这两天为了调试一直在听同一首歌。。。。

13:53
一些动画效果以及简化css(同化类名以及flex化,去除了N多多余的边距以及浮动)

14:08
调整了一下主界面大小以及位置
新的歌曲以及新的轮播图

15:42
找模糊壁纸找了好久,自己当美工太费时费力了
后来发现可以用css渐变实现,当然了,现在还什么都没有,接下来设计转盘

16:51
换歌,转盘设计(暂时还没弄好)
大部分时间花在P图上面了。。。为了那张唱片外壳。。。


单人旅途.png

17:30
一个棘手的问题。。。不能销毁播放界面,因为这会破坏动画
不销毁又觉得占地方。。。

17:52
吃完饭回来,逛逛NGA

20:12
电脑疯狂死机,可能用的时间太长。刚从网吧回来,现在不想开工,今天就到这里吧
明天计划:

  1. 重做登录界面
  2. 继续设计播放界面
  3. 主题功能。目前想到的有网易红白,玻璃质感,少女粉,夜间模式

23:29
加了点班,刚好停电
抛弃了之前播放界面独立成一个整体的设计,因为这么做我还需要再添加播放按钮以及进度条,而不能借用已经弄好的footer里面的组件。所以我将之调整了一下,header以及footer内容不变,仅覆盖中间的区域。另外通过css美化以后,新界面与之前界面相差无几

3.9

12:46
今天更新幅度较大

  1. 主题「玻璃」


    玻璃主题
  2. 「全屏显示」

  3. 融合界面,就是昨天晚上叙述的。增加组件利用率,减少不必要的重新设计。

14:50
梳理了一遍js,晚上再过一遍css。再次换歌


Heartbeats.png

18:20
css过了一遍。这电脑老是死机真让人恼火。等会补齐一些昨天想的主题。但愿电脑不再死机。。。如果还有时间的话就重做一下登录界面

19:45
audio.oncanplay事件。优化了加载提示。

22:48
发现网易云外链,甚喜。

23:30
优化总文件大小至3.3M,统一了一些图的大小,所有的歌曲删了。改为外链播放。

00:19
外链真的很快。4G网络下0.5s就能播放。明天继续完善播放信息以及过程
dot点加载动画,点击进度条可以直接改变进度等
最后不得不吐槽一下github校园网的速度,几K/S的速度

3.10

10:07
实在是想不出什么结构来设计后台了,要不先看看数据结构?

11:00
浏览了一圈后,还是决定先把前端的事干完。数据模型什么的,太复杂了。头晕

15:16
dot完整的动画
歌曲列表,目前一共是5首歌,等把播放列表界面做出来再截图
切换歌曲
完整的加载以及触发流程
后端还是个大问题,一首「凉凉」送给自己QAQ


凉凉.png

16:04
火狐ie兼容问题。无奈ie11不兼容箭头函数,最终失败。
火狐不支持disabled属性,导致无法更换主题,后修改为修改rel属性

17:44
2套新主题:Star和purple
优化修改主题策略与兼容,现在更改为固定加载一个default.css,然后通过修改下面的空css的src来更换主题。

22:24
重新过一遍php。

23:57
成功引入阿里图标链接,计划所有图标与音乐全部在线化

3.11

10:02
所有资源规范化
优化总大小至1.08M
主题文件更新,减少大量无用代码

10:51
想过再写一个最小化的功能,因为老是忍不住想点最小化。后来发现没什么用,就放弃了。
准备重写登录界面,正在过一遍php中。。。可能时间会较长,太久没碰了

13:10
播放模式(列表循环,单曲循环,随机播放)
正在重做登录界面。。。


再见理想.png

13:39
核心js文件全部组件化,将拖动组件?移动到了global.js。

(function(){
$(document).ready(function(){
    //准备工作
    console.log('Github网速报警系统');

    //音乐
    function({...
    }())

    //UI
    function({...
    }())

    //网络
    function({...
    }())

    //存储
    function({...
    }())

    //主题
    function({...
    }())

    //轮播
    function({...
    }())
  
}())

13:47
检验
资源规范化后,Github加载快了n倍,现在只要1.5s即可完全加载。

16:22
重做登录界面,沿用freeUI的翻转设计,登录成功就会「翻转」登录界面,显示你已经登录成功


登录成功.png

16:59
fix玻璃主题,看起来颜色更深邃一些

19:01
镜头来到了学校图书馆
因为再次死机。。。不过却发现了一个问题,除了ie之外,还有其他的兼容性问题。因为我的电脑是1080P,所以我并没有考虑到低分辨率的效果。所以在低分辨率设备上整个音乐盒偏大。图书馆电脑性能太低,回寝室等电脑CPU冷却再修改。(没错,就是每天写代码时间太长。。。)
3.12亲测浏览器可见区域只有600px。。。
目前的修改方案是按照%百分比大小来设计。
不过图书馆电脑打开github挺快。

21:03
日常死机,只能去网吧了

3:22
千呼万唤始出来
播放列表
点击音量图标静音
彻底解决主题css重复问题,具体方法是将主题分为light和dark,后续更新的新主题均需要修改很少的代码即可(之前的star主题就一直在重复这个错误)
晚上写代码效率有点低,再加上网吧键盘不顺手,所以大部分时间在梦游,不过还是坚持写完了


播放列表.png

4:13
一首「晚安」送给自己。


晚安.png

3.12

13:29
暗色的登录主题


登录主题.png

14:23
不行了,得先休息一下,感觉明显思维跟不上来,反应迟钝。

16:30
开工,精神好点了
修复一个列表点击无效的bug:
原因:在其生成之前就绑定了事件,结果无效

16:57
今日计划:
歌单
评论

18:38
歌单


歌单.png

20:17
在图书馆把所有的readme改了一遍,舒服多了

3.13

9:00
精神好了很多,吃完早餐开工

13:30
MV
融合音乐与MV写法,现统一为media方法,但是对细节也进行了区分。


MV.png

16:08
陆陆续续的修正media部分方法
进度条点击现在可以立即跳转
接下来的想法:
弹幕,歌曲评论,MV界面优化,小分辨率优化

21:04
小分辨率优化,现在会自动缩放
MV界面。。。我尽力了,然而还是想不出怎么排才好看
而且我发现网易云会经常更换mv地址,目前无法破解
评论界面
弹幕放弃了


评论.png

21:58
从3.6开始,差不多每天写8+小时,历时7天。突然就结束了,嗯,不过过程还是很完美的。
Github地址
好吧,完结了,撒花!
嘤嘤嘤
人生若只如初见,何事秋风悲画扇。
等闲变却故人心,却道故人心易变。

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

推荐阅读更多精彩内容