Day 11

總算知道明明都是html的video元素，為什麼每個影片網站的樣式都略有不同，很簡單，不要用現成的controls，自己用CSS搭一個樣式，再用JS去控制Video的撥放/暫停、播放時間、音量、撥放速度。 這個章節我只增加了一個全螢幕按鍵，參照MDN的文件，看起來有點複雜的一段if判斷式，主要是因為每種瀏覽器的video元素略有不同。 美中不足的是全螢幕之後，預設的controls又出現了。

Day 12

  • array.splice(index,howmany,item1,…..,itemX) index，插入的位置 howmany，刪除多少，沒輸入的話，從插入的位置開始刪到最後 後面還可以放想插入的值 splice 和 slice 不同的地方是splice會更動到原本的值

Day 13

工具庫，提供很多方便的函式，這個章節用到的是debounce，功能是將想執行的function稍微延遲，這邊的應用是延遲滑入圖片，簡單、快速地實現了之前用的lazyloadxt套件。

檢測圖片是否要進入的步驟:

  1. 取得圖片一半高度的定位點，卷軸高度(window.scrollY) + 視窗高度(window.innerHeight) - 圖片的二分之一高
  2. 取得圖片底部定位點，圖片的offsetTop + height，offsetTop是瀏覽器左上角為基準到圖片最上方的距離
  3. 判斷是否超過圖片一半的位置， 第一步的運算結果 大於 圖片的offsetTop
  4. 判斷卷軸移動距離超過圖片底部了沒，卷軸高度 小於 第二步運算結果
  5. 在圖片高度已經出現一半 且 視窗裡看得到圖片的情況下滑入，反之在已經看不到圖片位置的情況下移出圖片