原创 dom事件可觸發react元素事件

本以爲dom事件不能觸發react元素的事件，沒想到可以觸發。 以後，處理react項目問題，可以使用dom事件的方式來解決問題。 具體如下： menuItem.click() 觸發了 react的 menuItem 的點擊事件函數 

2023-12-09 13:40:07

原创 兩側向中間閉合高亮效果

兩個要點 1. z-index爲任意值，包括負值，可實現與isolation: isolate;一樣效果，生產獨立的層級上下文 2. 絕對定位的元素scaleX寬度變化，擴大從中間向兩側擴大，縮小從兩側向中間縮小 <!DOCTYPE ht

2023-12-09 13:40:07

原创 isolation獨立層疊上下文用例

1. 圖片顯示在文字下方，背景上方 只需要在容器加上 .card { position: relative; isolation: isolate; } 詳細可參考 [譯]你需要知道的CSS屬性isolation，原文 The

2023-12-08 13:43:07

原创 svg transform總結

1.  svg的transform和dom的不同，旋轉中心不是默認自身，而是畫布左上角 2.  svg要以自身爲中心旋轉，可以使用rotate(angle [x y]), 比css的rotate(angel)多了x,y兩個參數，x,y分別設

2023-12-07 13:46:48

原创 dom斷點可定位react組件值修改

react組件的值修改，也可以使用dom斷點來定位。 之前一直誤區，認爲react組件的修改，不能用dom斷點來攔截，實際上在涉及到修改具體原生組件屬性的時候，也可定位。 例如： react組件內部使用了input組件，react組件值變化

2023-12-07 13:46:48

原创 去除數字末尾0正則寫法

let nums = ['12.00', '12.001', '12.100', '12.350', '12.45']; console.log('nums: ', nums); nums.forEach(t => { cons

2023-12-06 13:37:41

原创 機器ping不通的原因

1. windows機器開放熱點，連接該熱點 2. windows機器關閉所有防火牆(99%因爲他) 3. windows機器關閉殺毒軟件 4. ping 192或172的地址

2023-12-06 13:37:41

原创 圖片相關問題記錄

1. cross-fade() 半透明圖片 cross-fade() 可以混合兩個或多個圖像，並按比例混合它們的不同部分。這個函數的語法如下： 兼容性：chrome和safari, firefox不支持 cross-fade(<image

2023-12-06 13:37:41

原创 調試技巧console.trace

console.trace之前一直覺得沒用，可用斷點，或xhr斷點來直接定位調用棧 在一些特殊情況下，比如要跟蹤某個值的調用過程，可以用此方法來觀察調用棧，也比較方便 console.trace(result) 可以觀察result這個

2023-12-01 13:37:24

原创 Skeleton Screen/加載佔位圖流光閃動效果收集

Skeleton Screen Loading，又叫 Skeleton Screen/加載佔位圖，就是顯示dom骨架，加上流光加載效果。 骨架流光的原理，就是 漸變色(linear-gradient多個顏色) + 背景拉伸(backgrou

2023-11-24 13:50:07

原创 classList removeAll謬想

習慣了了用classList修改class 某天想刪除所有class，在加上個特定class 居然想到是否有classList.removeAll這個API 發現沒有 還想着用 classList.forEach循環刪除 腦子漿糊了 cla

2023-11-23 13:41:06 2

原创 遮罩實現方法

1. border 可響應事件，佔據空間 border: 100px solid rgb(0,0,0,.5); 2. outline 不響應事件，不佔據空間 outline: 100px solid rgb(0,0,0,.5); o

2023-11-23 13:41:06 2

原创 box-shadow內陰影實現各種效果收集

1. 月牙        詳見 一步步打造自己的純CSS單標籤圖標庫 .moon { display:inline-block; height: 1.5em; width: 1.5em; box-shado

2023-11-23 13:41:06 2

原创 調試代碼技巧記錄

1. webpack的完整sourcemap 調試代碼，要映射回原始文件，devtool的sourcemap模式是不行的，會丟失loader的映射信息，導致映射結果是一個半源碼半編譯的文件，cheap-module-source-map可以

2023-11-23 13:41:06 5

原创 background實現邊線動畫

邊線左側劃出，右側收起，關鍵點就是 改變background-position的位置left -> right .div { background: linear-gradient(to right, #ec695c, #61c4

2023-11-23 13:41:06 5