第十屆

web
一起挑戰 JavaScript 30 吧!
Henry

系列文章

DAY 21

JS30 Day 21 - Geolocation

成品連結:Geolocation、操作前程式碼、完成後程式碼 大家好,今天要做的是取得使用者當前位置的小工具。其實本來預期結果是指北針以及目前的速度,但在電腦上...

DAY 22

JS30 Day 22 - Follow Along Link

成品連結:Follow Along Link Highlighter、操作前程式碼、完成後程式碼 今天要做的效果是當滑鼠 hover 至特定文字上時出現 hig...

DAY 23

JS30 Day 23 - Speech Synthesis

成品連結:Speech Synthesis、操作前程式碼、完成後程式碼 今天要做的作品與前幾天做過的語音辨識類似,不過今天要做的是閱讀文字。閱讀文字同樣用到了瀏...

DAY 24

JS30 Day 24 - Sticky Nav

成品連結:Sticky Nav、操作前程式碼 - HTML、操作前程式碼 - CSS、操作後程式碼 - HTML、操作後程式碼 - CSS 今天要做的是類似 C...

DAY 25

JS30 Day 25 - Event Capture, Propagation, Bubbling and Once

展示頁面(請打開 console 查看結果)、程式碼 今天沒有要做作品,而是認識一下 DOM 元素的 event bubbling & event captur...

DAY 26

JS30 Day 26 - Stripe Follow Along Nav

成品連結:Stripe Follow Along Nav、操作前程式碼、完成後程式碼 今天要做的作品我覺得還蠻有趣的,JS30 作者的靈感是這個網站的導覽列切換...

DAY 27

JS30 Day 27 - Click and Drag

成品連結:Click and Drag、操作前程式碼、完成後程式碼 今天要做的是拖拉的功能。從成品可以看到當按下滑鼠拖拉時元素的 X 軸會被拉著滾動,其實在實作...

DAY 28

JS30 Day 28 - Video Speed Controller

成品連結:Video Speed Controller、操作前程式碼、完成後程式碼 今天要做的東西與之前所做的播放器有點類似,也是要控制影片的播放速度。只不過之...

DAY 29

JS30 Day 29 - Countdown Timer

成品連結:Countdown Timer、HTML 程式碼、完成後 JS 程式碼(今天沒有完成前 JS 程式碼,自己創一個吧!但記得 script 的連結要改)...

DAY 30

JS30 Day 30 - Whack A Mole

成品連結:Whack A Mole、完成前程式碼、完成後程式碼 今天要做的是打地鼠的遊戲!實作之前覺得很難,但在實作之後發現其實沒有想像中困難,一起來做做看吧!...