ETH官方钱包

前往
大廳
主題

【React】自幹私人部落格#1,原生js方法引入、js滑鼠事件、css變數(shù)、模糊特效、js的FixedUpdate

%%鼠 拒收病婿 | 2021-10-11 23:11:25 | 巴幣 154 | 人氣 1108

前言:
製作這個(gè)時(shí)的筆記:

想做個(gè)有後臺(tái)編輯功能的個(gè)人網(wǎng)站(類似巴哈小屋擴(kuò)充版),雖然是個(gè)人網(wǎng)站,但擴(kuò)充一下也可以變成論壇啦@@...

主要需求:類似於巴哈小屋有後臺(tái)功能,能po創(chuàng)作、能訪客留言。外加同篇文章能分各語系編輯、能貼上程式碼的文字編輯器。

之前用wordpress搞多語系有點(diǎn)煩,乾脆自己寫一個(gè),還能玩蝦趴特效


原生js方法引入
背後的絲絲作法筆記:連結(jié)
coding math的程式碼:連結(jié)
想要像React 元件那樣使用的話,可以用個(gè)方法包起來:

使用:


跟隨滑鼠:

同場(chǎng)加映:
demo中使用者按滑鼠左鍵加一節(jié),按滑鼠右鍵刪一節(jié)。
[取消瀏覽器滑鼠右鍵跳出的選單]

[區(qū)分按下滑鼠左右鍵]


模糊效果、css變數(shù)
用css宣告變數(shù)作法:連結(jié)
格式:--變數(shù)名稱:值
模糊作法1:用css變數(shù),並透過event修改。
將變數(shù)宣告在(網(wǎng)頁(yè))root,js可以用root.style去取得內(nèi)容。

缺點(diǎn)是套用相同css類別的物件會(huì)一起被模糊:

作法2:不使用css類別,改用inline style並搭配react useState


js的FixedUpdate
例:
js方法執(zhí)行到update(),並在update方法裡面用requestAnimationFrame()傳入update方法。
requestAnimationFrame會(huì)在等待約1/60秒後呼叫update方法,使其變成一個(gè)永動(dòng)loop,類似於unity的FixedUpdate()。



後記:
目前做到多語系文章編輯:
下篇文章大概是講解firebase讀寫rule權(quán)限、react component之類的
送禮物贊助創(chuàng)作者 !
0
留言

創(chuàng)作回應(yīng)

蝦米coco
太厲害了吧,我都是用別人寫好的套件,像JQuery、Bootstrap
2021-10-11 23:41:13
%%鼠 拒收病婿
css熟悉之後會(huì)覺得框架物件封裝的越好越麻煩,很難客製化,大推semantic UI ((傳教XD
2021-10-11 23:45:39
%%鼠 拒收病婿
會(huì)JQuery不錯(cuò)吧! 我用React也是偷吃人家現(xiàn)成的框架[e15] 。不過React比JQuery在DOM上的操作比較優(yōu)化https://www.upgrad.com/blog/jquery-vs-react/
2021-10-11 23:49:37
蝦米coco
找時(shí)間再去看看semantic UI 和React,我也好一陣子沒碰網(wǎng)頁(yè)了,感謝分享
2021-10-12 00:07:35
蝦米coco
最近都在學(xué)Android Studio,如果有需要我可以幫忙
2021-10-12 00:15:52
%%鼠 拒收病婿
感謝!! 想做app,卡在該選Android Studio還是React Native [e15]
2021-10-18 22:57:28
多古尼爾拉布拉布拉格
好佬ㄛqq 我也好想有漂釀的個(gè)人網(wǎng)站
2021-10-12 09:56:48
%%鼠 拒收病婿
學(xué)css
2021-10-18 22:57:55
蝦米coco
看你的需求現(xiàn)在能做到跨平臺(tái)的,只有網(wǎng)頁(yè),如果你需要使用到手機(jī)的相機(jī)、GPS、陀螺儀這些硬體程式的API,選Android Studio比較適合,如果是偏向只有網(wǎng)頁(yè)功能沒用到手機(jī)硬體設(shè)備React Native
2021-10-18 23:20:12
%%鼠 拒收病婿
哦哦哦!!! 原來如此,感謝解析[e5]
2021-10-18 23:30:35
追蹤 創(chuàng)作集

作者相關(guān)創(chuàng)作

相關(guān)創(chuàng)作

更多創(chuàng)作