iT邦幫忙

鐵人檔案

第 11 屆 iThome 鐵人賽
回列表
Modern Web

JS煉金術:Javascript30+聲光玩轉的Drum Pads 系列

JS30是加拿大工程師Wes Bos所建立一系列30天挑戰課程,本次決定跟隨挑戰此30個練習以此深入培養JS實作能力。
最後會改良練習做出一個可用鍵盤控制的網頁版Drum Pads。
關於Drum Pads:
Drum Pads是現在非常流行的新形態製造、演奏音樂的工具,即使沒有音樂基礎,不會任何樂器,也能夠透過內建的sample,手指的敲打,去完成一段音樂,而且有絢麗的燈光效果,看起來十分酷炫,現在的手機、平板也有出相關的APP,不需要大費周章,即能享受演奏、創造音樂的樂趣呢!

鐵人鍊成 | 共 30 篇文章 | 4 人訂閱 訂閱系列文 RSS系列文
DAY 21

[JS30]DAY20 : Speech Detection

[程式碼&DEMO] [HackMD完整筆記] 目標 使用browser內建的語音轉換的API「web speech api」來進行語音識別,並...

2019-10-05 ‧ 由 BROWN 分享
DAY 22

[JS30]DAY21 : Geolocation

[程式碼&DEMO] [HackMD完整筆記] 目標 利用navigator.geolocation的API去取得當下裝置的地理位置以及速率。...

2019-10-06 ‧ 由 BROWN 分享
DAY 23

[JS30]DAY22 : Follow Along Link Highlighter

[程式碼&DEMO] [HackMD完整筆記] 目標 隨著鼠標移動,用css做出HightLight樣式。 步驟流程 STEP1 取得HTM...

2019-10-07 ‧ 由 BROWN 分享
DAY 24

[JS30] DAY23 : Speech Synthesis

[程式碼&DEMO] [HackMD完整筆記] 目標 使用SpeechSynthesisUtterance物件,將文字轉為語音,並可透過頁面控制...

2019-10-08 ‧ 由 BROWN 分享
DAY 25

[JS30] DAY24 : Sticky Nav

[程式碼&DEMO] [HackMD完整筆記] 目標 做出當scroll超過Nav時,把Nav固定在上方的效果。 步驟流程 **STEP1...

2019-10-09 ‧ 由 BROWN 分享
DAY 26

[JS30]DAY25 : Event Capture, Propagation, Bubbling and Once

[程式碼&DEMO] [HackMD完整筆記] 目標 解析addEventListener中: Event Capture 事件捕捉 Even...

2019-10-10 ‧ 由 BROWN 分享
DAY 27

[JS30]DAY26: Strip Follow Along Nav

[程式碼&DEMO] [HackMD完整筆記] 目標 隨著滑鼠的移動去展開選單效果。 步驟流程 **STEP1 ** const nav...

2019-10-11 ‧ 由 BROWN 分享
DAY 28

[JS30] DAY27 : Click And Drag

[程式碼&DEMO] [HackMD完整筆記] 目標 實作滑鼠點擊後,能夠左右移動捲軸的效果。 步驟流程 STEP1 取得頁面元素與宣告變數...

2019-10-12 ‧ 由 BROWN 分享
DAY 29

[JS30] DAY28 : Video speed controller

[程式碼&DEMO] [HackMD完整筆記] 目標 實作滑鼠點擊後,能夠左右移動捲軸的效果。 步驟流程 STEP1 取得頁面元素 c...

2019-10-13 ‧ 由 BROWN 分享
DAY 30

[JS30]DAY29+1 : Countdown Timer+Whack a Hole!

​[程式碼&DEMO] [HackMD完整筆記]​目標 ​做一個倒數計時器。​ 步驟流程 ​STEP1 取得頁面元素和宣告變數 let cou...

2019-10-14 ‧ 由 BROWN 分享