iT邦幫忙

鐵人檔案

2019 iT 邦幫忙鐵人賽
回列表
Modern Web

一起挑戰 JavaScript 30 吧! 系列

藉由 JS30 了解不熟悉的語法和沒使用過的功能,一起讓 JS 變得更純熟!

鐵人鍊成 | 共 30 篇文章 | 34 人訂閱 訂閱系列文 RSS系列文 團隊好想工作室第二屆鐵人賽
DAY 21

JS30 Day 21 - Geolocation

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

2018-11-05 ‧ 由 Henry 分享
DAY 22

JS30 Day 22 - Follow Along Link

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

2018-11-06 ‧ 由 Henry 分享
DAY 23

JS30 Day 23 - Speech Synthesis

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

2018-11-07 ‧ 由 Henry 分享
DAY 24

JS30 Day 24 - Sticky Nav

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

2018-11-08 ‧ 由 Henry 分享
DAY 25

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

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

2018-11-09 ‧ 由 Henry 分享
DAY 26

JS30 Day 26 - Stripe Follow Along Nav

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

2018-11-10 ‧ 由 Henry 分享
DAY 27

JS30 Day 27 - Click and Drag

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

2018-11-11 ‧ 由 Henry 分享
DAY 28

JS30 Day 28 - Video Speed Controller

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

2018-11-12 ‧ 由 Henry 分享
DAY 29

JS30 Day 29 - Countdown Timer

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

2018-11-13 ‧ 由 Henry 分享
DAY 30

JS30 Day 30 - Whack A Mole

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

2018-11-14 ‧ 由 Henry 分享