雞湯小短語(項目練習)

一個功能類似於: https://codepen.io/hezag/full/ZGxOLX/的應用。

構想:實現點擊一個按扭,隨機改變一句短語、背景顏色、按扭顏色。

第一步:點擊按扭,獲取DOM節點(短語,顏色(文字,背景,按扭))

2018.09.27

 

================================================================================================

然後就是利用隨機數來任意顯示短語

其實都很好完成,只要再獲取到背景顏色的節點就可以了,這個明天再搞~!

2018.09.30晚

 

================================================================================================

 

在這期間很多事發生了,沒時間弄這個,現在來記錄一下之前搞的。

接前面的進度,在獲取背景顏色的問題上,才發現之前學過的獲取css的節點,是隻能是用style屬性獲取到內聯樣式,這次我一開始是將樣式放在一個.css的文件夾內,

在獲取背景顏色的問題上,目前暫時還沒搞懂怎麼獲取並設置外部鏈接文件的css節點。因爲時間關係,不想在這個問題點上拖太久,所以就將需要改變的節點,放在同一文件中(也就是<style>中)

最後個短語一樣,弄個數組將需要的顏色放進去就OK了。

弄到在這裏,最基本的功能都幾乎弄好了(一個按鈕,改變短語、背景顏色,按鈕顏色)。

不過還沒完全模仿到例子的樣式,功能效果結束後,就是美化(包括框架自動適應改變顏色時的動畫效果等),然後最後的步驟就是發上網(也就是學習建站,但因爲考慮到日後的發展,所以打算髮布去“小程序”上)。

2018.10.03傍晚

================================================================================================

 

這次實現的是改變時的漸變效果。

查了很多的資料,包括bootstrap和CSS的功能,都沒有類似的淡出淡入效果,最後翻了翻源代碼,發現是JQuery的功能,我沒有學過JQuery,所以就只能用CSS和JS的功能來實現一個類似(雖然也不太像)的淡出淡入效果。

 

(js文件)

(css文件)

這裏學習了CSS文件的動畫效果,不過發現佔用CPU比較高,這裏就先不作討論了。

基本功能都實現了,顯示的效果就到這裏,最後就剩下美化排版問題了。

2018.10.5凌晨

================================================================================================

 

例子的功能和效果基本就全部實現了吧,其實除了JQuery的淡出淡入效果之外,我覺得其它都比較滿意。

考慮到工作量和只在手機上看等問題,所有隻做了手機的尺寸,沒有考慮大屏幕的排版。那麼線下的工作就做完了,然後就是最後的在小程序上上架的學習了。

2018.10.5中午

================================================================================================

FCC裏的最後一個任務就是上傳到網站上,接下來的就是網站的問題。

本來是想去搞小程序那邊的,所以選用了騰訊雲的服務器,新用戶有代金券就是39元一個月,買了一個月試試,因爲還沒弄過網站方面的,所以搞了很久。其實也是有一段文字的,所以這裏應該轉過去另一個博客好了。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章