3.6

失敗的作品-freeUI

因?yàn)槠溆刑鄰?fù)雜結(jié)構(gòu)讓人難以編寫下去古话。而且類名，函數(shù)狡耻，結(jié)構(gòu)均混亂，等待以后的重構(gòu)猴凹。不過(guò)幸好還是留下了一些有用的經(jīng)驗(yàn)與API夷狰。
新項(xiàng)目：暫時(shí)還沒(méi)想好，不過(guò)應(yīng)該和HTML5有關(guān)郊霎。

ok!

19:00 已經(jīng)確認(rèn)已「網(wǎng)易云」做模板沼头，取名為「LI云音樂(lè)」。還有一張不寬的圖片愣是被我拉長(zhǎng)好多哈哈哈

效果預(yù)覽

背景

歡迎來(lái)到LI云音樂(lè)进倍！.png

22:49 終于弄好導(dǎo)航欄了

主界面

3.7

10:56 LI云音樂(lè)初稿完成(滑稽)

LI云音樂(lè)初稿.png

13:34
1.主界面拖動(dòng)
2.一些動(dòng)畫效果以及思考輪播圖中

14:58
復(fù)稿完成（調(diào)整了一下色調(diào)，讓其更鮮艷）

LI云音樂(lè)復(fù)稿.png

16:20
真的能放歌了购对，（HTML5 <audio>）不過(guò)目前只能放JJ的「醉赤壁」猾昆，沒(méi)辦法，測(cè)試歌曲

18:42
輪播圖（順便吃了個(gè)飯回來(lái)洞斯，有點(diǎn)累了）

輪播.png

19:54
電腦死機(jī)一次毡庆。坑赡。烙如。
音樂(lè)播放、暫停音量漸變毅否，可以獲得絲滑的聽覺(jué)體驗(yàn)哦亚铁！

20：13
再次死機(jī)，無(wú)更新

21:00
進(jìn)度條以及歌曲時(shí)間（js秒化分）

進(jìn)度條.png

23:00
夢(mèng)游了兩個(gè)小時(shí)螟加。徘溢。。
完整的播放組件捆探，兩張新的輪播圖然爆，加了音量組件，但是還沒(méi)調(diào)整好

3.8

9:43
剛吃完早飯回來(lái)黍图，還是有點(diǎn)餓呃...開工

12:50
修復(fù)一些播放策略（音量閾值以及漸變）曾雕，音量組件，花了大量時(shí)間在如何改變滑塊顏色助被，未果

音量.png

12:55
中飯時(shí)間剖张。切诀。。順便該換首歌了搔弄，這兩天為了調(diào)試一直在聽同一首歌幅虑。。顾犹。倒庵。

13:53
一些動(dòng)畫效果以及簡(jiǎn)化css（同化類名以及flex化，去除了N多多余的邊距以及浮動(dòng)）

14:08
調(diào)整了一下主界面大小以及位置
新的歌曲以及新的輪播圖

15:42
找模糊壁紙找了好久炫刷，自己當(dāng)美工太費(fèi)時(shí)費(fèi)力了
后來(lái)發(fā)現(xiàn)可以用css漸變實(shí)現(xiàn)哄芜，當(dāng)然了，現(xiàn)在還什么都沒(méi)有柬唯，接下來(lái)設(shè)計(jì)轉(zhuǎn)盤

16:51
換歌认臊，轉(zhuǎn)盤設(shè)計(jì)（暫時(shí)還沒(méi)弄好）
大部分時(shí)間花在P圖上面了。锄奢。失晴。為了那張唱片外殼。拘央。涂屁。

單人旅途.png

17:30
一個(gè)棘手的問(wèn)題。灰伟。拆又。不能銷毀播放界面，因?yàn)檫@會(huì)破壞動(dòng)畫
不銷毀又覺(jué)得占地方栏账。帖族。。

17:52
吃完飯回來(lái)挡爵，逛逛NGA

20:12
電腦瘋狂死機(jī)竖般，可能用的時(shí)間太長(zhǎng)。剛從網(wǎng)吧回來(lái)茶鹃，現(xiàn)在不想開工涣雕，今天就到這里吧
明天計(jì)劃：

1. 重做登錄界面
2. 繼續(xù)設(shè)計(jì)播放界面
3. 主題功能。目前想到的有網(wǎng)易紅白闭翩，玻璃質(zhì)感挣郭，少女粉，夜間模式

