Anthony Chao

Pseudo Worker not allowed

JS30 day28 Video Speed Controller

JS30 day28 - Video Speed Controller 作業內容 今天的作業是做出一個 bar 在影片旁邊，可以拉動調整影片速度，比較特別的是他是用純 div 做的而不是 input range 說實在這次的還滿簡單的，幾乎可以自己把它做完，自己在做的時候就只有卡在不知道怎麼顯示倍數的文字而已 學到什麼 JS 要怎麼換算倍率跟百分比？ 首先拿到目前 mouse eve......

Posted by Anthony Chao on 2019-11-29

Javascript

JS30 day27 Click and Drag to Scroll

JS30 day27 - Click and Drag to Scroll 作業內容 這次的作業是做出可以用滑鼠左右拉讓螢幕滑動的效果 一樣 code 本身不複雜，但要想出怎麼做出來是需要創意的 可以參考這份 CodePen的效果 學到什麼 JS 細節：在抓點下去時候的 X 座標，我們抓 mouseDown 事件的 pageX 屬性 但如果把這個 pageX console.log ......

Posted by Anthony Chao on 2019-11-27

Javascript

JS30 day25 Event Capture, Propagation, Bubbling and Once

JS30 day25 - Event Capture, Propagation, Bubbling and Once 作業內容 今天也是一個概念性的教學，在教捕捉跟冒泡機制，但這部分之前看書有看過所以覺得還好ＸＤ但是 once 這屬性是第一次看到，可以參考這份 CodePen的效果 學到什麼 js 捕捉跟冒泡: 可以這樣理解：捕捉的時候從上到下捕捉，當我點擊 three 這個 div......

Posted by Anthony Chao on 2019-11-26

Javascript

JS30 day26 Stripe Follow Along Dropdown

JS30 day26 - Stripe Follow Along Dropdown 作業內容 這次的網頁要做出下拉式選單動態移動的效果 今天的作業其實 code 本身不難，難就難在你能不能想到用這個概念做出效果，如果是我應該想不到ＸＤ，創意性看來還要再加油 可以參考這份 CodePen的效果 學到什麼 CSS 這邊很特別的地方是把隱藏的選項顯現出來的方式，一開始是 display: ......

Posted by Anthony Chao on 2019-11-26

Javascript

JS30 day24 Sticky Nav

JS30 day24 - Sticky Nav 作業內容 今天的作業相較之下簡單多了，但還滿實用的！就是頁面往下滑動，碰到導覽列之後導覽列會繼續往下滑動不會消失 可以參考這份CodePen的效果 一開始是這樣： 往下滑會變成這樣： 學到什麼 CSS 一般直覺上會想要在產生效果的時候，如果要做的是固定 navbar，會直接在 navbar 上面加上 class，但他比較特別的是把 b......

Posted by Anthony Chao on 2019-11-25

Javascript

JS30 day23 Speech Synthesis

JS30 day23 - Speech Synthesis 作業內容 最近做的都跟聲音有關，雖然概念上不複雜但我覺得 Google 能把這個東西實作出來放在瀏覽器真的太猛了吧 = =，這個作業自己覺得比較難的部分是理解整個 google 系統是怎麼把聲音的資訊結合成物件 學到什麼 JS SpeechSynthesisUtterance() 物件為 Web Speech API 中代......

Posted by Anthony Chao on 2019-11-24

Javascript

JS30 day22 Follow Along Links

JS30 day22 - Follow Along Links 作業內容 為什麼不是繼續寫 21 而是跳到 22 呢？ 因為作業 21 需要哀鳳支援，這可能要稍微去借一下ＸＤ 今天的內容是要讓網頁的連結被指到的時候，出現白色背景，跟 hover 不同的是這個邊匡會在超連結之間移動！如果不明白我的意思可以看 CodePen 連結ＸＤ 學到什麼 mouseenter 跟 mouseover......

Posted by Anthony Chao on 2019-11-23

Javascript

JS30 day20 Speech Recognition

JS30 day20 - Speech Recognition 作業內容 今天的作業內容我也覺得很有趣，是語音辨識！把講出來的話直接印在網頁上！ 學到什麼 JS 語音辨識目前似乎只有桌機版的 Chrome 有實作，原作者這樣寫的目的好像是為了抓到 FireFox 實作的語音辨識，但我們其實用下面的寫法就好了 12345window.SpeechRecognition = windo......

Posted by Anthony Chao on 2019-11-21

Javascript

JS30 day19 Webcam Fun

JS30 day19 - Webcam Fun 作業內容 今天的難度又突然提升了，主要內容在玩弄攝影機的畫面，並改造成類似靈異現象的效果，像下面這張圖這樣 學到什麼 JS 1. 如何拿到 live 的攝影畫面 要使用攝影機有一個內建的 js 方法navigator.mediaDevices.getUserMedia，要注意的是他回傳的是 Promise 物件，詳細內容可以直接看下面參......

Posted by Anthony Chao on 2019-11-20

Javascript

JS30 day18 Tally String Times with Reduce

JS30 day18 - Tally String Times with Reduce 作業內容 今天也是主要在練習 JS 的 map / reduce 這兩種方法，要把影片的總時間加總，練習字串轉時間的過程 學到什麼 JS nodeList 不能使用 map，只有 array 可以 把 nodeList 轉換成 array: Array.from(<nodeList>) ......

Posted by Anthony Chao on 2019-11-18

Javascript

FEATURED TAGS
Rails Javascript Life Ruby Devops Docker Cache Continuous Delivery Jenkins AWS Shell Kubernetes K8S Elixir Regular Expression SSH Apps Script GraphQL SQL AI Developer
ABOUT ME

喜歡彈吉他，打電動，看漫畫，調酒，煮菜，算是個多方位宅男

RECENT POSTS
FRIENDS
ARCHIVES
prevent_hack