I write down what I've learned

用 JavaScript 操作 CSS 偽元素

Posted on 2018-07-27 | Edited on 2018-08-18 | In JavaScript | Comments: 0

若要對一些原生 HTML element (video, input 等等) 修改樣式時，須針對各家瀏覽器前綴字樣的 CSS 偽元素做修改，而 JS 似乎沒有直接操作偽元素樣式的 API，如果專案是一套 JS library，無法寫額外的 css 樣式檔，這時使用一些技巧還是能將偽元素樣式透過 JS ...

JavaScript30-Day15-localStorage 的點菜單

Posted on 2018-07-27 | Edited on 2018-08-18 | In JavaScript30 | Comments: 0

15 - LocalStorage

筆記

實作一個基於 localStorage 儲存的點菜單。

JavaScript30-Day13-讓圖片在可視範圍內才滑入顯示

Posted on 2018-07-19 | Edited on 2018-08-18 | In JavaScript30 | Comments: 0

13 - Slide in on Scroll

筆記

製作隨著網頁滾動而顯示圖片的效果

JavaScript30-Day14-JavaScript取參考與取值的分別

Posted on 2018-07-19 | Edited on 2018-08-18 | In JavaScript30 | Comments: 0

14 - JavaScript References VS Copying

筆記

JavaScript 參考與複製的差別

JavaScript30-Day12-偵測祕技指令輸入

Posted on 2018-07-16 | Edited on 2018-08-18 | In JavaScript30 | Comments: 0

12 - Key Sequence Detection

筆記

實作監聽鍵盤輸入特殊指令的程式，如遊戲祕技指令 Konami code(↑↑↓↓←→←→BA)。

JavaScript30-Day11-客製化影片播放器介面

Posted on 2018-07-11 | Edited on 2018-08-18 | In JavaScript30 | Comments: 0

11 - Custom Video Player

筆記

實作一個客製化的影片播放器，可以操控進度條，快進與倒退，播放暫停，播放速度，音量等。

JavaScript30-Day10-實現按住 shift 多重勾選 checkbox

Posted on 2018-07-08 | Edited on 2018-08-18 | In JavaScript30 | Comments: 0

10 - Hold Shift and Check Checkboxes

筆記

寫一個可以實現 shift 來多重勾選的 checkbox list

進行這個 JavaScript30 挑戰，默默地也進展到第 10 天了，過程中真的學了不少，js 真的太博大精深，學也學不完，有太多的用法是自己不知道的，希望自己能透過這個挑戰持續增進能力了。

JavaScript30-Day9-console 的各種好用方法

Posted on 2018-07-04 | Edited on 2018-08-18 | In JavaScript30 | Comments: 0

09 - Dev Tools Domination

筆記

console 的各種好用方法

JavaScript30-Day8-用 canvas 做漸變顏色效果

Posted on 2018-07-03 | Edited on 2018-08-18 | In JavaScript30 | Comments: 0

08 - Fun With HTML5 Canvas

筆記

用 canvas 實作漸變顏色大小的畫筆。

JavaScript30-Day7-陣列操作使用2

Posted on 2018-07-01 | Edited on 2018-08-18 | In JavaScript30 | Comments: 0

07 - Array Cardio Day 2

筆記

陣列操作練習 2，some(),every(),find(),findIndex