23:29
加了點(diǎn)班疗韵，剛好停電
拋棄了之前播放界面獨(dú)立成一個(gè)整體的設(shè)計(jì)兑障，因?yàn)檫@么做我還需要再添加播放按鈕以及進(jìn)度條，而不能借用已經(jīng)弄好的footer里面的組件。所以我將之調(diào)整了一下旺垒，header以及footer內(nèi)容不變彩库，僅覆蓋中間的區(qū)域。另外通過(guò)css美化以后先蒋，新界面與之前界面相差無(wú)幾

3.9

12:46
今天更新幅度較大

1. 主題「玻璃」

   
   
   玻璃主題

2. 「全屏顯示」

3. 融合界面骇钦，就是昨天晚上敘述的。增加組件利用率竞漾，減少不必要的重新設(shè)計(jì)眯搭。

14:50
梳理了一遍js，晚上再過(guò)一遍css业岁。再次換歌

Heartbeats.png

18:20
css過(guò)了一遍鳞仙。這電腦老是死機(jī)真讓人惱火。等會(huì)補(bǔ)齊一些昨天想的主題笔时。但愿電腦不再死機(jī)棍好。。允耿。如果還有時(shí)間的話就重做一下登錄界面

19:45
audio.oncanplay事件借笙。優(yōu)化了加載提示。

22:48
發(fā)現(xiàn)網(wǎng)易云外鏈较锡，甚喜业稼。

23:30
優(yōu)化總文件大小至3.3M，統(tǒng)一了一些圖的大小蚂蕴，所有的歌曲刪了低散。改為外鏈播放。

00:19
外鏈真的很快骡楼。4G網(wǎng)絡(luò)下0.5s就能播放熔号。明天繼續(xù)完善播放信息以及過(guò)程
dot點(diǎn)加載動(dòng)畫，點(diǎn)擊進(jìn)度條可以直接改變進(jìn)度等
最后不得不吐槽一下github校園網(wǎng)的速度君编，幾K/S的速度

3.10

10:07
實(shí)在是想不出什么結(jié)構(gòu)來(lái)設(shè)計(jì)后臺(tái)了跨嘉，要不先看看數(shù)據(jù)結(jié)構(gòu)川慌？

11:00
瀏覽了一圈后吃嘿，還是決定先把前端的事干完。數(shù)據(jù)模型什么的梦重，太復(fù)雜了兑燥。頭暈

15:16
dot完整的動(dòng)畫
歌曲列表，目前一共是5首歌琴拧，等把播放列表界面做出來(lái)再截圖
切換歌曲
完整的加載以及觸發(fā)流程
后端還是個(gè)大問(wèn)題降瞳，一首「涼涼」送給自己QAQ

涼涼.png

16:04
火狐ie兼容問(wèn)題。無(wú)奈ie11不兼容箭頭函數(shù)，最終失敗挣饥。
火狐不支持disabled屬性除师，導(dǎo)致無(wú)法更換主題，后修改為修改rel屬性

17:44
2套新主題：Star和purple
優(yōu)化修改主題策略與兼容扔枫，現(xiàn)在更改為固定加載一個(gè)default.css汛聚，然后通過(guò)修改下面的空css的src來(lái)更換主題。

22:24
重新過(guò)一遍php短荐。

23:57
成功引入阿里圖標(biāo)鏈接倚舀，計(jì)劃所有圖標(biāo)與音樂(lè)全部在線化

3.11

10:02
所有資源規(guī)范化
優(yōu)化總大小至1.08M
主題文件更新，減少大量無(wú)用代碼

10:51
想過(guò)再寫一個(gè)最小化的功能忍宋，因?yàn)槔鲜侨滩蛔∠朦c(diǎn)最小化痕貌。后來(lái)發(fā)現(xiàn)沒(méi)什么用，就放棄了糠排。
準(zhǔn)備重寫登錄界面舵稠，正在過(guò)一遍php中。入宦。柱查。可能時(shí)間會(huì)較長(zhǎng)云石，太久沒(méi)碰了

13:10
播放模式(列表循環(huán)唉工，單曲循環(huán)，隨機(jī)播放)
正在重做登錄界面汹忠。淋硝。。

再見理想.png

13:39
核心js文件全部組件化宽菜，將拖動(dòng)組件谣膳？移動(dòng)到了global.js。

