JS30是加拿大工程師Wes Bos所建立一系列30天挑戰課程,本次決定跟隨挑戰此30個練習以此深入培養JS實作能力。
最後會改良練習做出一個可用鍵盤控制的網頁版Drum Pads。
關於Drum Pads:
Drum Pads是現在非常流行的新形態製造、演奏音樂的工具,即使沒有音樂基礎,不會任何樂器,也能夠透過內建的sample,手指的敲打,去完成一段音樂,而且有絢麗的燈光效果,看起來十分酷炫,現在的手機、平板也有出相關的APP,不需要大費周章,即能享受演奏、創造音樂的樂趣呢!
[程式碼&DEMO] [HackMD完整筆記] 目標 使用browser內建的語音轉換的API「web speech api」來進行語音識別,並...
[程式碼&DEMO] [HackMD完整筆記] 目標 利用navigator.geolocation的API去取得當下裝置的地理位置以及速率。...
[程式碼&DEMO] [HackMD完整筆記] 目標 隨著鼠標移動,用css做出HightLight樣式。 步驟流程 STEP1 取得HTM...
[程式碼&DEMO] [HackMD完整筆記] 目標 使用SpeechSynthesisUtterance物件,將文字轉為語音,並可透過頁面控制...
[程式碼&DEMO] [HackMD完整筆記] 目標 做出當scroll超過Nav時,把Nav固定在上方的效果。 步驟流程 **STEP1...
[程式碼&DEMO] [HackMD完整筆記] 目標 解析addEventListener中: Event Capture 事件捕捉 Even...
[程式碼&DEMO] [HackMD完整筆記] 目標 隨著滑鼠的移動去展開選單效果。 步驟流程 **STEP1 ** const nav...
[程式碼&DEMO] [HackMD完整筆記] 目標 實作滑鼠點擊後,能夠左右移動捲軸的效果。 步驟流程 STEP1 取得頁面元素與宣告變數...
[程式碼&DEMO] [HackMD完整筆記] 目標 實作滑鼠點擊後,能夠左右移動捲軸的效果。 步驟流程 STEP1 取得頁面元素 c...
[程式碼&DEMO] [HackMD完整筆記]目標 做一個倒數計時器。 步驟流程 STEP1 取得頁面元素和宣告變數 let cou...