(function(){
$(document).ready(function(){
    //準(zhǔn)備工作
    console.log('Github網(wǎng)速報(bào)警系統(tǒng)');

    //音樂(lè)
    function({...
    }())

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

    //網(wǎng)絡(luò)
    function({...
    }())

    //存儲(chǔ)
    function({...
    }())

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

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

13:47
檢驗(yàn)
資源規(guī)范化后铅乡，Github加載快了n倍继谚，現(xiàn)在只要1.5s即可完全加載。

16:22
重做登錄界面阵幸，沿用freeUI的翻轉(zhuǎn)設(shè)計(jì)花履，登錄成功就會(huì)「翻轉(zhuǎn)」登錄界面，顯示你已經(jīng)登錄成功

登錄成功.png

16:59
fix玻璃主題挚赊，看起來(lái)顏色更深邃一些

19：01
鏡頭來(lái)到了學(xué)校圖書館
因?yàn)樵俅嗡罊C(jī)诡壁。。荠割。不過(guò)卻發(fā)現(xiàn)了一個(gè)問(wèn)題妹卿，除了ie之外，還有其他的兼容性問(wèn)題。因?yàn)槲业碾娔X是1080P夺克，所以我并沒(méi)有考慮到低分辨率的效果箕宙。所以在低分辨率設(shè)備上整個(gè)音樂(lè)盒偏大。圖書館電腦性能太低铺纽，回寢室等電腦CPU冷卻再修改扒吁。（沒(méi)錯(cuò)，就是每天寫代碼時(shí)間太長(zhǎng)室囊。雕崩。。）
3.12親測(cè)瀏覽器可見區(qū)域只有600px融撞。盼铁。。
目前的修改方案是按照%百分比大小來(lái)設(shè)計(jì)尝偎。
不過(guò)圖書館電腦打開github挺快饶火。

21:03
日常死機(jī)，只能去網(wǎng)吧了

3:22
千呼萬(wàn)喚始出來(lái)
播放列表
點(diǎn)擊音量圖標(biāo)靜音
徹底解決主題css重復(fù)問(wèn)題致扯，具體方法是將主題分為light和dark肤寝，后續(xù)更新的新主題均需要修改很少的代碼即可（之前的star主題就一直在重復(fù)這個(gè)錯(cuò)誤）
晚上寫代碼效率有點(diǎn)低，再加上網(wǎng)吧鍵盤不順手抖僵，所以大部分時(shí)間在夢(mèng)游鲤看，不過(guò)還是堅(jiān)持寫完了

播放列表.png

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

晚安.png

3.12

13:29
暗色的登錄主題

登錄主題.png

14:23
不行了耍群，得先休息一下义桂，感覺(jué)明顯思維跟不上來(lái)，反應(yīng)遲鈍蹈垢。

16:30
開工慷吊，精神好點(diǎn)了
修復(fù)一個(gè)列表點(diǎn)擊無(wú)效的bug：
原因：在其生成之前就綁定了事件，結(jié)果無(wú)效

16:57
今日計(jì)劃：
歌單
評(píng)論

18:38
歌單

歌單.png

20:17
在圖書館把所有的readme改了一遍曹抬，舒服多了

3.13

9:00
精神好了很多溉瓶，吃完早餐開工

13:30
MV
融合音樂(lè)與MV寫法，現(xiàn)統(tǒng)一為media方法谤民，但是對(duì)細(xì)節(jié)也進(jìn)行了區(qū)分堰酿。

MV.png

16:08
陸陸續(xù)續(xù)的修正media部分方法
進(jìn)度條點(diǎn)擊現(xiàn)在可以立即跳轉(zhuǎn)
接下來(lái)的想法：
彈幕，歌曲評(píng)論赖临，MV界面優(yōu)化胞锰，小分辨率優(yōu)化

21:04
小分辨率優(yōu)化，現(xiàn)在會(huì)自動(dòng)縮放
MV界面兢榨。。。我盡力了吵聪，然而還是想不出怎么排才好看
而且我發(fā)現(xiàn)網(wǎng)易云會(huì)經(jīng)常更換mv地址凌那，目前無(wú)法破解
評(píng)論界面
彈幕放棄了

評(píng)論.png

21:58
從3.6開始，差不多每天寫8+小時(shí)吟逝，歷時(shí)7天帽蝶。突然就結(jié)束了，嗯块攒，不過(guò)過(guò)程還是很完美的励稳。
Github地址
好吧，完結(jié)了囱井，撒花驹尼！
嚶嚶嚶
人生若只如初見，何事秋風(fēng)悲畫扇庞呕。
等閑變卻故人心新翎，卻道故人心易變。